Written by on

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;
}
Be sure to check out the Builder CSS Guide from the iThemes Codex for more information on CSS customizations and Builder. Just getting started with CSS?  Check out WebDesign.com for beginner and advanced CSS training.

Comments

  1. I would say “7 Builder CSS Classes You Should Know By Heart AND abbreviate”.

    http://cl.ly/image/243c1r07153y

    I type “.bmc” followed by a tilda and TextExpander expands it to “.builder-module-content ”

    I type “.bme” followed by a tilda and TextExpander expands it to “.builder-module-element ”

    and so on..

    For Windows users, I recommend Breevy. If you want a free solution, get PhraseExpress.

Respond

×

Ends Today! Save 35% off BackupBuddy with coupon code BACKUPWP35