7 Builder CSS Classes You Should Know By Heart

iThemes Builder makes it easy to build and style WordPress websites without any code. Plain and simple.

But, if you’re ready to start making some advanced customizations (beyond what’s possible with Builder’s Style Manager), Builder makes it easy to add CSS styling to your site’s design by including generic, overarching classes to apply site-wide changes as well as targeted IDs to apply styling to specific elements on each page.

Note: All CSS changes should be done in the style.css file of the child theme (or active theme). You can either edit existing styles or write them at the very end of the style.css file (which we recommend).

These seven generic Builder CSS classes will apply site-wide styling for each of the following Builder modules:

1. The Header Module

.builder-module-header {}

2. The Navigation Module

.builder-module-navigation {}

3. The HTML Module

.builder-module-html {}

4. The Content Module

.builder-module-content {}

5. The Widget Bar Module

.builder-module-widget-bar {}

6. The Image Module

.builder-module-image {}

7. The Footer Module

.builder-module-footer {}

See It In Action – Changing Module Background Colors

To see this in action, the following Builder Layout has been created with these modules:

1. Header
2. Navigation
3. HTML
4. Content
5. Widget Bar
6. Image
7. Footer

With Builder child Foundation Blank as the active child theme, the layout above usually looks like this …

The following CSS has been added to the end of the active child theme to add background colors for each module.

.builder-module-header {
	background: #e41990;
}

.builder-module-navigation {
	background: #e49019;
}

.builder-module-html {
	background: #e4d319;
}

.builder-module-content {
	background: #9ae419;
}

.builder-module-widget-bar {
	background: #19e49a;
}

.builder-module-image {
	background: #19d8e4;
}

.builder-module-footer {
	background: #1987e4;
}

And the result is fancy new background colors for each Builder module:

Combining Classes (A Small Example)

If you want widgets to have a background color of #aaaaaa, but only in content module widgets, use

.builder-module-content .widget {
	background: #aaaaaa;
}