Getting Started with Custom CSS

In some special cases, you may find yourself needing to edit or add to the Popup Maker Style Sheets for any number of reasons. This doc outlines best practices when getting started.

How Do I Add My CSS?

There are a few ways to add your code:

  1. Using your styles.css file.
  2. Using a plugin.
  3. Appending your code to the Popup Maker Style Sheets.

Method #1: Using Your styles.css File

You can add any additional styles for your site in the styles.css file located at Appearance > Editor in the WordPress Admin. Keep in mind, this file may be updated, and your changes removed, if you update your theme. For this reason, we recommend using a child theme so as to avoid this headache.

Method #2: Using a Plugin

A less quick, but easy solution, this plugin offers great capability and flexibility to add your custom CSS code:

Using Simple Custom CSS and JS with Popup Maker

To make sure the CSS or JS you use for Popup Maker works as intended, add your code to the plugin normally, but make sure your Options Pane is setup like this:

This is a great option because it keeps all your CSS code very organized, plus you don't have to worry about overwriting anything when you update your theme.

Method #3: Appending to Popup Maker Style Sheets

You can edit or add to the Popup Maker source code by navigating to Popup Maker > Settings > Assets Tab from the WordPress Admin. We recommend un-minifying the CSS code and pasting it into an external editor of your choosing to make it more easily editable.

Here, you will find all of the CSS for the Core Plugin (we recommend not messing around with these unless you know what you're doing) and for each of your Popup Themes.

Once you're satisfied with your results, click Save Changes.

Still need help? Contact Us Contact Us