Builder CSS Guide

(Difference between revisions)
Jump to: navigation, search
(47 intermediate revisions by 2 users not shown)
Line 15: Line 15:
 
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.
 
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.
+
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. [http://ithemes.com/forum/index.php?/topic/13320-padding-problem-with-widget/#p62262 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.
 
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.
 +
 +
=== Videos ===
 +
 +
{{#ev:vimeo|59590792|640}}
 +
 +
{{#ev:vimeo|59609073|640}}
 +
 +
{{#ev:vimeo|59910487|640}}
 +
 +
{{#ev:vimeo|59590795|640}}
 +
 +
{{#ev:vimeo|59591441|640}}
 +
 +
{{#ev:vimeo|59591444|640}}
 +
 +
{{#ev:vimeo|59609072|640}}
 +
 +
Source: http://ithemes.com/tutorial/category/builder-css/
 +
 +
=== 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.
 +
 +
<code>.home</code> - Homepage only
 +
 +
<code>.blog</code> - Posts page only
 +
 +
<code>.page</code> - All Pages
 +
 +
<code>.single-post</code> - All single post entries
 +
 +
<code>.archive</code> - Any category or date or tag archive page
 +
 +
<code>.category</code> - All category archive pages
 +
 +
<code>.category-issues</code> - Archive page of a specific category whose slug is "issues"
 +
 +
<code>.category-18</code> - Archive page of a specific category whose ID is 18
 +
 +
<code>.tag</code> - Tag archive page
 +
 +
<code>.page-id-500</code> - A specific Page whose ID is 500
 +
 +
<code>.postid-392</code> - A specific Post whose ID is 391
 +
 +
<code>#builder-layout-4e662c1838008</code> - Any page that uses a layout whose ID is 4e662c1838008
 +
 +
<code>.search</code> - Search results listing page
 +
 +
<code>.builder-module-outer-wrapper</code> - Outer wrapper of all modules
 +
 +
<code>.builder-module-1-outer-wrapper</code> : First module's outer wrapper
 +
 +
<code>.builder-module-2-outer-wrapper</code> : Second module's outer wrapper
 +
 +
and so on...
 +
 +
<code>.builder-module-header</code> - All Header modules
 +
 +
<code>.builder-module-header-1</code> : First Header module (from the top)
 +
 +
<code>.builder-module-header-2</code> : Second Header module (from the top)
 +
 +
and so on...
 +
 +
<code>.builder-module-image</code> - All Image modules
 +
 +
<code>.builder-module-image-1</code> : First Image module (from the top)
 +
 +
<code>.builder-module-image-2</code> : Second Image module (from the top)
 +
 +
and so on...
 +
 +
<code>.builder-module-navigation</code> - All Navigation modules
 +
 +
<code>.builder-module-navigation-1</code> : First Navigation module (from the top)
 +
 +
<code>.builder-module-navigation-2</code> : Second Navigation module (from the top)
 +
 +
and so on...
 +
 +
<code>.builder-module-content</code> - Content module
 +
 +
<code>.builder-module-html</code> - All HTML modules
 +
 +
<code>.builder-module-html-1</code> : First HTML module (from the top)
 +
 +
<code>.builder-module-html-2</code> : Second HTML module (from the top)
 +
 +
and so on...
 +
 +
<code>.builder-module-widget-bar</code> - All Widget Bar modules
 +
 +
<code>.builder-module-widget-bar-1</code> : First Widget Bar module (from the top)
 +
 +
<code>.builder-module-widget-bar-2</code> : Second Widget Bar module (from the top)
 +
 +
and so on...
 +
 +
<code>.builder-module-footer</code> - Footer module
 +
 +
<code>#builder-module-4fc8af01e738b</code> - A specific module whose ID is 4fc8af01e738b
 +
 +
<code>.builder-module-top</code> - Top most module in any page through out the site
 +
 +
<code>.builder-module-last</code> or <code>.builder-module-bottom</code> - Last/bottom most module in any page through out the site
  
 
===To make the container touch the top edge of browser===
 
===To make the container touch the top edge of browser===
Line 39: Line 145:
 
}
 
}
 
</pre>
 
</pre>
 +
 +
<u>Note</u>: This only applies to Default child theme.
  
 
<gallery widths=200px caption="Before and After">
 
<gallery widths=200px caption="Before and After">
Line 46: Line 154:
  
 
===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;">
Line 70: Line 180:
 
[[Image:a-specific-module.png|200px|none]]
 
[[Image:a-specific-module.png|200px|none]]
  
===Arriving at height and width of widgets===
+
===Targeting modules based on their position in the layout===
  
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.
+
.builder-module-1 <-- First module
  
i.e., '''True dimension of a div = Specified dimension in CSS + Padding'''
+
.builder-module-2 <-- Second module
  
In the above, Padding = Top Padding + Bottom Padding in case of height
+
.builder-module-3 <-- Last module
  
and Padding = Left Padding + Right Padding in case of width.
+
and so on..
  
Example:
+
.builder-module-top <-- Top most (first) module
  
<gallery widths=200px caption="Before and After">
+
.builder-module-last or .builder-module-bottom <-- Last module
File:true-dimension-1.png
+
File:true-dimension-7.png
+
</gallery>
+
  
Consider the following site.
+
Examples:
  
[[Image:true-dimension-1.png|200px|none]]
+
To set background of first module transparent,
 
+
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.
+
 
+
[[Image:true-dimension-2.png|200px|none]]
+
 
+
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:
+
  
 
<pre class="brush:css;">
 
<pre class="brush:css;">
#recent-posts-3 {
+
.builder-module-1 {
height: 317px;
+
background: transparent;
 
}
 
}
 
</pre>
 
</pre>
  
[[Image:true-dimension-3.png|200px|none]]
+
To set all sidebars in first module transparent,
 
+
But see what happens when we add it in the CSS:
+
 
+
[[Image:true-dimension-4.png|200px|none]]
+
 
+
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)
+
 
+
[[Image:true-dimension-5.png|200px|none]]
+
 
+
So the CSS to be added in our theme's stylesheet is:
+
  
 
<pre class="brush:css;">
 
<pre class="brush:css;">
#recent-posts-3 {
+
.builder-module-1 .builder-module-sidebar {
height: 274px;
+
background: transparent;
 
}
 
}
 
</pre>
 
</pre>
 
which makes it look good.
 
 
[[Image:true-dimension-6.png|200px|none]]
 
 
This marks the end of "Arriving at height and width of widgets" section.
 
  
 
===To set the height of a specific module===
 
===To set the height of a specific module===
Line 165: Line 238:
  
 
[[Image:widget-padding.png|200px|none]]
 
[[Image:widget-padding.png|200px|none]]
 +
 +
== 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.
 +
 +
Before:
 +
 +
[[File:Header-module-before.png|800px|thumb|none]]
 +
 +
After:
 +
 +
[[File:Header-module-after.jpg|800px|thumb|none]]
 +
 +
<pre class="brush:css;">
 +
.builder-module-1 {
 +
    height: 150px;
 +
    background: url("images/header.jpg") no-repeat;
 +
}
 +
 +
.site-title, .site-title a, .site-tagline, .site-tagline a {
 +
    color: #FFF;
 +
}
 +
 +
.site-title a:hover, .site-tagline a:hover {
 +
    color: #DDD;
 +
}
 +
 +
.site-title {
 +
    font-size: 3em;
 +
}
 +
 +
.site-tagline {
 +
    font-size: 1.5em;
 +
}
 +
</pre>
 +
 +
<u>Note</u>: Change the name of image in background property line above to what you wish to use. In this example, header.jpg resides in child theme's images directory.
 +
 +
=== How to hide top and bottom sidebars when using two adjacent sidebars ===
 +
 +
Add the following at the end of child theme's style.css:
 +
 +
<pre class="brush:css;">
 +
.builder-module-header .single {
 +
    display: none;
 +
}
 +
</pre>
 +
 +
[http://ithemes.com/forum/index.php?/topic/16676-header-module-2-right-sidebars-not-working/#p77664 Forum topic].
  
 
==Navigation Module==
 
==Navigation Module==
Line 187: Line 311:
  
 
===To center the content of nav bar===
 
===To center the content of nav bar===
 +
 +
[[File:Nav-menu-centered.png|800px|thumb|none]]
 +
 +
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 <code>margin: 0 auto;</code> with <code>float: right;</code>.
 +
 +
==== 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:
  
 
<pre class="brush:css;">
 
<pre class="brush:css;">
#builder-module-4d3956642cc02 ul {
+
.menu-mainmenu-container {
     margin-left: 18em;
+
    display: table;
 +
     margin: 0 auto;
 
}
 
}
#builder-module-4d3956642cc02 li ul {
+
</pre>
margin-left: 0;
+
 
 +
<u>Note</u>: 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 <code>.menu-mainmenu-container</code> with <code>.menu-primary-navigation-container</code>.
 +
 
 +
'''In most cases, this more generic (so independent of the menu name) code will accomplish the same:'''
 +
 
 +
<pre class="brush:css;">
 +
.builder-module-navigation-menu-wrapper {
 +
    display: table;
 +
    margin: 0 auto;
 
}
 
}
 +
</pre>
  
#builder-module-4d3956642cc02 li ul ul {
+
==== If you are using the Builder settings menu ====
margin-left: 14em;
+
 
 +
If you are using a "Legacy Menu Type" (a menu created using wp-dashboard > My Theme > Settings > Menu Builder) in your navigation module,
 +
 
 +
<pre class="brush:css;">
 +
.builder-module-navigation .builder-module-navigation-menu-wrapper {
 +
    display: table;
 +
    margin: 0 auto;
 
}
 
}
 
</pre>
 
</pre>
  
Note:
+
==== For all other types of navigation module ====
#Replace ''builder-module-4d3956642cc02'' with the ID of navigation module in question on your site.
+
#The left margin value might have to be changed depending on the number of menu items
+
  
<gallery widths=200px caption="Before and After">
+
Add the following at the end of child theme's style.css:
File:Centering-nav-items-before.png
+
 
File:Centering-nav-items-after.png
+
<pre class="brush:css;">
</gallery>
+
.builder-module-navigation .builder-module-element {
 +
    margin-left: 310px;
 +
}
 +
</pre>
 +
 
 +
<u>Note</u>:
 +
 
 +
# 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 <code>.builder-module-navigation</code> with <code>#builder-module-4e1585dc84fa3</code> 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.
 +
 
 +
[[File:Module-id.png|800px|thumb|none]]
  
 
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
 
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
 +
 +
=== To right align the nav menu ===
 +
 +
[[File:2012-07-31 14-31-45.png|798px|thumb|none|Before]]
 +
 +
[[File:2012-07-31 14-30-48.png|800px|thumb|none|After]]
 +
 +
Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush:css;">
 +
.builder-module-navigation .builder-module-element {
 +
    float: right;
 +
}
 +
</pre>
  
 
==Image Module==
 
==Image Module==
  
 
==HTML Module==
 
==HTML Module==
 +
 +
=== Targeting various sections of a HTML module having 2 adjacent sidebars ===
 +
 +
==== Outer wrappers ====
 +
 +
Top widget outer wrapper: #builder-module-4fe44d1c159e4 .widget-outer-wrapper-top
 +
 +
Middle widget outer wrapper container: #builder-module-4fe44d1c159e4 .widget-section-wrapper (If setting background for this, background will not be visible unless "float: left;" is also applied)
 +
 +
Middle widget outer wrappers: #builder-module-4fe44d1c159e4 .widget-section-wrapper .widget-outer-wrapper
 +
 +
Left widget outer wrapper: #builder-module-4fe44d1c159e4 .widget-outer-wrapper-left
 +
 +
Right widget outer wrapper: #builder-module-4fe44d1c159e4 .widget-outer-wrapper-right
 +
 +
Bottom widget outer wrapper: #builder-module-4fe44d1c159e4 .widget-outer-wrapper-bottom
 +
 +
[[File:2012-06-22 16-25-09.png|800px|thumb|none]]
 +
 +
==== Wrappers ====
 +
 +
Top widget wrapper: #builder-module-4fe44d1c159e4 .widget-wrapper-top
 +
 +
Bottom widget wrapper: #builder-module-4fe44d1c159e4 .widget-wrapper-bottom
 +
 +
Top and bottom widget wrapper: #builder-module-4fe44d1c159e4 .single
 +
 +
Wrappers of all widgets in the module: #builder-module-4fe44d1c159e4 .widget-wrapper
 +
 +
Left widget wrapper: #builder-module-4fe44d1c159e4 .widget-wrapper-left
 +
 +
Right widget wrapper: #builder-module-4fe44d1c159e4 .widget-wrapper-right
 +
 +
==== Widgets ====
 +
 +
Top widget: #builder-module-4fe44d1c159e4 .widget-wrapper-top .widget
 +
 +
Bottom widget: #builder-module-4fe44d1c159e4 .widget-wrapper-bottom .widget
 +
 +
Top and bottom widgets: #builder-module-4fe44d1c159e4 .single .widget
 +
 +
Left widget: #builder-module-4fe44d1c159e4 .widget-wrapper-left .widget
 +
 +
Right widget: #builder-module-4fe44d1c159e4 .widget-wrapper-right .widget
 +
 +
Left and right widgets: #builder-module-4fe44d1c159e4 .widget-section-wrapper .widget
 +
 +
'''Note: In the above replace "builder-module-4fe44d1c159e4" with the CSS ID of HTML module in question.'''
  
 
==Widget Bar Module==
 
==Widget Bar Module==
Line 266: Line 489:
  
 
[[Image:Specific-widget.png|200px|none]]
 
[[Image:Specific-widget.png|200px|none]]
 +
 +
===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:
 +
 +
<pre class="brush:css;">
 +
#builder-module-4ddb5b00e3efd .widget {
 +
height: 100px; /* Set this value to height of tallest widget */
 +
}
 +
</pre>
 +
 +
Note: Change builder-module-4ddb5b00e3efd to ID of module in question.
  
 
===2-widget widget bar===
 
===2-widget widget bar===
Line 382: Line 619:
  
 
==Content Module==
 
==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:
 +
 +
<gallery widths=200px caption="Before and After">
 +
File:Content-element-wrapper-background-before.png
 +
File:Content-element-wrapper-background-after.png
 +
</gallery>
 +
 +
<pre class="brush:css;">
 +
.builder-module-content .builder-module-element-outer-wrapper {
 +
background: #f2f4fd;
 +
}
 +
</pre>
  
 
===Removing top and bottom horizontal widget sections when content module is set to have 2 adjacent sidebars===
 
===Removing top and bottom horizontal widget sections when content module is set to have 2 adjacent sidebars===
Line 393: Line 651:
  
 
<pre class="brush:css;">
 
<pre class="brush:css;">
.builder-module-content .single {
+
.builder-module-content .widget-outer-wrapper-top, .builder-module-content .widget-outer-wrapper-bottom {
 
     display: none;
 
     display: none;
 
}
 
}
Line 399: Line 657:
  
 
==Footer Module==
 
==Footer Module==
 +
 +
Before: [[Image:Footer-before.png|800px|none]]
 +
 +
After: [[Image:Footer-after.png|800px|none]]
 +
 +
CSS:
 +
 +
<pre class="brush:css;">
 +
.builder-module-footer {
 +
margin-top: 1em;
 +
}
 +
 +
.builder-module-footer .builder-module-element {
 +
color: #FFFFFF;
 +
}
 +
 +
.builder-module-footer .builder-module-element a {
 +
color: #7eabc1;
 +
}
 +
</pre>
  
 
==Defining the scope==
 
==Defining the scope==
Line 407: Line 685:
 
*Posts page
 
*Posts page
 
*All Pages
 
*All Pages
 +
*A layout
 
*A specific Page
 
*A specific Page
 
*All posts
 
*All posts
Line 412: Line 691:
 
*All archives and category listings
 
*All archives and category listings
 
*A specific category
 
*A specific category
 +
 +
=== Homepage or Front page ===
 +
 +
Use <code>.home</code> selector to restrict CSS to the site's front page.
 +
 +
Ex.:
 +
 +
<pre class="brush:css;">
 +
.home h1.entry-title {
 +
    display: none;
 +
}
 +
</pre>
 +
 +
gets rid of the title only on homepage.
 +
 +
=== Posts (blog) page ===
 +
 +
Use <code>blog</code> selector.
 +
 +
Ex.:
 +
 +
<pre class="brush:css;">
 +
.blog .builder-module-content .hentry {
 +
    margin-top: 0;
 +
}
 +
</pre>
 +
 +
=== All static Pages ===
 +
 +
Use <code>.page</code> selector.
 +
 +
Ex.:
 +
 +
<pre class="brush:css;">
 +
.page .entry-title {
 +
    display: none;
 +
}
 +
</pre>
 +
 +
Note: When front page is set to show a static Page, front page (or homepage) will also have the "home" body class.
  
 
===A specific page===
 
===A specific page===
 +
 +
==== How to get rid of title for a specific Page ====
 +
 +
To remove the title of a Page whose ID is say, 47, add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush:css;">
 +
.page-id-47 .entry-title {
 +
    display: none;
 +
}
 +
</pre>
 +
 +
In the above replace <code>page-id-47</code> with the body class of Page in your site. This can be obtained using Firebug.
 +
 +
[[File:2012-08-03 10-44-54.png|800px|thumb|none]]
  
 
===='''To set a background color to a specific page'''====
 
===='''To set a background color to a specific page'''====
Line 456: Line 789:
 
}
 
}
 
</pre>
 
</pre>
 +
 +
=== A specific layout ===
 +
 +
Ex.:
 +
 +
<pre class="brush:css;">
 +
#builder-layout-4fe44cd68bddb .builder-module-content {
 +
    background: #333;
 +
}
 +
</pre>
 +
 +
where "builder-layout-4fe44cd68bddb" is the ID of body element of any webpage that uses this layout.
 +
 +
Firebug can be used to obtain this ID.
 +
 +
[[Image:Snapshot 20-09-12 6-31 PM.png|800px|none]]
 +
 +
==Miscellaneous==
 +
 +
===How to make second line in list item to be indented to match up with the text===
 +
 +
Before: [[File:Indenting-second-line-list-before.png]]
 +
 +
After: [[File:Indenting-second-line-list-after.png]]
 +
 +
Add the following at the end of child theme's style.css:
 +
 +
<pre class="brush:css;">
 +
.widget ul {
 +
    list-style-position: inside;
 +
    margin-left: 0;
 +
    padding-left: 1em;
 +
    text-indent: -1em;
 +
}
 +
</pre>
 +
 +
'''Tuesday, August 23, 2011 Update'''
 +
 +
Fix for IE: http://ithemes.com/forum/index.php?/topic/14646-i-need-to-adjust-text-alignment-in-side-widgets/#p81837
 +
 +
Thanks to: Ronald.
 +
 +
===How to hide titles on all Pages===
 +
 +
Ensure that [http://www.doitwithwp.com/how-to-change-your-permalink-structure-without-breaking-your-links/ pretty permalinks] are enabled.
 +
 +
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:
 +
 +
<pre class="brush:css; gutter: false;">
 +
.page .entry-title {
 +
    display: none;
 +
}
 +
</pre>
 +
 +
For pre-Builder 3.0, use this CSS:
 +
 +
<pre class="brush:css; gutter: false;">
 +
.page .title {
 +
    display: none;
 +
}
 +
</pre>
 +
 +
===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:
 +
 +
<pre class="brush:css; gutter: false;">
 +
.home .entry-title {
 +
    display: none;
 +
}
 +
</pre>
 +
 +
For pre-Builder 3.0, use this CSS:
 +
 +
<pre class="brush:css; gutter: false;">
 +
.home .title {
 +
    display: none;
 +
}
 +
</pre>
 +
 +
=== 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:
 +
 +
<pre class="brush:css;">
 +
.builder-module .widget-outer-wrapper-top, .builder-module .widget-outer-wrapper-bottom {
 +
    display: none;
 +
}
 +
</pre>
 +
 +
=== How to add and use a font from a .ttf file ===
 +
 +
In this example we are going to download a free font from http://www.dafont.com/ and use it in a Builder site.
 +
 +
'''1.''' Download your desired font. Extract the zip file to get the .ttf file.
 +
 +
'''2.''' Go to http://www.fontsquirrel.com/fontface/generator. Click <code>Add Fonts</code>, browse to and select the .ttf file that you downloaded.
 +
 +
'''3.''' Place a tick mark to the left of "Yes, the fonts I'm uploading are legally eligible for web embedding." and click <code>Download Your Kit</code> and save the zip file.
 +
 +
'''4.''' Extract the zip file to get a folder having files with different extensions. Upload .ttf, .eot, .svg, .woff files to child theme's directory using a FTP client or cPanel file manager.
 +
 +
'''5.''' Open stylesheet.css, copy all the code similar to the following and paste at the end of child theme's style.css (WP dashboard -> Appearance -> Editor)
 +
 +
Ex.:
 +
 +
<pre class="brush:css;">
 +
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 17, 2012 */
 +
 +
 +
 +
@font-face {
 +
    font-family: 'last_king_questregular';
 +
    src: url('last_king_quest-webfont.eot');
 +
    src: url('last_king_quest-webfont.eot?#iefix') format('embedded-opentype'),
 +
        url('last_king_quest-webfont.woff') format('woff'),
 +
        url('last_king_quest-webfont.ttf') format('truetype'),
 +
        url('last_king_quest-webfont.svg#last_king_questregular') format('svg');
 +
    font-weight: normal;
 +
    font-style: normal;
 +
 +
}
 +
</pre>
 +
 +
'''6.''' Open .html file in the extracted folder in a text editor and copy a line similar to
 +
 +
(for example)
 +
 +
<pre class="brush:css;">font-family: 'last_king_questregular';</pre>
 +
 +
This will be found between <code><head></code> and <code></head></code>.
 +
 +
'''7.''' Paste this line for the CSS selector of your choice.
 +
 +
Ex.:
 +
 +
<pre class="brush:css;">
 +
h1 {
 +
    font-family: 'last_king_questregular';
 +
}
 +
</pre>
 +
 +
That's it!

Revision as of 09:11, February 26, 2013

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 watch 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. 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.

Videos







Source: http://ithemes.com/tutorial/category/builder-css/

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.

.home - Homepage only

.blog - Posts page only

.page - All Pages

.single-post - All single post entries

.archive - Any category or date or tag archive page

.category - All category archive pages

.category-issues - Archive page of a specific category whose slug is "issues"

.category-18 - Archive page of a specific category whose ID is 18

.tag - Tag archive page

.page-id-500 - A specific Page whose ID is 500

.postid-392 - A specific Post whose ID is 391

#builder-layout-4e662c1838008 - Any page that uses a layout whose ID is 4e662c1838008

.search - Search results listing page

.builder-module-outer-wrapper - Outer wrapper of all modules

.builder-module-1-outer-wrapper : First module's outer wrapper
.builder-module-2-outer-wrapper : Second module's outer wrapper
and so on...

.builder-module-header - All Header modules

.builder-module-header-1 : First Header module (from the top)
.builder-module-header-2 : Second Header module (from the top)
and so on...

.builder-module-image - All Image modules

.builder-module-image-1 : First Image module (from the top)
.builder-module-image-2 : Second Image module (from the top)
and so on...

.builder-module-navigation - All Navigation modules

.builder-module-navigation-1 : First Navigation module (from the top)
.builder-module-navigation-2 : Second Navigation module (from the top)
and so on...

.builder-module-content - Content module

.builder-module-html - All HTML modules

.builder-module-html-1 : First HTML module (from the top)
.builder-module-html-2 : Second HTML module (from the top)
and so on...

.builder-module-widget-bar - All Widget Bar modules

.builder-module-widget-bar-1 : First Widget Bar module (from the top)
.builder-module-widget-bar-2 : Second Widget Bar module (from the top)
and so on...

.builder-module-footer - Footer module

#builder-module-4fc8af01e738b - A specific module whose ID is 4fc8af01e738b

.builder-module-top - Top most module in any page through out the site

.builder-module-last or .builder-module-bottom - Last/bottom most module in any page through out the site

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

Note: This only applies to Default child theme.

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

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

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.

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

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.

Before:

Header-module-before.png

After:

Header-module-after.jpg
.builder-module-1 {
    height: 150px;
    background: url("images/header.jpg") no-repeat;
}

.site-title, .site-title a, .site-tagline, .site-tagline a {
    color: #FFF;
}

.site-title a:hover, .site-tagline a:hover {
    color: #DDD;
}

.site-title {
    font-size: 3em;
}

.site-tagline {
    font-size: 1.5em;
}

Note: Change the name of image in background property line above to what you wish to use. In this example, header.jpg resides in child theme's images directory.

How to hide top and bottom sidebars when using two adjacent sidebars

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

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

Forum topic.

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

Nav-menu-centered.png

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:

.builder-module-navigation-menu-wrapper {
    display: table;
    margin: 0 auto;
}

If you are using the Builder settings menu

If you are using a "Legacy Menu Type" (a menu created using wp-dashboard > My Theme > Settings > Menu Builder) in your navigation module,

.builder-module-navigation .builder-module-navigation-menu-wrapper {
    display: table;
    margin: 0 auto;
}

For all other types of navigation module

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

.builder-module-navigation .builder-module-element {
    margin-left: 310px;
}

Note:

  1. In the above code, the left margin value has to be changed depending on width of menu.
  2. 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.
  3. This method can also be used for a navigation module which displays a custom menu.
Module-id.png

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

To right align the nav menu

Before
After

Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

.builder-module-navigation .builder-module-element {
    float: right;
}

Image Module

HTML Module

Targeting various sections of a HTML module having 2 adjacent sidebars

Outer wrappers

Top widget outer wrapper: #builder-module-4fe44d1c159e4 .widget-outer-wrapper-top

Middle widget outer wrapper container: #builder-module-4fe44d1c159e4 .widget-section-wrapper (If setting background for this, background will not be visible unless "float: left;" is also applied)

Middle widget outer wrappers: #builder-module-4fe44d1c159e4 .widget-section-wrapper .widget-outer-wrapper

Left widget outer wrapper: #builder-module-4fe44d1c159e4 .widget-outer-wrapper-left

Right widget outer wrapper: #builder-module-4fe44d1c159e4 .widget-outer-wrapper-right

Bottom widget outer wrapper: #builder-module-4fe44d1c159e4 .widget-outer-wrapper-bottom

2012-06-22 16-25-09.png

Wrappers

Top widget wrapper: #builder-module-4fe44d1c159e4 .widget-wrapper-top

Bottom widget wrapper: #builder-module-4fe44d1c159e4 .widget-wrapper-bottom

Top and bottom widget wrapper: #builder-module-4fe44d1c159e4 .single

Wrappers of all widgets in the module: #builder-module-4fe44d1c159e4 .widget-wrapper

Left widget wrapper: #builder-module-4fe44d1c159e4 .widget-wrapper-left

Right widget wrapper: #builder-module-4fe44d1c159e4 .widget-wrapper-right

Widgets

Top widget: #builder-module-4fe44d1c159e4 .widget-wrapper-top .widget

Bottom widget: #builder-module-4fe44d1c159e4 .widget-wrapper-bottom .widget

Top and bottom widgets: #builder-module-4fe44d1c159e4 .single .widget

Left widget: #builder-module-4fe44d1c159e4 .widget-wrapper-left .widget

Right widget: #builder-module-4fe44d1c159e4 .widget-wrapper-right .widget

Left and right widgets: #builder-module-4fe44d1c159e4 .widget-section-wrapper .widget

Note: In the above replace "builder-module-4fe44d1c159e4" with the CSS ID of HTML module in question.

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

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:

.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

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

.builder-module-content .widget-outer-wrapper-top, .builder-module-content .widget-outer-wrapper-bottom {
    display: none;
}

Footer Module

Before:
Footer-before.png
After:
Footer-after.png

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 layout
  • A specific Page
  • All posts
  • A specific post
  • All archives and category listings
  • A specific category

Homepage or Front page

Use .home selector to restrict CSS to the site's front page.

Ex.:

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

gets rid of the title only on homepage.

Posts (blog) page

Use blog selector.

Ex.:

.blog .builder-module-content .hentry {
    margin-top: 0;
}

All static Pages

Use .page selector.

Ex.:

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

Note: When front page is set to show a static Page, front page (or homepage) will also have the "home" body class.

A specific page

How to get rid of title for a specific Page

To remove the title of a Page whose ID is say, 47, add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

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

In the above replace page-id-47 with the body class of Page in your site. This can be obtained using Firebug.

2012-08-03 10-44-54.png

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.

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

A specific layout

Ex.:

#builder-layout-4fe44cd68bddb .builder-module-content {
    background: #333;
}

where "builder-layout-4fe44cd68bddb" is the ID of body element of any webpage that uses this layout.

Firebug can be used to obtain this ID.

Snapshot 20-09-12 6-31 PM.png

Miscellaneous

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

Before: Indenting-second-line-list-before.png

After: Indenting-second-line-list-after.png

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

Tuesday, August 23, 2011 Update

Fix for IE: http://ithemes.com/forum/index.php?/topic/14646-i-need-to-adjust-text-alignment-in-side-widgets/#p81837

Thanks to: Ronald.

How to hide titles on all Pages

Ensure that pretty permalinks are enabled.

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:

.builder-module .widget-outer-wrapper-top, .builder-module .widget-outer-wrapper-bottom {
    display: none;
}

How to add and use a font from a .ttf file

In this example we are going to download a free font from http://www.dafont.com/ and use it in a Builder site.

1. Download your desired font. Extract the zip file to get the .ttf file.

2. Go to http://www.fontsquirrel.com/fontface/generator. Click Add Fonts, browse to and select the .ttf file that you downloaded.

3. Place a tick mark to the left of "Yes, the fonts I'm uploading are legally eligible for web embedding." and click Download Your Kit and save the zip file.

4. Extract the zip file to get a folder having files with different extensions. Upload .ttf, .eot, .svg, .woff files to child theme's directory using a FTP client or cPanel file manager.

5. Open stylesheet.css, copy all the code similar to the following and paste at the end of child theme's style.css (WP dashboard -> Appearance -> Editor)

Ex.:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 17, 2012 */



@font-face {
    font-family: 'last_king_questregular';
    src: url('last_king_quest-webfont.eot');
    src: url('last_king_quest-webfont.eot?#iefix') format('embedded-opentype'),
         url('last_king_quest-webfont.woff') format('woff'),
         url('last_king_quest-webfont.ttf') format('truetype'),
         url('last_king_quest-webfont.svg#last_king_questregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

6. Open .html file in the extracted folder in a text editor and copy a line similar to

(for example)

font-family: 'last_king_questregular';

This will be found between <head> and </head>.

7. Paste this line for the CSS selector of your choice.

Ex.:

h1 {
    font-family: 'last_king_questregular';
}

That's it!

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox