Skip to main content
  • Bravura Security Fabric Documentation
  • Customization
  • Modifying style

Modifying style

You can customize the style of Bravura Security Fabric web pages by editing the files.

All Bravura Security Fabric web pages share a common sassy cascading style sheet, styles.scss. The style sheet defines all colors, fonts, images (including buttons and icons), and styles for common HTML elements. Each Angular component also has a style sheet associated with it for styles specifically relating to that component.

This section shows you how to modify the common styles. Before you start, ensure that you have read preceding sections from About the User Interface to Generating and Installing Skins .

To modify global styles, the following empty files are provided in design\custom\:

  • _common-custom.scss – Used to override or add scss variables for common colors, fonts, and backgrounds.

    A full list of customizable variables can be seen in design\src\styles\src\_common.scss . Note that files starting with an _ (underscore) can only contain variable declarations.

  • styles.scss – Override all base styles using this file, or imports to new CSS modules.

  • styles-custom.scss - Override any styles in the base product in this file.

    This is the most common place for customizations to be placed.

The shipped customization samples contain instructions for customizing them.

An example called customTheme , in design/example/customTheme , has some CSS examples for how to customize colors, and instructions on how to deploy.

To modify the page style:

  1. Do one or more of the following:

    • Override styles.scss

      1. Open styles.scss in \<instance>\design\src\ui\src\.

      2. Copy text between "Start copy" and "End copy".

      3. Open styles.scss in \<instance>\design\custom\ and paste the text.

      4. Add $custom-style: true; to the top of the new file.

      5. Customize and remove global styles as desired.

    • Append styles to styles.scss

      1. Open styles-custom.scss in \<instance>\design\custom\.

      2. Add new global styles to the new file.

      3. To add new styles for one specific skin, prefix each style with html[ data-skin=<skin id>] ; for example:

        html[data-skin=unbranded] .companyLogo { display: none; } .

    • Append styles to _common.scss

      1. Open _common-custom.scss in \<instance>\design\custom\.

      2. Add new styles to the new file.

  2. Save and close the files.

  3. Generate and install the new skin files .

    The only way to make a style customization for a specific skin is using the html[data-skin=<skin id>] prefix for that style in styles-custom.scss . You cannot perform customizations for a specific skin by placing SCSS files in the \<instance>\design\custom\<skin id> directory.

File order

Style files are loaded in the following order:

  1. design/src/styles/_common.scss

  2. design/src/styles/component/_common-component.scss

  3. design/custom/_common-custom.scss

  4. design/custom/styles.scss

  5. design/src/styles/styles.scss

  6. design/src/styles/styles-component.scss

  7. design/custom/styles-custom.scss

Where anything in later files is merged in, but wins out over content in earlier files.

In this section: