[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.


    • Related Articles

    • [Internal] Theme Override Index

      Introduction This index provides a list of overrides you can make to a theme, which includes a link to the step-by-step guide for doing each one. To jump to a guide, just click on the override. Background Image Blurry Background Image: Clear it up ...

    • [Internal] Images in a Theme: Editing

      Introduction This document provides step-by-step instructions for editing images in a theme.       1) The current image will need to be removed first. To remove an image, select the Remove checkbox next to the image and click Save.   2) The "Save ...

    • [Internal] New Theme: Create One in Management Console

       Introduction This article provides step-by-step instructions for creating a new theme in the Management Console. This process is primarily used when a Next Steps Form Received ticket is received or when the client is upgrading their template.  ...

    • [Internal] New Theme: Apply and Review in Management Console

      Introduction This document provides step-by-step instructions for applying a new theme in the Management Console and then reviewing it to make sure everything is correct before notifying the client that it is ready. Apply the New Theme 1) On the home ...

    • [Internal] Theme Override: Create One That Applies to All Client Modules

      Introduction This guide provides step-by-step instructions for creating a theme override in the Management Console that applies to all client modules.  A theme override is used to take an existing theme and change certain aspects of it (e.g., ...