# Course Layout

## Available layouts

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><em>Layout #1</em></td><td><a href="course-layout/standard-view"><strong>Standard View</strong></a></td></tr><tr><td><em>Layout #2</em></td><td><a href="course-layout/tab-layout"><strong>Tab Layout</strong></a></td></tr></tbody></table>

## Available options

### Hide Course Index Navigation

<figure><img src="https://1517109349-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEb2xvTC9MyvJ5piB0eJ%2Fuploads%2FERSZFo5kqknPQEvPi29R%2Fhide-course-index.png?alt=media&#x26;token=e795c6e0-430a-4f81-899c-58ca2169d359" alt=""><figcaption></figcaption></figure>

### Display teachers section

Display the teachers' section **on the main course page.**

<figure><img src="https://1517109349-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEb2xvTC9MyvJ5piB0eJ%2Fuploads%2FOsvcuBK2FJQ5gRfaKX4L%2Fmonocolor-teacher-avatar.png?alt=media&#x26;token=1dd90671-0c01-4592-9c01-fe01fe271a00" alt=""><figcaption></figcaption></figure>

### Display course summary (Course Index Page)

1. Custom width of the Course Description Wrapper (First Tab)\
   -> _If empty then the container will be full width._
2. Custom width of the Course Description Wrapper (Course subpages)\
   -> _If empty then the container will be full width._

<figure><img src="https://1517109349-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEb2xvTC9MyvJ5piB0eJ%2Fuploads%2FPcpcM5lSXGRR2z5ZnAy7%2Fmonocolor-desc.png?alt=media&#x26;token=8646527c-53c3-4f86-8729-967e8307a91c" alt=""><figcaption></figcaption></figure>

### Display course details (Course Index Page)

<figure><img src="https://1517109349-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEb2xvTC9MyvJ5piB0eJ%2Fuploads%2F5QSUxoTC040EV50fQZn1%2Fmonocolor-details.png?alt=media&#x26;token=f0ff9898-215c-4f80-a683-2abbc500fa82" alt=""><figcaption></figcaption></figure>

### Display course image (Course Index Page)

<figure><img src="https://1517109349-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEb2xvTC9MyvJ5piB0eJ%2Fuploads%2FQtmT2OEcuNdtm3Eac75D%2Fmonocolor-course-img-moodle.png?alt=media&#x26;token=9a18402b-c8d7-41a6-be0d-cfaf0c098d4c" alt=""><figcaption></figcaption></figure>

### Display Course Progress Bar

Course progress bar displays on the course index sidebar

<figure><img src="https://1517109349-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEb2xvTC9MyvJ5piB0eJ%2Fuploads%2FuTxfinb2Lqamd7LPCL98%2Fprogressbar-monocolor-moodle-theme.png?alt=media&#x26;token=4c67e77e-2ccf-41f5-8bc5-1701016b1397" alt=""><figcaption></figcaption></figure>

### Activity Icons

Customize activity icon colors.\
Add a custom CSS (Advanced - Raw SCSS) to change the icon color from black to white.

{% code overflow="wrap" lineNumbers="true" %}
```css
.activityiconcontainer .activityicon,
.activityiconcontainer .icon {
    filter: invert(1);
}
```
{% endcode %}

<figure><img src="https://1517109349-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEb2xvTC9MyvJ5piB0eJ%2Fuploads%2FZMMD9XvxZvww9VDv8cqB%2Factivity-icons-colors-customization-moodle.png?alt=media&#x26;token=fc64d1d7-1035-48ae-9352-3cbddbbde3e2" alt=""><figcaption></figcaption></figure>
