Manage Theme

The following items are for users who have upgraded from a My.coursebox.ai account to become a super admin on a Branded Training Platform, which is a stand-alone database and installation of the Coursebox platform.

In your course home page click the pen to get started.

Logos

Provide a name for your portal, this will be used in all the communication Groups like emails, notifications, browsers etc.

The header logo should usually be a white png with transparency min 100px high. If you invert the header to white, use a colour logo. We recommend you to crop the logo in a large screen.

The Portal Icon file is used on apps and tabs. It should be in .ico format.

The email logo should be a png file not smaller than 100px high. We recommend you to crop the logo in a large screen.

For the small screen header logo, provide a png (transparent background, square format) icon file, for tablet and mobile screens top left header logo.

For the mobile app logo, provide a png (transparent background, square format) icon file, for mobile apps.

For the sharing image, provide an image file which will appear as a thumbnail while sharing on social networking sites like Facebook, Twitter and LinkedIn.

• Font – Selects the font style used across the portal.

• Header band – The background colour of the top header bar.

• Header icons – Change the navigation and header menu icons. 

• Portal colour – The main theme colour applied across the portal.

• Secondary color – A secondary accent colour for highlights and styling.

• Secondary font color – The font/text colour used on areas with secondary colour backgrounds.

• Course editor band – The background colour of the toolbar in the course editor.

• Course editor band icons – The icon colour inside the course editor toolbar.

• AI Background Color – The background colour for AI-related features and areas.

• Left menu – The background colour of the main left-hand navigation menu.

• Drop menu icon – The icon colour for dropdown menus.

• Page header text – Edit the text used in page headers. 

• Body Background – The overall background colour of the page body.

• Menu active colour – The highlight colour when a menu item is selected/active.

• Menu feature block – The background colour for special feature blocks in menus.

• Menu feature font – The font colour used inside menu feature blocks.

• Scorm menu background – The background colour of the SCORM menu panel.

• Scorm menu item color – The text colour of SCORM menu items.

• Scorm menu item active color – The colour of SCORM menu items when selected/active.

• Top menu html – Space to add custom HTML in the top menu area.

Using the Top Menu HTML

The Top Menu HTML area lets you add a custom, central header menu for desktop viewers using HTML. This allows you to design navigation links that appear at the top of your site and align with your brand’s look and feel.

• Open the Top Menu HTML editor
  Navigate to Settings → Appearance → Top Menu HTML.

• Switch to HTML mode
  Click the </> button in the toolbar to open the HTML code view.

• Add your custom HTML
  Use the sample structure below to create your menu:

<div class="top-menu">
  <ul style="list-style:none; display:flex; justify-content:center; gap:30px; margin:0; padding:0;">
    <li><a href="/home" style="text-decoration:none; color:#333; font-weight:bold;">Home</a></li>
    <li><a href="/courses" style="text-decoration:none; color:#333; font-weight:bold;">Courses</a></li>
    <li><a href="/about" style="text-decoration:none; color:#333; font-weight:bold;">About Us</a></li>
    <li><a href="/contact" style="text-decoration:none; color:#333; font-weight:bold;">Contact</a></li>
  </ul>
</div>

• Preview your menu
  Save your changes and refresh your page to see the header menu in place. 

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

• Set the Course Fonts
• Manage the Portal Colours
• Set SCORM menu background and colours
  

Check out our Coursebox Demonstration Video Library for Tutorials.