🎨Course Colors

In order to access customized color options for courses, you must include the following custom fields:

1. Custom Fields

Site administration -> Courses -> Course custom fields

1. Custom Course Logo - customcourselogo - Picture

2. Custom Course Logo (Dark Mode) - customcoursedmlogo - Picture

3. Custom Course Favicon - customcoursefavicon - Picture

4. Custom Site Title - customcoursename - Short text

5. Top Bar Color - topbarcolor - Short text

6. Top Bar Color #2 - topbarcolor2 - Short text

7. Top Bar Button Text Color - topbartextcolor - Short text

8. Top Bar Button Hover Text Color - topbartexthovercolor - Short text

9. Top Bar Button Hover Bacground Color - topbarbghovercolor - Short text

10. Top Bar Color (Dark Mode) - dmtopbarcolor - Short text

11. Top Bar Color #2 (Dark Mode) - dmtopbarcolor2 - Short text

12. Top Bar Button Text Color (Dark Mode) - dmtopbartextcolor - Short text

13. Top Bar Button Hover Text Color (Dark Mode) - dmtopbartexthovercolor - Short text

14. Top Bar Button Hover Background Color (Dark Mode) - dmtopbarbghovercolor - Short text

15. Main Color #1 - maincolor1 - Short text

16. Footer Background Color - footerbgcolor - Short text

17. Footer Text Color - footertextcolor - Short text

To add your own customized color, simply go to the course settings.

Step 1

Step 2

Main Content

1. Custom Course Logo & Custom Course Logo (Dark Mode)

2. Custom Site Title

3. Top Bar Color & Top Bar Color (Dark Mode)

4. Main Color #1

5. Gradient: Main Color #1 & Main Color #2

Footer

Favicon

2. Please install the custom plugin (for custom Logo and favicon)

Important plugin for custom course logo

To add a custom logo on the course page, kindly install the plugin provided below. https://moodle.org/plugins/customfield_picture

Moodle plugins directory: Picture custom field

3. Add all fields from the list below:

List of all custom fields

1. Custom Course Logo

Add a new custom field -> Picture Short name: customcourselogo Description: Depends on you Visible to: Everyone

2. Custom Course Logo (Dark Mode)

Add a new custom field -> Picture Short name: customcoursedmlogo Description: Depends on you Visible to: Everyone

3. Custom Course Favicon (recommended size: 64x64)

Add a new custom field -> Picture Short name: customcoursefavicon Description: Depends on you Visible to: Everyone

4. Top Bar Color

Add a new custom field -> Short text Short name: topbarcolor Description: Top bar color Visible to: Nobody

5. Top Bar Color (Dark Mode)

Add a new custom field -> Short text Short name: dmtopbarcolor Description: Top bar color on the dark mode Visible to: Nobody

6. Main Color #1 (Primary button, Gradient Color #1)

Add a new custom field -> Short text Short name: maincolor1 Description: Visible to: Nobody

7. Main Color #2 (Gradient Color #2)

Add a new custom field -> Short text Short name: maincolor1 Description: Visible to: Nobody

8. Footer Color

Add a new custom field -> Short text Short name: footercolor Description: Visible to: Nobody

Tutorials: