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

Customize the logo using the sample skin

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: