Only two colors power the overall look and feel of your Community Essentials site: a primary and secondary color.
Watch the video
What do these colors control?
Let's look at two Home page examples to illustrate the impact changing these two colors has on a page.
In the first example, we're using a dark blue primary color and a teal secondary color.
As you can see below, simply changing the primary to orange and the secondary to blue, we've drastically changed the aesthetic of the entire page. And the best part is they can be updated with just a few clicks.
NOTE: The Secondary Color also controls your site's footer background.
Steps
- In the Admin Toolbar, click Admin.
- In the Admin interface, navigate to Pages > Colors. The page opens in a new tab, which will be useful for testing your colors later.
- On the Main Colors tab, you'll see quite a few options. However, the only two you need to update are Primary Color and Secondary Color:
NOTE: Depending on your chosen colors, you may also need to adjust the Text on Primary and Text on Secondary options to ensure text is readable across your site. For example, if your Primary Color is red, white text will not be readable.
- Click the menu for Primary Color and choose your organization's main brand color. You can choose a standard web color or click the Custom Color button at the top to input a hex color code, RGB, or HSB value. When finished, click OK to close the color menu.
- Repeat this process for Secondary Color.
- Scroll to the bottom of the page and click Save to apply your changes.
TIP: Switch back to your Home page browser tab and refresh the page to see how your colors look. Switching between these two tabs makes it easy to make and verify adjustments. Be sure to verify text is readable with your new colors; if not, adjust the Text on Primary and Text on Secondary options. You can also adjust the other options, such as your link colors and site footer background color, if desired.