Builder CSS Guide

Revision as of 02:12, June 30, 2011 (view source) Sridhar (Talk | contribs) m (→To remove gap between each module) ← Older edit		Revision as of 02:13, June 30, 2011 (view source) Sridhar (Talk | contribs) m (→To remove the top and bottom borders for all modules) Newer edit →
Line 48:		Line 48:
	===To remove the top and bottom borders for all modules===		===To remove the top and bottom borders for all modules===
		+
		+	<u>Note</u>: This only applies to Default child theme.
	<pre class="brush:css;">		<pre class="brush:css;">

---

Revision as of 02:13, June 30, 2011

Contents 1 Introduction 1.1 To make the container touch the top edge of browser 1.2 To remove gap between each module 1.3 To remove the top and bottom borders for all modules 1.4 To target a specific module 1.5 Targeting modules based on their position in the layout 1.6 To set the height of a specific module 1.7 To remove padding around a specific widget 2 Navigation Module 2.1 To target all nav bars 2.2 To target a specific nav bar 2.3 To center the content of nav bar 3 Image Module 4 HTML Module 5 Widget Bar Module 5.1 Targeting the full widget bar 5.2 Targeting all the individual widgets globally 5.3 Targeting a specific widget 5.4 How to make all widgets of a widget bar module equal height 5.5 2-widget widget bar 5.6 3-widget widget bar 5.7 4-widget widget bar 5.8 5-widget widget bar 6 Content Module 6.1 Introduction 6.2 Removing top and bottom horizontal widget sections when content module is set to have 2 adjacent sidebars 7 Footer Module 8 Defining the scope 8.1 A specific page 8.1.1 To set a background color to a specific page 8.1.2 To set a background color to mutiple pages 8.1.3 To remove border around images only on certain Pages 9 Miscellaneous 9.1 How to make second line in list item to be indented to match up with the text

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.

Here are few recommended resources for CSS:

• BrainJar
• The CSS Video Crash Course - SitePoint Videos
• w3schools

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.

To make the container touch the top edge of browser

.builder-container-outer-wrapper {
	margin-top: 0;
}

• Before and After
• 
• 

To remove gap between each module

.builder-module {
	margin-bottom: 0;
}

Note: This only applies to Default child theme.

• Before and After
• 
• 

To remove the top and bottom borders for all modules

Note: This only applies to Default child theme.

.builder-module {
	border-top: none;
	border-bottom: none;
}

• Before and After
• 
• 

To target a specific module

#builder-module-4d396c72bbb6b {
}

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

Targeting modules based on their position in the layout

.builder-module-1 <-- First module

.builder-module-2 <-- Second module

.builder-module-3 <-- Last module

and so on..

.builder-module-top <-- Top most (first) module

.builder-module-last or .builder-module-bottom <-- Last module

Examples:

To set background of first module transparent,

.builder-module-1 {
	background: transparent;
}

To set all sidebars in first module transparent,

.builder-module-1 .builder-module-sidebar {
	background: transparent;
}

To set the height of a specific module

#builder-module-4d396c72bbb6e {
    height: 200px;
}

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.

Navigation Module

To target all nav bars

.builder-module-navigation {
}

To target a specific nav bar

#builder-module-4d396c72bbb6b {
}

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

To center the content of nav bar

#builder-module-4d3956642cc02 ul {
    margin-left: 18em;
}
#builder-module-4d3956642cc02 li ul {
	margin-left: 0;
}

#builder-module-4d3956642cc02 li ul ul {
	margin-left: 14em;
}

Note:

1. Replace builder-module-4d3956642cc02 with the ID of navigation module in question on your site.
2. The margin values have to be changed depending on the number of menu items in your nav bar and the child theme being used.

• Before and After
• 
• 

Example of another slightly different code to do the same: http://ithemes.com/forum/index.php?/topic/11617-centering-custom-menu-in-navigation-bar/#p54464

Image Module

HTML Module

Widget Bar Module

Targeting the full widget bar

To target all widget bars:

.builder-module-widget-bar {
}

To target a specific widget bar:

#builder-module-4d3956642cc05 {
}

where builder-module-4d3956642cc05 is the ID of widget bar module in question. The easiest way to obtain a module's ID is by inspecting the element with Firebug.

Targeting all the individual widgets globally

To target all individual widgets of all widget bars:

.builder-module-widget-bar .widget {
}

To target all the individual widgets of a specific widget bar:

#builder-module-4d3956642cc05 .widget {
}

where builder-module-4d3956642cc05 is the ID of widget bar module in question. The easiest way to obtain a module's ID is by inspecting the element with Firebug.

Targeting a specific widget

#text-3 {
}

where text-3 is the ID of widget in question. The easiest way to obtain a module's ID is by inspecting the element with Firebug.

How to make all widgets of a widget bar module equal height

Here's a video which explains how you can use Firebug to set height of a single widget and all then all widgets of the module so they have the same height: http://ithemes.com/screencasts/builder/height-of-widgets/

The general idea is to obtain the height of tallest widget in the module from 'Computed' tab in Firebug and write CSS like this:

#builder-module-4ddb5b00e3efd .widget {
	height: 100px; /* Set this value to height of tallest widget */
}

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.

Example:

To change the background of actual content area:

• Before and After
• 
• 

.builder-module-content .builder-module-element-outer-wrapper {
	background: #f2f4fd;
}

Removing top and bottom horizontal widget sections when content module is set to have 2 adjacent sidebars

• Before and After
• 
• 

Add the following at the end of your theme's style.css:

.builder-module-content .single {
    display: none;
}

Footer Module

Before: After:

CSS:

.builder-module-footer {
	margin-top: 1em;
}

.builder-module-footer .builder-module-element {
	color: #FFFFFF;
}

.builder-module-footer .builder-module-element a {
	color: #7eabc1;
}

Defining the scope

By default, style rules apply to all sections of the site. For a finer and granular control, it is possible to restrict the style rules to:

• Home (i.e, site's front page)
• Posts page
• All Pages
• A specific Page
• All posts
• A specific post
• All archives and category listings
• A specific category

A specific page

To set a background color to a specific page

.page-id-2 {
	background-color: #333333;
}

The above sets the background color of body element in a page whose ID is 2 to #333333.

• Before and After
• 
• 

IDs of Pages and posts can be obtained in the following ways:

• Examining the body element using Firebug

• Placing cursor on the Page/post title in edit screen and observing the number in the browser status bar

To set a background color to mutiple pages

.page-id-2, .page-id-4 {
	background-color: #333333;
}

The above sets the background color of body element in a page whose ID is 2 and to body element in another page whose ID is 4.

To remove border around images only on certain Pages

To remove border around images only on Pages having IDs 2 and 6

.page-id-2 .hentry img, .page-id-6 .hentry img {
    border: none;
}

Miscellaneous

How to make second line in list item to be indented to match up with the text

Before:

After:

Add the following at the end of child theme's style.css:

.widget ul {
    list-style-position: inside;
    margin-left: 0;
    padding-left: 1em;
    text-indent: -1em;
}