CSS Structure
Inside the assets/css directory are the various CSS files utilized by LifterLMS to add structure, layout, and styles to LifterLMS.
lifterlms.cssis responsible for most of the CSScertificates.cssis responsible for the CSS of Certificate permalinks
The minified (.min) versions of these files are the files actually loaded by LifterLMS. The unminified versions are included only to allow for human-readability.
If you intend to add custom CSS to your site, do not customize the content of these files directly, instead, add custom CSS via the Customizer.
The fastest way to override a default style in LifterLMS is to locate the CSS selector used by LifterLMS and then add custom rules to that same selector via the Customizer.
For this example, we’ll change the default color of a LifterLMS Button using CSS and Chrome Dev Tools but this can be used to locate a CSS selector for anything on your website!
1. Open Chrome to the page where you want to customize something
2. Right click the element (the button) and select “Inspect” from the context menu
3. Dev tools will now open, revealing an overwhelming amount of information. Let’s walk through the important parts.
In the above image, the larger blue square highlights an interactive DOM (Document Object Model). The DOM is a representation of the rendered HTML of your website.
You can highlight any HTML element on your website in this area.
The inner square shows the button we’ve selected.
The right hand side of the dev tools window displays an interactive version of your site’s CSS.
After selecting an element, you can use the right-hand side to locate a selector for the element you’ve selected.
In this example, the selector .llms-access-plan .llms-access-plan-footer .llms-button-action can used to target the button we’re looking at.
If we wanted to change the background color of this button you could add the following CSS via the Customizer:
.llms-access-plan .llms-access-plan-footer .llms-button-action {
background-color: red;
background: red;
}