Where to put custom CSS code

Many of these Knowledge Base articles have CSS code that you can copy and paste, or perhaps you want to create your own CSS. Where should you put it? 

Restrict custom CSS to a single Page Builder page

This procedure applies if you only want your CSS to apply to the content layout on a single Page Builder page. For example, suppose you have a contact form and know that you only want your custom CSS to apply to that form on that single page.

To add CSS code that is restricted to a single Page Builder page or post:

  1. In the upper right corner, click Tools > Layout CSS / Javascript.
  2. On the CSS tab, enter your CSS code.
  3. Click Save.

Tip: See the Related Links for how to add custom ID or class selectors to your Page Builder rows, columns, or modules.

Add custom CSS to apply site-wide

There are several ways to add custom CSS that applies site-wide, but there are slight variations in the behavior with each method.

1. Site-wide rules, set for Page Builder content layouts

You can add site-wide rules right in your Page Builder editing screen. The rules will apply to the content area of every page, whether or not the page or post is built with Page Builder.

Tip: See this article for a diagram of where the content areas are on a page. Don't use this location for rules that apply to areas controlled by your theme, such as header, footer, and sidebar.

This method is very handy when you're adding custom ID or class selector names to individual rows, columns, or modules on a page, because you don't have to leave the page to add the rule and they still apply site-wide, and you can see the site-wide rules from any Page Builder editing page.

On the other hand, you might prefer to keep all your rules in a single place so you can find them easily later. In that case, you one of the other methods below.

To add site-wide CSS code while editing a Page Builder page:

  1. In the upper right corner, click Tools > Global Settings.
  2. On the CSS tab, enter your CSS code.
  3. Click Save and preview the result.
    This code will now appear in Tools > Global settings on any Page Builder page, but the CSS rules will apply to all content areas of your site, whether or not they were built with Page Builder.

2. Site-wide rules set on Customize > Additional CSS tab

This method applies the CSS code everywhere on your site: Page Builder and non-Page Builder content areas and any theme.

The Customize > Additional CSS tab in Customizer was added in WordPress 4.7, and Beaver Builder Theme Version 1.6 eliminated its Customize > Code > CSS Code tab and migrated all CSS rules from there to the Additional CSS tab. See the article on the Additional CSS tab for more details about the migration and how that tab functions. 

Notes:

  • Although the Customize > Additional CSS tab exists in every WordPress installation, the code placed there is theme-specific. It disappears when you switch themes and comes back if you return to the old theme. If you want to migrate code to a new theme, copy and paste it manually.
  • The CSS you enter at Customize > Additional CSS is stored in the database. If a custom CSS rule contains a url attribute, the relative path to a file in your WordPress installation may need to change. In most cases, if you are pointing to any directory within the wp-content directory, the relative path should start with wp-content.

3. style.css (any theme)

Like Method 2, this method applies the CSS code everywhere on your site: Page Builder and non-Page Builder content areas and any theme.

You can add site-wide CSS rules to a style.css file in your child theme's CSS. You can edit style.css by going to the WordPress admin panel and clicking Appearance > Editor

The advantage of this method is that you'll have a larger editing screen than for Method 2.

Tips:

  • Edit style.css only in a child theme, or you'll lose your work when the theme gets updated.
  • Some security plugins set read-only permissions on style.css so you can't edit it at Appearance > Editor. In that case, you'll have to download the file and edit it in a text editor. 
  • If you switch themes and want to keep the CSS rules in style.css, copy the style.css file from your old child theme and upload it to your new child theme directory. Note that not all of the CSS rules that applied to the old theme will apply to the new one.

CSS Troubleshooting Tips

  • Invalid CSS is ignored when the page loads, so if you add a rule that seems to have no effect, check for validation errors. It can be as simple as a missing semicolon.
  • Alternatively, for a rule that has no effect, try adding !important before the semicolon of the declaration. For example:
h1, h2, h3, h4 {
  font-size: 120% !important;
}
  • Another possibility is that the rule applies to the wrong <div> level. Use your browser's Inspect code feature to identify where the default rule applies and try adding those selectors to your rule.