Bootstrap Theme Customization

Overview

The Bootstrap theme is a key component of Screenly’s Playground applications. It’s a customized version of the popular Bootstrap framework, optimized for digital signage use cases. Understanding the theme’s structure and customization options is crucial for building engaging and functional applications.

Theme Structure

The theme is organized into multiple directories and files.

• src/app/themes/screenly/bootstrap/: Contains the core files of the Bootstrap theme.

  • styles.css: The primary stylesheet that defines the look and feel of the application.
  • _variables.scss: Variables that control colors, spacing, typography, and other visual aspects.
  • _mixins.scss: Reusable code snippets that simplify common styling tasks.
  • _screenly.scss: Custom styles specific to Screenly’s design and branding.
  • _overrides.scss: Styles that override default Bootstrap components and styles.
  • _index.scss: Entry point for compiling the theme stylesheets.

Customization Options

The Bootstrap theme provides various options for customizing the look and feel of your Playground application.

1. Using Theme Variables

• _variables.scss: This file contains Sass variables that define various design elements. You can modify these variables to change the theme’s colors, typography, spacing, and other visual aspects.

Example:

$primary: #28a745; /* Change the primary color */
          $body-font-family: 'Roboto', sans-serif; /* Update body font */
          $grid-gutter-width: 20px; /* Adjust column spacing */
          

2. Overriding Bootstrap Components

• _overrides.scss: This file allows you to override the default styles of Bootstrap components. Use this to create custom styles for specific components.

  Example:

  .btn-primary {
              background-color: #198754; /* Custom primary button color */
            }
            
            .navbar {
              background-color: #f8f9fa; /* Modify navbar background */
            }
            

3. Custom Styles

• _screenly.scss: This file is used for creating custom styles specific to Screenly’s design and branding. You can add any additional styles that are not covered by Bootstrap.

Example:

.screenly-logo {
            /* Custom styling for the Screenly logo */
          }
          
          .custom-section {
            /* Styles for a custom section */
          }
          

4. Extending Components

• src/app/app.module.ts: You can extend existing Bootstrap components by creating custom components that inherit from them.

  Example:

  import { Component } from '@angular/core';
            
            @Component({
              selector: 'app-custom-button',
              templateUrl: './custom-button.component.html',
              styleUrls: ['./custom-button.component.scss']
            })
            export class CustomButtonComponent extends ButtonComponent {
              // Add custom functionality or styles
            }
            

5. Using Angular’s Styles

• src/app/app.component.scss: You can apply CSS directly within your Angular components.

  Example:

  .container {
              background-color: #eee;
            }
            

6. Using External CSS Files

• src/app/app.module.ts: Add external CSS files to your styles array in the AppModule.

  Example:

  import { BrowserModule } from '@angular/platform-browser';
            import { NgModule } from '@angular/core';
            
            @NgModule({
              imports: [
                BrowserModule,
                // ...
              ],
              declarations: [
                // ...
              ],
              bootstrap: [
                AppComponent
              ],
              styles: [
                './app.component.css', // Additional CSS file
              ]
            })
            export class AppModule { }
            

References

• Screenly Playground GitHub Repository
• Bootstrap Documentation
• Angular Documentation

Important Notes

• Always make a backup of your code before making any changes.
• Test your changes thoroughly to ensure they don’t break existing functionality.
• Refer to the official Bootstrap documentation for detailed information on component styles and customization options.
• Be mindful of browser compatibility when making changes to the Bootstrap theme.