In this section we will discuss how to change the default colors of the Learning Mode templates so they are better fit with your site’s brand.
Depending on the type of theme you’re using in your WordPress installation, there are two ways to change the colors for the Learning Mode templates.
Important note: while this tutorial aims to help you create a template, we can’t assist with the customization of our products, nor can we help troubleshoot, modify or debug custom code, or officially endorse third-party customization solutions, as per our support policy. We provide some customization guidelines. However, these are for reference/guidance only, and we cannot guarantee that they will always work as expected.
Block Themes
If you’re using a Block Theme for your website then you can change the colors in the Site Editor by editing the Learning Mode templates. The quickest way to open the Site Editor for Learning Mode template would be to navigate to Sensei LMS > Settings > Appearance.
In there, the active Learning Mode template will have a Customize button when you mouse over it.
Once you click on it, it will open the Site Editor for the currently active Learning Mode template.
Note: if your template looks wonky, you will need to restore it to its default state by clicking the W logo on your top left corner > Editor > Templates. Locate Lesson (Learning Mode) and click the three dot menu on the right. Finally, click Clear Customizations button.
To update the colors in the Site Editor you need to open the Styles tab and then click Colors.
Once you open the Colors settings you can change three colors that are related to Learning Mode templates:
- Background – Allows you to change the overall background color of the Learning Mode.
- Text – This will let you update the color of the text in Learning Mode.
- Links – This is the color for links and buttons in Learning Mode. It’s also the color of the progress bar in the header.
Here is how changing the colors would look like:
Keep in mind that these are your theme colors – the colors will change for all your theme.
Don’t forget to press Save after you’re done customizing your colors!
Legacy Themes
If you’re not yet using a Block Theme, then you can still modify the colors of Learning Mode templates via good old Customizer.
Navigate to Sensei > Settings > Appearance, and you should see the Customize Colors link under the Learning Mode setting.
Once you click on the Customize Colors link, it will open a customizer with one of your lessons. You should see three Sensei color setters on the left sidebar:
- Primary Color – This is the color of your links and buttons. As well as the color of the progress bar at the top.
- Background Color – As the name suggests, it is a color of your lesson content background.
- Text Color – This is the color of your basic text.
Here is how changing the colors will look like:
Once you’re done customizing your colors, make sure to press Publish.