How to Customise the Colours, Logos and Design

A core feature of the Nucleus is the flexibility provided to Admin Users in the application of the design. Admin Users can update and change the colours, logos and Favicons at any time and the changes are immediately applied to the site. This guide will cover the following:

• Updating colours
• Adding logos to the Entrant and Viewing Interface
• Adding logos to the finance pdfs
• Updating default email header and footer emails

There are separate guides which cover the following design elements

• Updating the favicon

How to update the Instance Colours

Nucleus now provides a page where Admin Users can update the colours on the Entrant and Viewer Interface. Both interfaces are separate and allow for the provision of different colours, if required, however, admins will need to provide colours for both sections even if identical colours are selected. The page, titled Design Controls, provides 14 controls for the Entrant Interface and 13 controls for the Viewer interface. In each field you will need to provide a Hex Colour Code, which will then be applied to the elements of the site linked to the control – a full list of controls is below. To update the colours:

1. Log into the Admin Interface
2. Go to Actions>Misc
3. Select Design Controls in the System Administration menu
4. Enter the hex values of the colours that require updating into the relevant control fields
5. Click Save
6. Enter I AM SURE to apply
7. Switch to the Entrant/Viewer Interface and refresh the page to see the changes

Note – there is no limit as to the amount of times you update the colours

Design Controls

The table below details the design controls and the elements they update:

Components – Entrant Interface

Components – Viewer Interface

	CONTROL	COMPONENT	EXAMPLE
1	Registration Background	The design applies a hexagonal gradient of the colour selected by the client
2	Registration Background Triangles	Registration Triangles the design should apply a gradient to the colour selected by the client.
3	Registration Feature Colour	There is a colour applied to the selected state of the input fields in the right hand column
4	Registration Feature Colour	The background colour of the button in the dark menu
5	Menu Colour	Registration Right Column
6	Menu Colour	Footer
7	Menu Font Colour	All fonts in the menu and footer, excluding the input fields for email and password.
8	Menu Colour Hover	The hover background for menu items
9	Dark Background Button Font Colour	Dark Background Primary Button font
10	Login Page Input Fields	Changes the colours used for the background of the input fields
11	Registration Page Inputs	The colour of the font in the input fields
12	Logged in Feature Colour	Contains the main menu and is in the header of each logged in page.
13	Logged in Feature Colour	Page Divider
14	Logged in Feature Colour	Divider Header Background
15	Logged in Feature Colour	Hyperlink font colour
16	Logged in Feature Colour	Bullet Point Colour
17	Logged in Feature Colour	Main Menu Menu Hover Colour – stripe
18	Logged in Feature Colour	Search icon
19	Logged in Feature Colour	Category Box Header
20	Logged in Feature Colour	Category Box Footer
21	Logged in Feature Colour	Category Box Line
22	Logged in Call to Action	Light Background Primary Button
23	Logged in Call to Action	Main Menu Logout Button
24	Light Background Primary Button font	Light Background Primary Button font
25	Divider Header Font	Divider Header Font
26	Divider Header Font	Paginated Divider Font
27	Logged in Call to Action	Light Background Primary Button
28	Logged in Call to Action	Main Menu Logout Button
29	Divider Header Font	Hamburger Menu Icon
30	Divider Header Font	Divider Header Font
31	Divider Header Font	Paginated Divider Font
32	Divider Header Font	Hamburger Menu Icon

How to update the Logos for the Entrant and Viewer Interface

Nucleus now provides a page where Admin Users can update the logos on the Entrant and Viewer Interface. Both interfaces are separate and allow for the provision of different logos, if required. However, Admins will need to provide logos for both sections even if identical colours are selected.

Before you add a logo you will need to make sure the image is hosted on a website, for example, a WordPress Media Library with a publicly accessible URL. It is not possible to upload images directly to Nucleus but images with a link can be applied. If you do not know html code then we recommend that you resize the image to the required size before you upload. svg, png and jpeg files are accepted.

1. Log into the Admin Interface
2. Go to Actions>Misc
3. Select Design Controls in the System Administration menu
4. Locate the following fields and past in the logo url:
   1. Logo Header URL – controls the logo used for all logged in pages in the header
   2. Logo Login Page URL – controls the logo used on the login page and password reset process
5. Click Save
6. Enter I AM SURE to apply
7. Switch to the Entrant/Viewer Interface and refresh the page to see the changes

Note – there is no limit as to the amount of times you update the logos

How to Add a Logo to the Finance pdfs

Nucleus allows Admins to provide a custom logo, per instance, for the invoice, receipt and credit note PDFs. Before you add a logo you will need to make sure the image is hosted on a website, for example, a WordPress Media Library with a publicly accessible URL. It is not possible to upload images directly to Nucleus but images with a link can be applied. If you do not know html code then we recommend that you resize the image to the required size before you upload. Ensure the height does not exceed 150 px and width 500 px.

1. Log into the Admin Interface
2. Go to Actions>Misc
3. Click Design Controls in the System Administration Menu
4. Scroll down find Invoice Paperwork Logo URL in the Entrant Interface section
5. Paste the URL in to the text area
6. Click Save
7. Type I AM SURE and then click OK
8. To test the paperwork go to Actions>Awards and click edit. Scroll to the bottom of the page and in the Test Paperwork section click on pdf to review the logo in the documents

How to Update the Default Header and Footer Email Logos

All email templates have an option to include a standard header and footer. This is a logo that admins can set on the design control page that will automatically be printed above and/or below the email content. For more information about setting up email templates read the help guide. This section will explain how to set the email logos.

You will first need to allow the use of standard header and footer from the email templates.

1. Log into the Admin Interface
2. Go to Actions>Misc
3. Click on Email Templates under the Email Management section
4. Look for the relevant Email Template and click on Default
5. Set the “Include standard header and footer” question to Yes
6. Click Save & Close
7. Repeat steps 3 – 6 for all the email templates required

Once you have actioned this, you can add the standard header and footer URL:

1. Go to Actions>Misc
2. Click Design Controls in the System Administration Menu
3. Scroll down find Email Header URL and Email Footer URL
4. Paste the logo URL in to the text areas as required
5. Click Save
6. Type I AM SURE and then click OK
7. The new images will be included for any newly generated emails that have bene set to use the header and footer

For all instances launched before December 2022 an image file would have been requested and hard coded to be used as the email header. This file is still used unless you decide to replace it with another. To use the default file enter _default_ into the text areas. This is the default answer.