# LearnDash: Brand Colour for Progress Bars and Buttons

> Recolours LearnDash's progress bars, "Mark Complete" buttons and completed-step checkmarks to your brand colour with a few lines of CSS.

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

## Code

```css
:root {
    --wpide-ld-brand: #6b4eff;
}

.learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
    background: var(--wpide-ld-brand);
}

.learndash-wrapper .ld-button,
.learndash-wrapper .learndash_mark_complete_button,
.learndash-wrapper #learndash_mark_complete_button {
    background-color: var(--wpide-ld-brand);
    border-color: var(--wpide-ld-brand);
}

.learndash-wrapper .ld-status-complete,
.learndash-wrapper .ld-status-icon.ld-status-complete {
    background: var(--wpide-ld-brand);
}

.learndash-wrapper .ld-button:focus-visible,
.learndash-wrapper .learndash_mark_complete_button:focus-visible {
    outline: 3px solid var(--wpide-ld-brand);
    outline-offset: 2px;
}
```

## Notes

Change --wpide-ld-brand to your colour. LearnDash's own colour settings in the Design panel take precedence when set.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "LearnDash: Brand Colour for Progress Bars and Buttons" 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/