Overview

AI Course Creator offers a wide variety of themes, you can utilise these pre-loaded themes to enhance your course's appearance or modify them to best suit your preference. In this tutorial, we will discuss how to edit a theme.

Step Tutorial

1.  Click the 'View Course Themes' button to see all the available themes.

2. You should be able to see all the available themes; a total of 18 themes are available.

NOTE: You can use the category filter to easily sort themes related to the selected category. Select the desired category from the dropdown menu and click the 'Search' button.

NOTE: If you are familiar with all the available themes and prefer not to scroll through the page, you can also use the search box to find the theme you are looking for. Simply type the theme name (e.g. Spring, Fun, and eSkilled) and click the 'Search' button.

3. To begin editing a theme, simply click the 'pencil' icon below the theme name. For this tutorial, we will be using the eSkilled theme.

4. You will be redirected to the theme editor page. In this tutorial, we'll split it into different parts.

Theme Information

Theme information is what is visible on the themes page list or theme selector. Fill in the necessary information before proceeding to the next part.

1. Name — Replace the name of the theme that you are currently editing. This can be any word that you prefer (e.g. Sunshine, Monday, and Adventure).

2. Category — Identify to which category this theme falls under (e.g. Finance and Hospitality).

3. Theme Style — Select the style for your theme. Choose from the 6 options (eSkilled, Spring, Summer, Autumn, Winter, and Playful). 

4. Theme Image — Update the theme's image by clicking the 'Upload Image' button. 

NOTE: 

1. You may refer to the tutorial on How to Use the Tool Blocks > B. Image > Image Addition to learn more about uploading an image.
   
2. You have the option to use the same image for the cover page and theme image. Enable the 'Use Cover Page As Theme Image' toggle to do this.
   

A. Cover Image

Update the cover image for your theme by clicking the 'Replace Image' button. 

NOTE: You may refer to the tutorial on How to Use the Tool Blocks > B. Image > Image Addition to learn more about uploading an image.

B. Title Font Style

This title font style reflects the title of your course. You may change the font family, size, and colour. 

C. Background

The background is visible on the thumbnail of your course. To change this, click the 'Replace Image' button. 

D. Start Course Button

Change the colour of the start button by adjusting the text colour, start colour, and end colour. 

NOTE: Colour Hex Code is a way of representing colours in a format that computers can understand and display (e.g. #ff6c44, #9949ef)

A. Navigation

All the navigation-related changes belong here. Fill in your desired hex colour for each field. 

B. Course Heading Settings

This is the background image and font colour for the course title. Replace the background by clicking the 'Replace Image' button, then add the Font Title Font Colour.

NOTE: You may refer to the tutorial on How to Use the Tool Blocks > B. Image > Image Addition to learn more about uploading an image.

C. Progress

All the progress-related settings can be configured in this section. These include Progress Status Font Styles, Progress Bar, and Indicator Colour. Replace them with your preferred colours.

D. Banner 

This section contains the topic heading. Both the background image and font colour can be configured here. To replace the banner, click the 'Replace Image' button, then add the title font family, size, and colour.

NOTE: You may refer to the tutorial on How to Use the Tool Blocks > B. Image > Image Addition to learn more about uploading an image.

1. Completion Image — This field enables users to upload an image that will be displayed on the completion result screen. Default completion images for each theme are already uploaded.
2. Completion Title — This field serves as a headline for the completion message (e.g. 'Congratulations' or 'Thank You'). This field accepts HTML input.
3. Completion Message — This field enables users to set a default completion message, which can be customised on the course builder page. This field accepts HTML input.
4. Transparent Colour — The users will have the ability to set a colour for the transparent section of the completion page where the completion message is displayed. Opacity will be pre-defined, allowing users to customise only the colour.
5. Preview — This part shows a live preview of the settings.
   
   

1. After completing the theme setup, a new section titled 'Completion Page' will be added in the course builder, located after the outline.
   
   

1. You can readjust the completion page setup by clicking the 'cog' icon in the upper right corner of the completion page within the course builder.
   

2. You have the option to reset the completion image to its default settings.
   
   

NOTE:

1. The completion banner will automatically match the topic banner uploaded in the selected theme. You will not be able to customise or modify the completion banner separately.
   
2. When you update a course's theme, the completion page will be updated accordingly to reflect the new theme.
   

1. A 'Finish' button will be implemented on the last screen of the course preview. Upon clicking this button, the user will be redirected to the completion page.
   
   

NOTE: 

1. If the course navigation type is 'Free', the 'Finish' button will be displayed on the last screen of the course preview regardless of the completion percentage and quiz navigation type.
2. If the course navigation type is 'Linear':
1. The 'Finish' button should only be displayed if the user has scrolled through the end of the last subtopic.
2. If the last subtopic includes a quiz, the 'Finish' button will be displayed only if the user has completed the quiz.
3. If a course does not have a completion image or completion message configured in the 'Completion Page' section of course builder, the completion page will not appear in course preview.
   

A. Background 

1. Background Options — Select 'Background Image' or 'Colour Only' option for the banner.
2. Banner — Upload a banner image.
3. Banner Size — Choose if the banner must be stretched fully across the page or be confined to a fixed width, centered within the content area.
4. Banner Corners — Choose between round corners or square corners for content banners.
5. Banner Icon When Added Manually (Optional) — Add an icon at the beginning of the content header.

B. Banner Font Styling

This allows customisation of text with options for font style (bold, italic and underline), size, colour, emphasis, and text alignment (left, center and right).

C. Default Banner Texts & Icons

These will be used when adding the related content type.

 

1. Enable Default Content Banners — When toggled on, the system will display all default content banner elements. When toggled off, all default elements will be hidden, and banners will not be automatically created when adding content types during course creation (e.g. case studies and quizzes).

2. Banner Text — Add text on top of the banner.

NOTE: 

1. You can also reset the banner image and banner icon to their default settings after making changes or uploading new ones by clicking the 'reset' icon.
2. You may refer to the Tutorial on How to Use the Tool Blocks > Image Types and Formats > Content Banners to learn how to customise the content banners for specific content types.
   

Interactive Activity

This section includes the ability to customise styles for interactive activities.

Flip Card

A flip card interactive activity involves cards that can be flipped to reveal additional information. 'Flip Card Settings' contain the following features:

1. Front of Card Settings — Default images can be set for flip cards, varying based on the 'Single Column', 'Two Columns', and 'Three Columns' layouts. These images will be used for the 'Image' and 'Text on Image' side of the flip card. You can customise these images for a specific theme or reset them to the default images if needed.
   

NOTE: You can set default font settings for the 'Text on Image' option, and you can still customise them at the course level.

2. Back of Card Settings — You can set a default background colour and font settings for the text side of the flip card, but you can still customise them at the course level.
3. Preview — You can see a live preview of the settings for the 'Single Column', 'Two Columns', and 'Three Columns' layouts.

NOTE: When adding a flip card in the course builder, whether it is 'Single Column', 'Two Columns', or 'Three Columns', the default settings from the themes will automatically apply. However, you will still have the ability to customise the image and text according to your preferences. Learn more from the tutorial on How to Use the Tool Blocks > C. Interactive Activities > Flip Card.

Hotspot

A hotspot interactive activity allows learners to click on parts of an image to explore additional information. 'Hotspot Settings' contain the following features:

1. Hotspot Icon — Default icons can be set for hotspots.
2. Overlay Style for Hotspot Icon — You can set a default overlay for hotspots with the following options:
1. Letters
2. Numbers
3. No Overlay
3. Overlay Colour — You can set a default colour for the overlay style.
   
4. Preview — You can see a live preview of the settings.
   

NOTE: You can still customise the hotspot icon and overlay style and colour in the course builder.

1. Table Header Colour — Allows you to select the colour settings for the table header
   
   
   
   
   
2. Table Header Font — Allows you to customise the 'Font', 'Size', 'Colour', 'Text Alignment', and 'Emphasis' for the table header
   
   
   
   
   
3. Table Row Colour — Allows you to select the color settings for the table rows
   
   

NOTE: 'Use Alternate Colours' toggle allows you to set the colours for even and odd numbered rows when switched on.

4. Table Row Font — Allows you to customise the 'Font', 'Size', 'Colour', 'Text Alignment', and 'Emphasis' for the table rows
   
   
   
   
   
5. Table Border — Enables you to customise the 'Border Style', 'Border Width', and 'Border Colour'
   
   
   
   
   
6. Preview — Shows a live preview of the settings
   
   
   

NOTE: 

1. The table settings established in 'Themes' will be applied to any table content added in 'Course Builder' where that theme is used.
   
2. When you update the theme on your course, appropriate settings for table content will also be applied.
   

NOTE: Complete all fields up to the Preformatted part.

5. Once complete, click the 'Save' button to save all the changes you have made.

NOTE: Changes made to each theme are permanent and will be applied for all users. Ensure to finalise changes before saving.

And those are the steps on how you can successfully edit a theme.