Custom Branding

Navigating to the logo and colour customisation screen

1. Click Administration in the sidebar menu, then select the Settings option

2. Navigate to the Customisation tab as indicated below

3. In this screen, you can change the active logos and adjust the application colour scheme to match your bespoke branding.

Changing Logos

– Recommended Image Sizes

(1) Application Logo – Minimum 200px x 100px; Aspect Ratio = 2:1

(2) Login Screen Logo – Minimum 230px x 100px; Aspect Ratio = 2.33:1

(3) Favicon – Minimum 100px x 100px; Aspect Ratio = 1:1

1. Select Browse or drag the desired image file to the respective logo upload

2. Select Upload to upload the logo file to the 6clicks app

3. After the upload is complete, make sure to select the Save All button (as seen below) to apply and save the changes.

4. Finally, your logos should appear in the corresponding parts of 6clicks, as seen below:

Application Logo (seen on all screen after login)

Login Screen Logo (seen on login page)

Favicon (seen in the associated browser tab)

Changing Colours

1. Click on the colour box corresponding to the section you wish to change.

2. Once selected, a colour palette will appear immediately, allowing you to select your desired colours.

Please note, the colour palette tool that appears (as seen below) will depend on your computer’s operating system.

3. Repeat for each colour option you wish to change.

Please note, read ‘Understanding how to Apply Your Colour Palette’ below to better understand the sections for each colour option.

4. After you upload the desired logos, make sure to select the Save All button (as seen below) to apply and save all changes made.

Resetting All Active Branding

NOTE: This cannot be undone, so please ensure you wish to completely reset BOTH the active logos and colourway.

1. If you wish to reset the logo AND colour branding that has been applied to your tenant, select the Reset button in the top right of the Customisation tab.

2. To confirm the tenant branding reset, select the Yes button in the pop-up window.

3. After confirmation, your tenant will revert to the 6clicks default branding, as seen below.

Understanding how to ‘Apply Your Colour Palette’

Below shows how each colour section, when changed, affects the branding of your local 6clicks instance.

The red boxes in the following in-app screenshots highlight how the colours are rendered for each tenant (each respective section will be coloured in BLUE). Please note, when each colour is changed, this may alter different components across the different app modules.

– Login Screen Colour Range (Colour 1) and Login Screen Colour Range (Colour 2)

The two-colour gradient renders from top left (colour 1) to the bottom right (colour 2) of the login page. This is only applicable to the login screen.

– Primary Colour

– Secondary Colour

– Table Header Colour

This is only relevant to modules with tabs/tables within them, like the Assessments or Administration tabs.

– Table Link Text

Only relevant to table elements that have links associated with them

– Main Text Headings

– Secondary Text Headings

Only relevant to table elements that have links associated with them

– Side Panel Background Colour

Please note, the hover colour of the icons cannot be changed from default.

– Side Panel Text Colour

Only relevant to table elements that have links associated with them