# Course Colors

<figure><img src="/files/N6xBl3mrSvJAuxjx38yD" alt=""><figcaption></figcaption></figure>

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*

<figure><img src="/files/Rk7gRuTAvzpaTXkIaiyo" alt=""><figcaption></figcaption></figure>

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

{% tabs %}
{% tab title="Step 1" %}

<figure><img src="/files/SnQR9dKmfUxjigcwphkT" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Step 2" %}

<figure><img src="/files/QVU4gb7aeZZWsMN1Tp34" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Main Content" %}

<figure><img src="/files/Blmwq33oudKumZ8h87Gf" alt=""><figcaption></figcaption></figure>

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
{% endtab %}

{% tab title="Footer" %}

<figure><img src="/files/Spsge7LSu4S0pPRv0dvL" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Favicon" %}

<figure><img src="/files/vHj7DdlgwFqykQOv85Qv" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

{% hint style="info" %}

### 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>
{% endhint %}

{% embed url="<https://moodle.org/plugins/customfield_picture>" %}

### 3. Add all fields from the list below:

<details>

<summary>List of all custom fields</summary>

#### **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&#x20;*****(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

</details>

### Tutorials:

{% embed url="<https://www.youtube.com/watch?v=D5mhgTiWcWg>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rosea.gitbook.io/universe-moodle-theme/demo-content/course-colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.