The Brand and Skinning tool allows you to set the colours for the global elements of your site. This is for appearance of your site's User Interface to represent your brand, for example, the login page background image, button colours within folders, the search etc. There are also new features that have been introduced: Brand Elements and UI Typography.
To access and use the Brand and Skinning tool, go into settings and select "Brand and Skinning".
You will then be taken to the tool, in which you can choose the UI elements you want to change specifically from the dropdown:
Brand Elements
This section allows you to populate the Core elements of your brand:
- Logos
- Colours
- Fonts
- Typography
Once populated, this will be used in the BrandKit, an online solution that allows you to share your Brands Visual identity publicly.
Populating the Colours in this section will allow them to be available when changing the colours for UI/CMS elements across the system, including in the text/background colour dropdown on the WYSIWYG menu, when editing CMS pages, and in the other areas of the Brand and Skinning section.
Providing the fonts will also be required for you to set up typography, which in turn can be used to assign these typography styles in the UI typography section.
See How to set up Brand Elements for more information on how to populate these areas.
UI Colours
Here, you can select the primary and contrasting UI colours that are used across the system by either inputting the hex code, or clicking the colour selector to select colours via a palette, which is populated via the Brand Elements section.
Hovering over the WCAG checker also gives you more details on the accessibility of the colours used and how compliant they are.
UI Typography
You can turn on Brand Typography, which allows you to use the fonts and web styles set up in the Brand Elements section.
Please note: Once you've enabled this, it will turn off all the styling you have set up on the system. It can be reversed by disabling it. If you wish to enable UI Typography, please do so on your QA environment first to finalise styles before setting up on Production.
If you have any questions or would like assistance with setting this up, please contact Support and we'll be happy to help.
Once enabled, you can assigned the global fonts and CMS styles, in which you'll be given a preview of how this looks on the examples to the left of the menus:
Use the dropdown menus to assign the relevant CMS styles - note that for the item to appear, you must assign the relevant HTML tag to the style in the Typography set up.
Buttons & Actions
In this area, you can configure the buttons, action bar items, side panel and tab colours. Similar to the UI colour section, you can select the colours via inputting the hex code, or using the colour selector to pick a colour from your Brand colour palette.
Login Page
You can change the various elements of the login page in this section. This includes the background image (If needed), logo used (if required), a background colour if an image isn't being used, the outer login box and inner login and registration boxes.
The tooltips contain extra information, for example what file types are supported, the ideal file size and if no colour is selected.
Please note: This is purely for styling - Standard login page text can't currently be amended.
If you use SSO, the text displayed on buttons, heading, and body can be amended via Settings > Single Sign On > Select the relevant connection and scroll to Login and Logout section. Please contact Support if you need further assistance with this.
Side Nav
You can change the colours used in the side navigation in this section, using the colour selector or by inputting the hex codes.
CMS Web Pages
This is the global settings for your content pages. this allows you to set width of main content (if full width isn't being used on blocks), content position, colours for relevant sections and other features. There is also a preview to the left so you can see how these look before saving. You can override this on the page itself via the Page properties - see Creating & Duplicating Pages for more info.
Widgets
This section only applies to legacy widgets. This will be deprecated in a future release.
Footer
Use the colour selector or input a hex code to change the colour of the footer used across the system.
Asset Thumbnails
Choose the colours used on asset thumbnails, including the asset title text, icons and the selected state.
