Builder CSS Guide

(Difference between revisions)
Jump to: navigation, search
(Introduction)
(Added "To remove border around images only on certain Pages")
Line 398: Line 398:
 
===A specific page===
 
===A specific page===
  
'''To set a background color of #333333 to a page whose ID is 2'''
+
===='''To set a background color of #333333 to a page whose ID is 2'''====
  
 
<pre class="brush:css;">
 
<pre class="brush:css;">
Line 418: Line 418:
 
[[Image:id-in-status-bar.png|200px|none]]
 
[[Image:id-in-status-bar.png|200px|none]]
  
'''To set a background color of #333333 to mutiple pages'''
+
===='''To set a background color of #333333 to mutiple pages'''====
  
 
<pre class="brush:css;">
 
<pre class="brush:css;">
Line 427: Line 427:
  
 
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.
 
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
 +
 +
<pre class="brush:css;">
 +
.page-id-2 .hentry img, .page-id-6 .hentry img {
 +
    border: none;
 +
}
 +
</pre>

Revision as of 00:00, February 10, 2011

Contents

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 go through them by clicking here.

Here are few recommended resources for CSS:

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.

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;
}

To remove gap between each module

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

To remove the top and bottom borders for all modules

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

To target a specific module

#builder-module-4d396c72bbb6b {
}

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

A-specific-module.png

Arriving at height and width of widgets

It is important to understand that the true dimension of a div is not the same as what has been set in the CSS. Padding value(s) if specified or inherited, have to be accounted for.

i.e., True dimension of a div = Specified dimension in CSS + Padding

In the above, Padding = Top Padding + Bottom Padding in case of height

and Padding = Left Padding + Right Padding in case of width.

Example:

Consider the following site.

True-dimension-1.png

Let's say we want the "Latest News" widget to appear at the same height as the image to its right.

The first step is to get the height of right side image. It's very easy using Firebug.

True-dimension-2.png

As can be seen from the above screenshot, the height 317px.

The natural tendency is to set the height of "Latest News" widget to 317px like so:

#recent-posts-3 {
	height: 317px;
}
True-dimension-3.png

But see what happens when we add it in the CSS:

True-dimension-4.png

This is happening because the top and bottom padding values are getting added to the value we specified resulting in making that widget taller than what we want it to be. So to get the height that should be specified in CSS, we should subtract the top and bottom padding values from our desired/actual/true/how-it-should-appear-on-webpage height.

Remember our formula? True dimension of a div = Specified dimension in CSS + Padding

Rewriting it, Specified dimension in CSS = True dimension of a div - Padding

In our example, that would be:

Specified dimension in CSS = 317 - 21.6 - 21.6 (see the screenshot below) = 273.8 = 274 (rounding off)

True-dimension-5.png

So the CSS to be added in our theme's stylesheet is:

#recent-posts-3 {
	height: 274px;
}

which makes it look good.

True-dimension-6.png

This marks the end of "Arriving at height and width of widgets" section.

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.

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.

Widget-padding.png

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.

A-specific-module.png

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 left margin value might have to be changed depending on the number of menu items

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.

Specific-widget-bar-module.png

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.

Specific-widget.png

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

Footer Module

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 of #333333 to a page whose ID is 2

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

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

  • Examining the body element using Firebug
Id-from-firebug.png
  • Placing cursor on the Page/post title in edit screen and observing the number in the browser status bar
Id-in-status-bar.png

To set a background color of #333333 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;
}
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox