Introduction

While Style Manager makes it easy to make changes to your Builder site visually, to go in-depth and make different modules of the same kind look differently and to do advanced customizations theme's style.css should be edited.

A knowledge of CSS and Firebug usage really helps. Firebug, a Firefox add-on is an awesome tool in figuring out element's classes, ID, padding, margin etc. Please install it in your Firefox before reading further.

We have a series of videos on advanced CSS in Builder. Please watch them by clicking here.

BuilderChild-Default has been taken as the active theme for the scope of this guide. However, most of the CSS applies to all Builder child themes.

All CSS changes should be done in style.css of the active theme which should be a child theme of Builder. You can either edit already existing styles or write them at the very end. Generally we advise users to write custom styles at the end of child theme's style.css. This forum post explains why.

Because of the vast number of classes that Builder makes available, there are several ways of targeting the same element and hence the following is not the only way of going about it. There is more than one way to skin a cat.

CSS to target various elements of a Builder site

The following information can also be obtained by viewing the source of the webpage or by using Firebug. The text on the left side is one of the classes (if preceded by a dot) or ID (if preceded by a hash) for body element.

To set the height of a specific module

Note: Replace builder-module-4d396c72bbb6e with the ID of module in question on your site.

Before and After

To remove padding around a specific widget

#text-3 {
padding: 0;
}

Note: Replace text-3 with the ID of widget in question on your site.

Header Module

Header module should be used when you would like to show site name and tagline. Site name and tagline will link to site URL. There is no provision to enter a image in this module.

Following sample CSS can be used to set a background image for this module and to adjust the font size and colors of site name and tagline text. BuilderChild-Default is the active theme in the test site.

Navigation Module

To target all nav bars

To target a specific nav bar

Note: Replace builder-module-4d396c72bbb6b with the ID of navigation module in question on your site.

To center the content of nav bar

The following code will allow you to absolutely center a menu (only the top level items will be centered), regardless of the number and width of the navigation items.

(If you wish to align the top level menu items to the right, replace margin: 0 auto; with float: right;.

If you are using a WordPress 3 custom menu

If you have created a menu using wp-dashboard > Appearance > Menu, and are using that menu in your navigation module:

If the name is MainMenu in the navigation module, add the following at the end of child theme's style.css:

.menu-mainmenu-container {
display: table;
margin: 0 auto;
}

Note: In the above code, mainmenu must be replaced with the slug of your custom menu. Ex.: If the name of your custom menu is Primary Navigation, then replace .menu-mainmenu-container with .menu-primary-navigation-container.

In most cases, this more generic (so independent of the menu name) code will accomplish the same:

For all other types of navigation module

In the above code, the left margin value has to be changed depending on width of menu.

The above code applies to all navigation modules in the layouts. If you would like to apply it to a specific navigation module, replace .builder-module-navigation with #builder-module-4e1585dc84fa3 where builder-module-4e1585dc84fa3 is the ID of navigation module div.

This method can also be used for a navigation module which displays a custom menu.

Note: Change builder-module-4ddb5b00e3efd to ID of module in question.

2-widget widget bar

The CSS below applies to a specific widget bar having a ID of builder-module-4d3956642cc05. The easiest way to obtain a module's ID is by inspecting the element with Firebug. If all widget bar modules are to be targeted, .builder-module-widget-bar should be used instead of #builder-module-4d3956642cc05.

To target any widget in the left widget area:

#builder-module-4d3956642cc05 .left .widget {
}

To target any widget in the right widget area:

#builder-module-4d3956642cc05 .right .widget {
}

3-widget widget bar

The CSS below applies to a specific widget bar having a ID of builder-module-4d3956642cc05. The easiest way to obtain a module's ID is by inspecting the element with Firebug. If all widget bar modules are to be targeted, .builder-module-widget-bar should be used instead of #builder-module-4d3956642cc05.

To target any widget in the left widget area:

#builder-module-4d3956642cc05 .left .widget {
}

To target any widget in the middle widget area:

#builder-module-4d3956642cc05 .middle .widget {
}

To target any widget in the right widget area:

#builder-module-4d3956642cc05 .right .widget {
}

4-widget widget bar

The CSS below applies to a specific widget bar having a ID of builder-module-4d3956642cc05. The easiest way to obtain a module's ID is by inspecting the element with Firebug. If all widget bar modules are to be targeted, .builder-module-widget-bar should be used instead of #builder-module-4d3956642cc05.

To target any widget in the left most widget area:

#builder-module-4d3956642cc05 .left .widget {
}

To target any widget in the second widget area:

#builder-module-4d3956642cc05 .widget-wrapper-2 .widget {
}

To target any widget in the third widget area:

#builder-module-4d3956642cc05 .widget-wrapper-3 .widget {
}

To target any widget in the right most widget area:

#builder-module-4d3956642cc05 .right .widget {
}

5-widget widget bar

The CSS below applies to a specific widget bar having a ID of builder-module-4d3956642cc05. The easiest way to obtain a module's ID is by inspecting the element with Firebug. If all widget bar modules are to be targeted, .builder-module-widget-bar should be used instead of #builder-module-4d3956642cc05.

To target any widget in the left most widget area:

#builder-module-4d3956642cc05 .left .widget {
}

To target any widget in the second widget area:

#builder-module-4d3956642cc05 .widget-wrapper-2 .widget {
}

To target any widget in the third widget area:

#builder-module-4d3956642cc05 .widget-wrapper-3 .widget {
}

To target any widget in the fourth widget area:

#builder-module-4d3956642cc05 .widget-wrapper-4 .widget {
}

To target any widget in the right most widget area:

#builder-module-4d3956642cc05 .right .widget {
}

Content Module

Introduction

.builder-module-content consists of .builder-module-element + 1 or more .builder-module-sidebar.

The actual area where the content gets displayed is .builder-module-element and the wrapper for this is .builder-module-element-outer-wrapper.

How to hide titles on all Pages

When you are using Builder 3.0 and a corresponding LoopBuddy compatible theme like the current (as of Monday, July 11, 2011) Builder child themes, adding the following at end of child theme's style.css will hide Page titles:

.page .entry-title {
display: none;
}

For pre-Builder 3.0, use this CSS:

.page .title {
display: none;
}

How to hide title on homepage only

When Builder 3.0 and a corresponding LoopBuddy compatible theme like the current (as of Monday, July 11, 2011) Builder child themes are being used, adding the following at end of child theme's style.css will hide Page title on homepage:

.home .entry-title {
display: none;
}

For pre-Builder 3.0, use this CSS:

.home .title {
display: none;
}

How to get rid of top and bottom sidebars in all modules

When a module has 2 adjacent sidebars (either left or right), a top wide sidebar and bottom wide sidebar will automatically be added. These will not appear on the site for visitors as long as they are empty (i.e., not populated with widgets).

If you would still like to remove them, add the following at the end of child theme's style.css: