Skip to main content
  • Bravura Security Fabric Documentation
  • Customization
  • Customize the logo using the sample skin

Customize the logo using the sample skin

Note

Starting with version 12.9.1, the recommended method for customizing logos is through the branding admin interface, which allows you to upload logos and configure colors without editing SCSS files or running make.bat. The procedure below applies to the legacy Angular UI only and is retained for environments that require SCSS-based customization.

Click below to view a demonstration of editing the custom SCSS files to replace the Bravura Security logo with a different logo using the sample skin files.

You can update the header logo with your own company logo. To do this:

  1. Copy design\examples\customLogo\logo.scss to design\custom\.

  2. Place the new image file in design\custom\.

    The file type must be PNG, GIF, or JPG. PNG is recommended for non-rectangular logos because it supports transparency.

  3. Edit the new logo.scss with details of the new image file. For example:

    $logo-file-name: 'bravura-security-white.png';

  4. Add the following line to design\custom\_common-custom.scss:

    @import 'logo';

  5. Generate the new skins

To customize logo height and width:

  1. Open design\custom\logo.scss.

  2. Add the following lines:

    $logo-height:<height in pixels>;
$logo-width: <width in pixels>;
$logo-pad-top: <pixels>
$logo-pad-bottom: <pixels>;

    For example:

    $logo-height: 20;
$logo-width: 125;
$logo-pad-top: 8;
$logo-pad-bottom: 8;

  3. Generate the new skins

Keep the following in mind when customizing the logo:

  • $max-logo-height, which is 24px by default, is calculated from the following operation:

    $max-logo-height = $menu-height - $logo-pad-top - $logo-pad-bottom = 40px - 8px - 8px = 24px

    The values for $menu-height, $logo-pad-top, and $logo-pad-bottom are set in the non-modifiable file _common.scss. As a result, the maximum logo height is 24px.

  • The $logo-height can be customized in logo.scss. The $logo-display-height is the minimum of the two values, $max-logo-height and the custom $logo-height.

  • The maximum recommended height is 65 pixels including the top and bottom margin.

  • The maximum recommended width is 300 pixels.

  • The $logo-display-width is calculated from the following operation:

    (min($max-logo-height, $logo-height) / $logo-height) * $logo-width

In this section: