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 m4 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/extension must be png, gif or jpg. Using 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

Notes:

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

    $maximum-logo-height = $menu-height - ($logo-pad-top + $logo-pad-bottom) = 40px - (8px + 8px) = 24px

    The values for $menu-height and $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 file logo.scss The logo-display-height is the minimum of the two values, $maximum-logo-height and the custom $logo-height.

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

  • The maximum recommended width is 300 pixels.

  • The $logo-display-width becomes the result of the following operation:

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

In this section: