# Tutor LMS: Brand Colour for Progress Bars

> Recolours Tutor LMS progress bars and the course completion button to your brand colour.

- Type: CSS
- Runs: Site-wide header
- Category: [Courses & Community](https://wpide.com/library/category/learning/)
- Tags: tutor, css, branding
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/tutor-progress-bar-brand-color/

## Code

```css
:root {
    --wpide-tutor-brand: #0f9d58;
}

.tutor-progress-bar .tutor-progress-value,
.tutor-course-progress-wrapper .tutor-progress-value {
    background: var(--wpide-tutor-brand);
}

.tutor-course-complete-button,
.tutor-topbar-mark-btn {
    background-color: var(--wpide-tutor-brand);
    border-color: var(--wpide-tutor-brand);
}
```

## Notes

Change --wpide-tutor-brand. Tutor's colour settings under Tutor LMS > Settings > Design take precedence when set.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Tutor LMS: Brand Colour for Progress Bars" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/