[Internal] Colors in a Theme: Change Them

[Internal] Colors in a Theme: Change Them

Introduction
This document provides step-by-step instructions for changing colors in a theme.
 

NOTE: All templates use the same default colors. Changing colors in the theme, to align with the client's colors, involves changing four theme colors:

1) Primary color
2) Primary hover color
3) Secondary color
4) Secondary hover color

Typically, the client will provide the primary and secondary colors which will be used to create the hover colors. For new client's colors, refer to their Next Steps Received ticket. 

 
1 ) Navigate to the Default Colors Word Document, download it, and save a copy in the client’s template folder on the T drive as css_handle_YYYYMMDD .
2) Enter the client's primary (main) and secondary colors into the table in the document.
3) Navigate to the online color tool here: https://pinetools.com/lighten-color.

      4) Enter the primary color into the Original Color hex box.

 

 

NOTE: If the client supplies their primary and secondary colors in RGB format, enter those numbers in the RGB textboxes to the right. If the client supplies their colors in Pantone format, Google "Pantone to hex" to find an online converter tool to convert the colors to hex.

   

5) In the Amount textbox, enter the value of 15 to lighten the color by 15%. The new primary hover color is in the hex box.

 


NOTE: If, after reviewing the template, the hover color is too light and does not provide enough contrast to read, adjust the percentage to make it darker.


6) Enter this new hex value as the client's primary hover color in the table in the Default Colors document.

      7) Repeat steps 4 – 6 for the secondary hover color.

 

NOTE: There are now all four colors to replace. The best way to replace them is by using the "Find and Replace" function in the Default Colors document.

      

8) To do Find and Replace for the primary color, do CTL+H or CMD+H in the Word Document. The Find and Replace control appears.

      

      9) Enter the primary color from the theme into the Find what box (i.e., 8C9516) and enter the new primary color from the client into the Replace with box (i.e., 02B4DC).

10) Click Replace All.

      11) Repeat steps 9 and 10 for the primary hover color, secondary color, and secondary hover color. Save the Word Document. 

      12) Return to the Edit Theme page in the Management Console.

13) Delete the CSS code from the Edit Theme page using CTL + A followed by Delete.

      14) Copy all the CSS code from the css_handle_YYYYMMDD document you just created and paste it into the Edit Theme page.

15) Click Save. A "Save successful" notice should appear.

To apply and review these changes, see the New Theme: Apply and Review in Management Console guide.

For the Next Steps Received ticket, refer to Images in a Theme: Editing to update the client images. If the images have been updated, click Add Module and refer to step 6 of the support article New Module: Create One in the Management Console.