The Portal Colours settings allow you to fully customise the appearance of your courses. With these options, you can align the platform to your brand, maintain visual consistency, or highlight specific content areas.
You can choose to:
Edit colours for an individual course, or
Apply default colours at the Super Admin level, which will automatically carry across all newly created courses.
Setting colours at the platform level helps ensure consistency across multiple courses and saves time during course creation.
Header Band 
Where it appears: The full top bar across the platform (logo area, edit button, search/add/chat/notifications, profile).
Purpose: Primary brand surface visible on every page.
Impact: Changing this updates the global header look and overall brand feel.
Example:
Header Icons 
Where it appears: Icons on the right side of the header (search, add, messages, notifications, profile).
Purpose: High-contrast controls for quick actions.
Impact: Adjusting this affects icon visibility against the header band.
Example:
Portal Colour 
Where it appears: Primary action buttons (e.g., +Add, Editor, Access) and key CTAs.
Purpose: Highlights core interactions and drives attention.
Impact: Changing this alters the look and prominence of main buttons.
Example:
Secondary Colour
Where it appears: Secondary buttons, accents, and subtle highlights.
Purpose: Visual hierarchy for secondary actions.
Impact: Adjusting this changes how secondary elements stand apart from primaries.
Example:
Secondary Font Colour
Where it appears: Supporting text (subheads, labels, secondary UI text).
Purpose: Clear readability on light backgrounds.
Impact: Affects legibility and tone of secondary copy.
Example:
Course Editor Band
Where it appears: The coloured band within the Course Editor interface.
Purpose: Distinguishes edit mode from learner view.
Impact: Changes the visual identity of the editor workspace.
Course Editor Icons
Where it appears: Icons in the Course Editor band (tools, settings, actions).
Purpose: Neutral, readable tool icons.
Impact: Influences tool clarity; keep contrast with the editor band.
Example:
AI Background Colour
Where it appears: Background of AI features (AI tutor/chat, AI generation areas).
Purpose: Branded differentiation for AI interactions.
Impact: Adjusting this updates the visual style of AI components platform-wide.
Example:
Left Menu
Where it appears: The vertical left navigation (Courses, Resources, Groups, etc.).
Purpose: Solid, neutral base for navigation.
Impact: Alters the overall look and contrast of the main nav area.
Example:
Left Menu Icon
Where it appears: Icons inside the left navigation.
Purpose: Subtle but readable pictograms alongside labels.
Impact: Affects icon clarity and emphasis in the nav.
Example:
Drop Menu Icon
Where it appears: Dropdown/chevron indicators in menus.
Purpose: Visual cue for expandable items.
Impact: Changes the subtle affordance for opening menus.
Example:
Page Header
Where it appears: Top-level titles on pages (e.g., “My Courses”).
Purpose: Strong contrast for primary headings.
Impact: Affects readability and hierarchy of page titles.
Example:
Body Background
Where it appears: The main content background behind pages, cards, and widgets.
Purpose: Clean, professional canvas for content.
Impact: Highest impact on clarity; white is recommended for accessibility.
Example:
Menu Active Colour
Where it appears: The currently selected menu item in navigation.
Purpose: Shows users where they are.
Impact: Ensure contrast; consider using Electric Blue #2D9CFF, Magenta #C93AFF, or Vivid Purple #7B2FF7 for a clearer active highlight on white.
Example:
Menu Feature Block
Where it appears: Highlighted feature sections within menus.
Purpose: Draws attention to key or promoted areas.
Impact: Adjusting this changes how feature blocks stand out.
Example:
Menu Feature Font
Where it appears: Text inside menu feature blocks.
Purpose: High-contrast text over coloured blocks.
Impact: Directly affects readability within feature callouts.
Example:
Take a look at the following articles in this section for more details:
Check out our Coursebox Demonstration Video Library for Tutorials.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article