The colour of every component, within AudienceView Kiosk is defined within a rule. These rules are defined within the brand.css style sheet.
To change the colour of a component, change the existing colour values within the corresponding rule’s colour properties. These properties are typically background-color or color, and the corresponding colour values are typically in HEX. You can, however, also use RGB or plain language colour values.
 | Information
For example, to change the main banner from orange to red, you would change the value of the background-color property, within the .mainBanner rule, from #F47421 to #FF0000. Thereby, resulting in the following rule:
.mainBanner {background: :#FF0000;} |
To modify the AudienceView Kiosk colour definitions, perform the following:
- Determine the colour combinations you want to use for AudienceView Kiosk.
- Obtain the HEX, RGB or plain language values for these colours.
- Change the current colour definitions, within the brand.css style sheet.
Specifying AudienceView Kiosk Banner Colours
The default colour definitions within AudienceView Kiosk banners include the following:
| Component |
Rule |
Property |
Default |
 |
.mainBanner |
background |
#F47421 |
 |
.alphabetBannerBg_on |
background-color |
#003B77 |
 |
.alphabetBannerBg_off |
background-color |
#F47421 |
| Alphabet Banner Text |
.alphabetBanner |
color |
FFFFFF |
Specifying AudienceView Kiosk Calendar Colours
The components within the calendar include the following:
These colour definitions are defined within the following rules:
| Rule |
Property |
Default |
| .calendar |
background-color |
#C0C0C0 |
| .cal_off |
background-color |
#003B77 |
| .cal_on |
background-color |
#FF0000 |
| .cal_none |
background-color |
#F5F5F5 |
Specifying AudienceView Kiosk Button Colours
The colours corresponding with the buttons within AudienceView Kiosk depend on whether the button is clicked or not.
For example:
These colour definitions are defined within the following rules:
| Rule |
Property |
Default |
| .btn_off |
background-color |
#003B77 |
| .btn_on |
background-color |
#FF0000 |