Lab: Simple Branding
This LifterLMS Lab allows you to quickly configure the color scheme of LifterLMS with a few simple options.
This will allow you to customize the colors of the following elements:
- Buttons
- Access plan pricing tables
- Checkout screen
- Progress bars
- Completed icons
- Notification and Engagement emails
The lab provides you with only a few basic options, if you require more robust customization you should look towards adding custom css to your site via the customizer’s custom css area or by using the Sky Pilot theme which allows specific customization of almost every piece of LifterLMS.
Simple Branding is available as a Lab within the free LifterLMS Labs addon.
To install Simple Branding:
- Install LifterLMS Labs by following the instructions here.
- Navigate to the Labs setting screen at LifterLMS -> Labs
- Enable Simple Branding by clicking the Enable button
Primary Color
The primary color is the default blue color in LifterLMS.
This color is used for borders on featured items on pricing tables, the borders and header backgrounds on the checkout screen, email header backgrounds, and for most buttons generated by LifterLMS.
Action Color
The action color is the default orange color in LifterLMS.
This color is used for a few buttons which are meant to stand apart from other buttons in LifterLMS. It is also used for links on the pricing table.
Accent Color
The accent color is the default magenta color in LifterLMS.
This color is used for progress bars and icons on the syllabus and sidebar widgets.
In an effort to simplify the number of settings available, this Lab automatically chooses a color for the text of buttons and headers. The lab follows W3C relative luminance guidelines to determine whether white or black text should be used on top of the selected color.
This will affect buttons generated by the Primary and Action colors as well as headlines generated by the Primary color.
If you disagree with the automatically selected color you can override them with a bit of custom CSS.
This lab generates a fair amount of CSS which is cached in the database so that it does not have to be generated on every page load.
The CSS is generated when the colors are saved.
If you’ve made changes and you’re not seeing them reflected it’s possible that the cache was not properly cleared.
Try saving your settings again.
Additionally, if you have caching plugins installed try clearing your page and database caches.
