How to add custom CSS to LifterLMS?

Adding Custom CSS

# Top

The best way to add custom CSS to your site depends on what theme you are using.

  • For a Classic or Hybrid theme, CSS can be added to your site using the Customizer.
  • For a Block theme like Sky Pilot, CSS can be added to your site using the Site Editor.

If you are not familiar with CSS or would like a primer on using CSS, please refer to this companion documentation on CSS structure in LifterLMS.

Using the WordPress Customizer

# Top

For a Classic or Hybrid theme, CSS can be added to your site by going into Appearance > Customize > Additional CSS.

You’ll know this is possible for you if you see the Customize link in the toolbar from the frontend of your WordPress site.

  1. Click Customize in the admin toolbar.
  2. In the Customizer window, select Additional CSS.
  3. Add your custom CSS to this editor.
  4. Click Publish to save your changes and update your site.
Screenshot of the WordPress Appearance > Customize > Add Custom CSS screens

Using the WordPress Site Editor

# Top

If you are using a Block Theme like Sky Pilot, CSS can be added to your site within the Site Editor.

  1. From the frontend of your site, click Edit Site in the admin toolbar.
  2. Click Styles in the Design menu.
  3. Click the three dots to the right of the Styles heading and select Additional CSS.
  4. Add your custom CSS to this editor.
  5. Click Save to publish these changes to your site.

Video: How to Add Custom CSS to a Block Theme Like Sky Pilot

Note that if you decide to switch themes, you should first copy the content in your Additional CSS so that you can add it into the new theme. This setting is not imported when you change your WordPress site’s theme.

Last Updated on
Was this article helpful?