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.
Opens WPIDE on
Code
: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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.