Set the Course Colours

Created by Carolina Martin, Modified on Sun, 31 Aug at 6:07 AM by Carolina Martin

You can fully customise the look and feel of each course using the Course Colours settings. These options allow you to match your branding, create visual consistency, or highlight specific content types. You can edit the colour theme for an individual course or apply default colours at the Super Admin level, which will automatically apply to any newly created courses.

Tip: Editing colours at the platform level ensures visual consistency across multiple courses and makes the creation process more efficient

Customisation Options

Below are the editable colour settings and what they control:

Section Styling

Section Color: Main background colour of the section tile.
Section Icon Color: Colour of icons within each section (e.g., folder icon).
Section Number Color: Colour of the section number label.
Section Number Background Color: Background behind the section number.
Section Completed Tick Color: Tick icon colour shown when a section is marked complete.
Section Completed Tick Background Color: Background colour behind the tick icon.
Section Add Button Background Color: Background of the “Add Section” button.
Section Border Color: Outline colour of each section.

Activity Styling

Activity Color: Main border or highlight colour of an activity block.
Activity Icon Color: Icon colour for each activity (e.g., quiz, PDF).
Activity Background Color: Background behind the activity block.
Activity Completed Tick Color: Tick icon colour shown when an activity is completed.
Activity Completed Tick Background Color: Background behind the tick icon.

Selected Activity Styling

These colours appear when an activity is clicked or highlighted:

Selected Activity Color: Colour overlay for selected activities.
Selected Activity Icon Color: Icon colour in selected state.
Selected Activity Background Color: Background colour of selected activities.
Selected Activity Completed Tick Color: Tick icon colour when the selected activity is marked complete.
Selected Activity Completed Tick Background Color: Background colour behind the completed tick in the selected state.

How to Change Colours

Click the colour square beside each setting to open the colour picker. You can either:

Select a colour manually.
Enter a HEX code to match your brand palette precisely.

Repeat this process for each element you'd like to customise.

Take a look at the following articles in this section for more details:

Check out our Coursebox Demonstration Video Library for Tutorials.