Your Academy program’s theme controls the visual appearance and branding of your courses. You can customise the public-facing theme, internal theme, and email theme to create a cohesive brand experience.  Before we begin, note that you need to have a platform admin role or above to change the academy theme.

To Begin

Locate the Platform Settings (cog icon) in the menu bar on the left-hand side. Then, click Theme Settings in the menu bar on the left. Then, click New Theme in the top right corner. Enter a name for your theme, then select Create Theme.

If your brand doesn't use web-default fonts, upload your font files or select your Google fonts from the Fonts dropdown under Theme Settings in the menu bar on the left-hand side. It is important to select the fonts first, so they will appear in the styling options as you design the rest of the theme.

Then, in the Portal Themes tab under Theme Settings, upload your icon style. You may select from the following options:

• Dotted line
• Filled
• Fluid line
• Thin line
• Duo tone
• Thick line

A. Public Theme

After selecting your fonts and icon style, design the public, internal and email themes. The public theme controls how your academy program appears to learners and external users.

1. Logo and Branding

Upload your brand logo to appear in the top navigation bar. This logo will be visible in the side menu when it is opened, as well as the public menu. Ensure you include alt text for your logo for users who use screen readers. Insert a platform logo, which appears in the side menu when it is closed. Then upload a favicon, which is an icon that appears in the browser tab.
 

2. Navigation States

Style how your colours appear in different states: Active shows how the page you’re currently on will look in the menu, Hover shows how colours will look when hovering your mouse over menu items, and normal shows how a menu item looks when it is not the active page and is not being hovered over.

3. Banner

Customise the banner area that appears at the top of key pages. You can click the picture icon to upload your banner image. The optimal image size is 1400 x 300 px. Then, you can set the colours to suit your banner, ensuring they don’t clash with your banner image.
 

4. Page Menu Styles

The page menu shows the titles of all of the sections of your course. When you click on these settings, you can change the font colour, background colour and hover font colour.

5. Block Styles

Set up three different block styles that can be used throughout the program. Click on this section and change the block font family and the colours for each block style by clicking on the dropdown arrows. Then, select the button colours to see what they look like against the block colours.

6. Preview Block Styles
 

Preview each of the block styles to ensure they fit your theme and see what each of them looks like against the buttons, ensuring there are no colour clashes.

7. Typography
 

Configure heading styles from h1 through h4, the body text and link text. For each of these, use the dropdown menus to select the font family and font colour.

8. Notification Style

Notifications are styled textboxes used to alert users to important information throughout the platform, such as system messages, updates, or reminders. They apply, for instance, to platform notifications that alert users about something. Customise how notifications appear to users, including the:

• Font colour
• Title font colour
• Text link colour
• Text link hover colour
• Border/bullet colour
• Border style 
• Background colour
• Left panel colour

Note that the notification style selected is shared across both the public and internal themes.

9. Popup Header

Style the pop-up headers by selecting the font colour, background colour and font family. 
 

10. Accent Colours

Accent colours are used primarily in the catalogue for highlighting information. Set up two different accent colour schemes that can be used in the catalogue to tag promoted courses. For each accent style, select the font colour, background colour and font family.
 

11. Buttons

These buttons differ from the block-style buttons in Section 5, as these appear within styled content blocks and are designed to stand out for marketing purposes. Comparatively, these buttons are used more generally to progress through the program.

Style the colour of the button. Select the colours of the font, background and border for the button as is. Then, select the colours of the font, background and border when users hover over the button.

Note: The button style selected is shared across both the public and internal themes.

12. Course Tile

The course tile shows how programs are displayed in the catalogue. For this display, select the:

• Background colour
• Title font colour
• Block colour
• Flag style
• Border colour
• Body font colour
• Block font colour
• Button style

Note: The course tile layout for the catalogue display can be selected on the catalogue theme setup.

13. Testimonial Block

Testimonial blocks are used to feature quotes on the catalogue and home pages. Style the appearance of testimonial elements, including image placement, text layout, and attribution styling.

For the testimonial block, select the:

• Title font family
• Title font colour
• Testimonial background colour
• Body font family
• Body font colour

14. Copyright Footer

The copyright footer contains copyright information that appears at the bottom of every page. Select the background colour, font colour and text hover colour.

Note: The footer style selected is shared across both the public and internal themes.

B. Internal Theme

The internal theme controls the appearance of your academy for staff, administrators, and internal users. Switch to the Internal Theme tab to access these settings.

1. Logo

Upload a logo for the internal platform view. This should be the same as your public logo. Ensure the platform logo has alt text, then upload a small version of the logo and a favicon. 
 

2. Menu and Navigation

Set the header styles. Select the:

• Active navigation font colour
• Active navigation background colour
• Hover navigation font colour
• Hover navigation background colour
• Header font family
• Header font colour
• Border colour
• Background colour

3. Profile Styles

Style the profile icons for each user by selecting the font colour and background colour. 
 

4. Secondary Navigation Bar

Select the font colour and hover font colour for the secondary navigation bar that displays the back / next text links at the bottom of program pages and reports that go over multiple pages.

5. Side Navigation

The side navigation bar falls under the secondary navigation bar. Style the:

• Font colour
• Background colour
• Hover font colour
• Hover background colour

6. Banner

Configure the banner settings:

• Upload the banner image. The optimal size for a banner image is 1400 x 300 px.
• Pick the title font colour, ensuring it does not clash with the banner.
• Select the title font family. 
• Upload the thumbnail image. The optimal size for a thumbnail image is 800 x 600 px.

7. Title

Style the title of the Academy page by selecting the font colour and font family. 

8. Content body font

Style the body text of the Academy page by selecting the font colour and font family.
 

9. Text Links

Define how text links appear by selecting the font colour and hover font colour.

10. Interface Icon Colour

The interface icon colour applies to any dropdown arrows and setting toggles in your program. Select the colour scheme for interface icons by choosing the icon colour, border colour and text colour.
 

11. Notification Style

Customise the notification style, including the:

• Font colour
• Text link colour
• Border/bullet colour
• Background colour
• Title font colour
• Text link hover colour
• Border style 
• Left panel colour

Note: The notification style selected is shared across both the public and internal themes.
 

12. Activity Style

Configure how activity styles appear, including the:

• Title font colour
• Border/bullet colour
• Activity icon colour
• Body font colour
• Border style
• Left panel colour

13. Button

Style the button, including the:

• Font colour
• Background colour
• Border colour
• Hover font colour
• Hover background colour
• Hover border colour

Note: The button style selected is shared across both the public and internal themes.

14 - 16. Call Out Style 1

Set up three different call-out box styles that can be used throughout the internal platform to highlight important information. For each style, select the:

• Title font colour
• Text link colour
• Border/bullet colour
• Activity icon colour
• Background colour
• Body font colour
• Text link hover colour
• Border style
• Left panel colour

Differentiate the callout styles, and ensure the callout colours do not clash with the text and icon colours.

17. Video Player

Upload a default video thumbnail. The optimal size for this image is 800 x  600 px. This thumbnail will be used for all videos across the program that use the default thumbnail. Custom thumbnails will not be affected.

18. Copyright Footer

The copyright footer contains copyright information that appears at the bottom of every page. Select the background colour, font colour and text hover colour.

Note: The footer style selected is shared across both the public and internal themes.

19. Copyright Footer

The copyright footer contains copyright information that appears at the bottom of every page. Select the background colour, font colour and text hover colour.

C. Email Theme

The email theme controls the appearance of all emails sent from your academy program. To edit this, click Email Theme under Theme Settings in the menu bar on the left.

Note: The email theme operates independently from your portal themes. When you change the active portal theme in Domain Settings, the email theme remains unchanged and must be updated manually if desired.
 

1. Email Banner

Click on the default banner image and select Edit in Email Settings. Then, click the Settings tab in the menu bar along the top.

Delete the default banner image and upload your own. The optimal size for this banner is 800 x 170 px. Note that the height can vary, like 100 px for a thinner banner or 200 px for a longer banner.

2. Email Body Styles

Style the email body text by selecting the background colour, content background colour and font colour. The background colour is the outer background colour that surrounds all the content within your email, while the content background colour is the background colour for the specific area where your email message appears.
 

3. Button

Style the button that appears in emails by choosing the background colour and font colour.
 

4. Text Link

Select the font colour for any links that appear in emails.
 

5. Footer Styles

Style the footer that appears in each email by selecting the background colour and font colour. If you wish to add an image in the footer, click Footer Image, then Edit in Email Settings. Click the Settings tab in the menu bar along the top, and drag and drop an image in the Email Footer Image section.