1. Where to put Custom CSS
in Beaver Builder

Exploring the options

Video demo with examples below. To try these yourself login on the HomePage to get your copy of this site and return here.

The Beaver Builder plugin automatically generates, caches and compresses a CSS file for each page created. The CSS included depends on what modules you use, your style settings and the global and page custom CSS you add under "Tools".

BB THEME CSS

1. style.css (child theme)

The traditional WordPress way and often the best. Here you add CSS to the style.css file in your child theme folder

Or go to Appearance > Editor > style.css

Pros - Tidy and can be used to style both Theme and Beaver Builder Plugin areas without long rules (see note)

Cons - No live view of changes unless using a CSS editor.

Note: With the Beaver Builder Theme this sheet is added to the document last so it's easier to overwrite styles in the other options. This is not always the case with other themes.

2. WordPress Customizer

The Customizer is now the recommended place for theme options and the Beaver Builder theme (and many others) have placed a space for Custom CSS.

Customize > Code > CSS

Pros - Convenient so often suggested by support. You can see the effect live and it has a nice mobile responsiveness switched to see those views.

Cons - Not much space. If you use styles.css you're likely to forget the code is there too. "internal" CSS is messy on the source code and can lose it with theme changes.

Note: With the Beaver Theme this is outputted second (internal styling) so can overwrite the plugin custom styles. Other themes maybe different.

BB CUSTOMIZER THEME SETTINGS.

Other theme settings made in the customizer are saved and compressed in a cached stylesheet with a unique ID like this:

skin-57dbcf9388ca8.css

BB PLUGIN CSS

3. BB Global CSS

Here you add CSS for the Beaver Builder plugin content area only (but technically you can style theme areas too)

Page Builder > Tools> Global Settings > CSS

Pros - Good for exporting all page builder styles for use with a new theme.

Cons - Comes early in the "cascade"needing to win with "specificity". This means longer CSS if styling theme areas.

Note: This CSS gets added to the bottom layout sheet just before any page Layout CSS (if added). The ID changes page by page. This example shows the 244 (this page), but homepage is 9.

4. BB Layout (Page) CSS

Allows us to export CSS with Page Templates. (intended for content area, but you can style theme areas too)

Page Builder > Tools > Layout CSS/Javascript> CSS

Pros - Great for saving reusable designs for other projects. Good for sharing with others.

Cons - Need to remember that you added here. CSS needs to be more specific.

Note: This CSS is added to the bottom layout sheet where the ID will change page by page. This example shows the 2967, but homepage is 9.

Note: This CSS gets added to the bottom layout sheet (added after any global CSS added). The ID will change page by page. This example shows the 2967 (another page) but the homepage is 9.

(If this link shows "not found" it's because the page it belongs to has not been loaded - https://only.beaverjunction.com/home-wireframe-1/)

5. The Text Editor

It's best not to overuse the text editor to style things like font sizes and Colour.

This is "inline styling" and is harder to overwrite globally with external CSS.

You can use something like <span class ="my-selector-name"> my content</span> in the Text/HTML tab

(just be careful not to forget it's there when in the visual tab).

This text is in a span tag and is being styled by Page Layout CSS.

CSS CASCADE ORDER (simplified)

1. BUILDER LAYOUT CSS - (global and page plugin css)
2. BOOTSTRAP FRAMEWORK - (CSS framework the BB theme is based on)
3. BB THEME SKIN CSS - (the BB theme on settings. The selected options from the customizer)
4. CUSTOM CSS - (internal custom CSS printed in the source code from the Code > CSS in the customiser
5. CHILD THEME STYLESHEET - (style.css)

6. Any CSS added via BB Templates Shortcodes

PAGE FONTS

The Raleway font used on this page overwrites the theme settings.

This was done by adding @import in an HTML module at the top of the page.

HTML 5 allows this and will style everything below.

!important Problem

The button right top is styled in Tools > Layout CSS/Javascript > CSS.

It's overwriting the colour "accent" styles set in the Beaver Builder themes customiser setting. This is being done with !important. But it is better to add .fl-module-content to make rule more specific.

The button right bottom has a custom class added in the advanced tab of the button module, but the !important in the first button is preventing it from showing.

DUMMY BUTTON