Skip to main content
  • Bravura Security Fabric Documentation
  • Customization
  • Example: Changing horizontal background gradient headers

Example: Changing horizontal background gradient headers

In Bravura Security Fabric 12.8.0 the background gradient macros in the CSS are vertical (top-to-bottom).

This customization example shows you how to change the UI style to the classic horizontal gradient fading from left to right as in previous versions of Bravura Security Fabric .

  1. To change the UI to use horizontal background gradient headers, add the following to /design/custom/style-common-custom.m4 (or create one if it doesn't already exist).

    dnl BACKGROUND_GRADIENT_HORIZONTAL(colour1r, colour1g, colour1b, colour2r, colour2g,
            colour2b)
         
define(`BACKGROUND_GRADIENT_HORIZONTAL', `dnl
background: rgb($1, $2, $3); /* Any old browsers */dnl
background: -webkit-linear-gradient(left, rgba($1, $2, $3, 1) 0%, rgba($4, $5, $6,
            1) 100%); /* UC Browser for Android */dnl
         
background: linear-gradient(toright, rgba($1, $2, $3, 1) 0%, rgba($4, $5, $6, 1) 100%);
            /* W3C */dnl
         
')

  2. Add the following to /design/custom/style-custom.m4 (or create one if it doesn't already exist).

    #header {
BACKGROUND_GRADIENT_HORIZONTAL(255,0,0,0,255,255);
}

    • Where the values of BACKGROUND_GRADIENT_HORIZONTAL could be defined as:

      • Variants of a pre-defined colour macro i.e., _MAIN_RGB, _SECONDARY_RGB

        example: BACKGROUND_GRADIENT_HORIZONTAL( _MAIN_RGB,_SECONDARY_RGB);

      • A colour that has not been previously defined, in RGB format. (i.e., 255, 255, 255 for white, 115, 172, 206 for our classic blue, etc.)

        example: BACKGROUND_GRADIENT_HORIZONTAL(255,255,255,115,172,206);

  3. Open a command prompt window and point to the <instance>\design directory.

  4. From that directory, rebuild the skins by running the following:

    make default en-us
make install default en-us

  5. Ensure that no errors are returned.

In this section: