Help Center / Website Editor

How to set the default color palette for your course website

You can set top level (sitewide) default colors for the Headings, Paragraphs, Buttons, Icons and Links on your course website.

Navigate to the Website Editor for your course.

Course Website Menu
Course Website Menu

When the Website Editor loads click the Colors icon on the top menu bar to open the Default Colors menu.

Click the Colors icon to open the default colors menu.
Click the Colors icon to open the default colors menu.

The Default Colors menu lets you set global colors for Headings (headlines), Copy (paragraph text), Buttons (background color), Buttons (text color), Icons and Links.

Click one of the swatches on the colors menu to open a color picker control and try changing a color.

Top Level Color Pickers
Top Level Color Pickers

When you change any of the default colors a Save Changes button will appear along with a checkbox that controls how the change is applied.

In most cases you'll probably want to leave the box checked so your changes update across all matching elements of your website. For example, if most of the buttons on your site were already assigned a color individually then keeping the box checked will make sure your top level changes update all of them. Otherwise any colors set at the lower level (i.e directly on a button) will remain in effect and override the top level default color set here.

In this example we changed the Button background color to blue and kept the checkbox checked.

Click the Save Changes button to apply your changes and reload the preview frame.

Or click Discard Changes to undo and cancel without applying the changes.

Saving top level color changes.
Saving top level color changes.

After saving your changes the new colors are applied and the website preview frame will reload.

Notice how the buttons updated to blue in the screenshot below.

However, also notice that the blue background on the Sign-in button now makes the text harder to read. This is a good example of an element that was updated individually (to override the defaults) and must now be adjusted again. You can do that by hovering over the Sign-In button, clicking the edit button and changing the button text color at the element level (button level) as opposed to the top level.

Viewing applied top level color changes.
Viewing applied top level color changes.

Many of the individual elements on your course website can be customized to override the top level default colors so you probably won't have to visit this menu very often after making your initial color choices.