# Course Colors

<figure><img src="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FtVEbtKNozEPtIBUsVmjk%2Ftheme-universe.jpg?alt=media&#x26;token=dd873682-a59c-49db-bca1-1e2353a684e3" 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="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2F4aUC2xo8SVuQyDRK6lrv%2Fcustom-fields.png?alt=media&#x26;token=ea3ba44a-03ab-438e-980b-065d2e671a10" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FpCJ3PMsSiChq8tRcucyz%2Fcourse-settings.png?alt=media&#x26;token=3670d889-0048-45d4-8243-cf924987f96b" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Step 2" %}

<figure><img src="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FZjRV1xkXzHzgH8JZAcWz%2Fsettings.png?alt=media&#x26;token=61d58711-3787-4b7b-ad99-7c5c3bbd4527" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

<figure><img src="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FBnJgzEQHd8kkV8A19q6R%2Funiverse-moodle-theme-colors.jpg?alt=media&#x26;token=b884e4e6-e7c2-4b31-977f-436f09f6f059" 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="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2F8PREICU36v4jSQ4hCIAu%2Ffooter.png?alt=media&#x26;token=4add0386-3bd2-4c4a-bb15-7e808cda7814" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Favicon" %}

<figure><img src="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FOFGJFli590aEvw1rDIU0%2Ffavicons.png?alt=media&#x26;token=946142bb-1a93-4a18-b65d-44a276260c98" 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>" %}