Creating Customised Brand for SSA

From SSA 12.0 onwards, a new brand.css file has been introduced through which you can customise banner and branding for SSA.

Branding has two aspects:
  1. HTML banner
  2. Brand.css

HTML Banner

This is in reference to the section that appears on the upper part of the application. You can use this space to add your organisation's logo and apply colours in accordance with your brand guidelines.

Note: For the best SSA experience, you should make a banner with 50px height.

For reference, refer to: Customerconfigurations > analyst > theme > banner > default

Duplicate the default folder containing the Pitney Bowes banner and edit the index.html file to suit your brand identity. You can create your own HTML banner as well. The HTML banner that you create would be referred in the brand.css file.

Brand.css

We have introduced a .css file to manage all branding-related aspects through brand.css. Through this file, you are given the ability to:

  1. change the colour-related properties of SSA's UI elements to suit your organisation's brand.
  2. choose if a banner should be visible or not,
  3. provide reference to the banner file to be used in your brand,
  4. optionally provide a separate reference for the banner on mobile devices,
  5. choose if navigation buttons i.e. "Options", "Add" and "Legends" buttons should appear within the banner or on the map

You can find the brand.css file in the default brand's folder:

Customerconfigurations > analyst > theme > branding > default > brand.css

You can also download it from here.

Creating a New Brand

  1. To create a new brand for mobile-first SSA, go to the branding folder.
    Customerconfigurations > analyst > theme > branding > default > brand.css
  2. Create a new folder, you can provide a suitable name for the folder.
  3. The folder name is the brand name you can reference for a map-configuration from SSA Admin Console.
  4. Copy the brand.css file into the new brand folder you created.

Creating a new brand Using brand.css to customise your brand

  1. No Banner

    Set the following .css properties to "display:none;" in case you do not want to display the banner

     #banner {
 display: none;
  }
 #mobileBanner{
 display: none;
  }
  2. With banner

    Set the following .css properties to "display:BLOCK;" in case you want to display the banner.

    #banner {
display: BLOCK;
}
#mobileBanner {
display: BLOCK;
}
  3. Referencing the Banner

    You can refer to the HTML banner within the brand.css file by modifying the path of the file (update only the BOLD section).

    /* Banner_URL = *** /theme/banner/default/index.html *** */
    Note: Please be careful while updating this property, do not remove the comments or change the ***, as our java-script program looks for the *** to pick the html file's path
  4. Referencing the Mobile Banner

    You can refer to a different banner in the same brand for mobile devices.

    To set a different banner on mobile, set the following property (only update the BOLD section)

    /* Mobile_Banner_URL = **** /theme/banner/default/index.html **** */

    If this property is not specified, the banner reference Step A will be used for mobile as well.

    Note: Please be careful while updating this property, do not remove the comments or change the ****, as our java-script program looks for the **** to pick the HTML file's path.
  5. Position of Navigation Buttons

    The navigation buttons can be moved below the custom banner/default banner by modifying the "top" css property according to the height of the banner in px as below:

    #navigationIcon.iconContainer {
top: 50px;
}
    Note: The height of the default PB banner is 50px.
  6. Changing the colour property of UI elements

    We have added instructions as comments within the brand.css file so that it provides you with contextual help for each UI property in the .css file. It allows you to modify the following UI elements.

    1. Primary button

    2. Default button

    3. Link button

    4. Form elements

    5. Accordions

    6. Tables

    7. Token/Badge colour

    8. Default annotation colour

    9. Tabs (active state)

    10. Date picker

Changing the locator marker for the map in your custom brand

When creating a custom brand, for example by copying an existing brand and changing it, it is expected that the images folder will also be copied, as this contains the locator marker PNG file. In order to change the locator marker, please create a new PNG image with the same name and replace the existing image with the new one. The new image must also be 32px x 32px in size and should have a transparent background.
Note: If the locator marker is to be replaced, it needs to be replaced with one that is also 32px square with the base pointing to the bottom middle (i.e. 16px across and 32px down).