Working with Branding |
In SSA 12.0 a new file brand.css has been introduced through which you can customize banner and branding for SSA.
HTML Banner
This is in reference to section that appear on top part of the application. You can use this space to add your organization’s logo and apply colors in accordance with your brand guidelines.
For reference, refer to: Customerconfigurations > analyst > theme > banner > default
Duplicate the default folder containing 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 ability to:
You can find the brand.css file in the default brand’s folder:
Customerconfigurations > analyst > theme > branding > default > brand.css
Or you can also download it from here.
Creating a New Brand
Customerconfigurations > analyst > theme > branding > default > brand.css
Creating a new brand Using brand.css to customize your brand
Set the following .css properties to "display:none;" in case you do not want to display banner
#banner { display: none; } #mobileBanner{ display: none; }
Set the following .css properties to "display:BLOCK;" in case you want to display banner.
#banner { display: BLOCK; } #mobileBanner { display: BLOCK; }
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 *** */
You can refer to a different banner in the same brand for mobile devices.
For setting different banner on mobile, set following property-(update only 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.
The navigation buttons can be moved below the custom banner/ default banner by modifying the “top” css property according to the height of banner in px as below:
#navigationIcon.iconContainer { top: 50px; }
We have added instructions as comments within the brand.css file so that it provides you contextual help for each of the UI property in the .css file. It allows you to modify following UI elements.
Changing the locator marker for the map in your custom brand