Theming & Customization
Customize colors for buttons, backgrounds, text, headers, and course status indicators to match your brand.
Administrators and Editors have access to Theming by default.
Overview
From your WordPress dashboard, go to MentorKit LMS → Theming.
Each color field has a color picker and a hex input — use whichever you prefer. Changes take effect immediately after saving.
Color Settings
The main section configures your brand palette. These colors apply across all MentorKit LMS pages.
| Setting | Default | Controls |
|---|---|---|
| Primary Color | #0073aa | Buttons and interactive elements |
| Secondary Color | #005177 | Hover states and complementary elements |
| Accent Color | #00a0d2 | Highlights and notifications |
| Background Color | #ffffff | Main content area background |
| Surface Color | #ffffff | Cards, panels, and form controls |
| Border Color | #e2e8f0 | Borders and dividers |
| Muted Text Color | #64748b | Breadcrumbs, metadata, low-emphasis labels |
| Text Color | #333333 | Main body text |
| Heading Color | #1e293b | Titles and section headers |
| Button Text Color | #ffffff | Text on buttons |
Header Colors
The SCORM header appears when learners view course content. These settings control its appearance.
| Setting | Default | Controls |
|---|---|---|
| Header Background Color | #23282d | Header navigation background |
| Header Text Color | #ffffff | Header navigation text |
Login / Register Colors
Optionally customize the login and registration pages. Leave blank to inherit from your global settings.
| Setting | Controls |
|---|---|
| Auth Background | Background behind the login/register card |
| Auth Outside Text | Title, subtitle, and footer text outside the card |
Course State Colors
These colors indicate learner progress on progress bars, status badges, and course cards throughout the platform.
| Setting | Default | Used for |
|---|---|---|
| Not Started | #6c757d (gray) | Courses not yet begun |
| In Progress | #ffc107 (yellow) | Courses currently underway |
| Completed | #28a745 (green) | Successfully completed courses |
| Failed | #dc3545 (red) | Courses requiring a retake |
| Certification | #17a2b8 (teal) | Certificate badges and related elements |
Color Preview & Accessibility
The page includes a live preview showing how your colors look on course cards, progress bars, headers, and buttons.
It also displays contrast warnings for color combinations that may be hard to read — flagging pairs that don't meet WCAG accessibility thresholds. Pay attention to these before saving.
If you see a contrast warning for text-on-background, try darkening the text color or lightening the background until the warning clears.
Disable Default Styles
If your theme handles MentorKit styling, you can turn off the plugin's CSS.
In the Styles & Assets section, check Do not enqueue plugin CSS on SCORM pages. The SCORM player view keeps its critical CSS regardless, so course content always renders correctly.
Astra Theme Integration
If you use the Astra theme, an additional Theme Integration section appears.
Enable Use Astra theme colors where applicable to inherit your Astra palette for primary, secondary, accent, background, text, heading, and button text colors. The corresponding pickers become disabled.
Course state colors remain independently customizable even with Astra integration active.
Saving Changes
Click Save Changes at the bottom. Colors take effect immediately on all MentorKit LMS pages.
What's Next
- Email Notifications - Configure automated email templates and send communications