CSS Structure

Structure

# Top

Inside the assets/css directory are the various CSS files utilized by LifterLMS to add structure, layout, and styles to LifterLMS.

  • lifterlms.css is responsible for most of the CSS
  • certificates.css is 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.

Locating CSS Selectors

# Top

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
Open chrome element inspector

3. Dev tools will now open, revealing an overwhelming amount of information. Let’s walk through the important parts.

dev tools DOM

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.

locating a selector

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;
}

Last Updated on
Was this article helpful?