IThemes Codex - User contributions [en]

Builder Tips and Tricks

2013-05-30T07:45:34Z

Sridhar: /* How to add support for Sidebars in Navigation Module */

== Create custom blog page template for Builder ==
* '''Why''': Although builder generates a blog index page using the content module, in some cases you might want to create your own listing of blog posts. Perhaps to select posts only from a specific category, or for whatever other reasons you can think of.
* '''How''': [http://codex.wordpress.org/Function_Reference/query_posts query_posts] is a WordPress function that allows you to write your own WordPress loop. In Builder, the easiest way to create such a blog page is to
**[http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates create a page template],
**upload to your WordPress site,
**write a new page (no need to add content),
**select the newly created page template,
**and publish the page.
Your page template should look something like this:
<pre class="brush:php; highlight: [22]">
<?php
/*
Template Name: Custom Blog Index Page
*/
?>
<?php

function render_content() {

?>

<?php $paged = ( get_query_var('paged') ) ? get_query_var( 'paged' ) : 1; ?>
<?php query_posts( 'paged='. $paged . '&posts_per_page=' . get_option( 'posts_per_page' ) ); ?>

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( current_theme_supports( 'post-thumbnails' ) ) : ?>
<?php the_post_thumbnail( array( 125, 125 ), array( 'class' => 'thumb' ) ); ?>
<?php endif; ?>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php the_time( __( 'l, F j, Y', 'it-l10n-Builder' ) ); ?>
<?php the_content_limit( 250, "more »" ); ?>
<?php endwhile; ?>

<div class="alignleft"><?php previous_posts_link('« Previous Page') ?></div>
<div class="alignright"><?php next_posts_link('Next Page »') ?></div>
<?php endif; ?>

<?php

}

add_action( 'builder_layout_engine_render_content', 'render_content' );

do_action( 'builder_layout_engine_render', basename( __FILE__ ) );

?>
</pre>
'''Important Note 1''': the actual content part (post header, date and content) is simplified, refer to the Child Themes index.php to see how it is actually coded for that specific Child Theme.
'''Important Note 2''': the content is displayed using <tt>the_content_limit(250, "more »")</tt> (see highlighted line), a function described in [[#Limit_the_content_of_a_post_that_is_displayed_on_a_blog_index_page|another tip on this page]]. You can use <tt>[http://codex.wordpress.org/Function_Reference/the_content the_content()]</tt> or <tt>[http://codex.wordpress.org/Function_Reference/the_excerpt the_excerpt()]</tt>, depending on your requirements.

== Limit the content of a post that is displayed on a blog index page ==
* '''Why''': In some cases, <code>the_content()</code> or <code>the_excerpt()</code> just don't fit your requirements.
* '''How''': Using a new function allows you to specify the number of characters you want to display on the blog index page, and what to use as the "more" text. Add the following [[function]] to your [[Child Theme|child theme's]] [[functions.php]].
<pre class="brush:php">
function the_content_limit($max_char, $more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
$content = get_the_content($more_link_text, $stripteaser, $more_file);
$content = apply_filters('the_content', $content);

if (strlen($_GET['p']) > 0) {
echo $content;
}
else if ((strlen($content)>$max_char) && ($space = strpos($content, " ", $max_char ))) {
$content = substr($content, 0, $space);
echo $content = $content . " <a href='"; the_permalink(); echo "'>".$more_link_text."</a>";
}
else {
echo $content;
}
}
</pre>
''(Note: 95% of the code is based on [http://labitacora.net/software-libre/plugin-for-limit-the-size-of-the-post-in-the-main-page-in-wordpress/ this plugin by Alfonso Sanchez-Paus Diaz and Julian Simon de Castro]).''
* '''Implementation''': Add the code to your blog index template file as described in the [[#Create_your_own_blog_index_page_in_Builder|Create your own blog index page in Builder]] tip.

== Add a full width Header and/or Footer to your Builder theme ==
* '''Why''': Because you want to
* '''How''': Detailed instructions in [http://vanweerd.com/how-to-add-full-width-header-and-footer-to-the-builder-theme/ this article].

Note: See http://ithemes.com/forum/topic/31075-getting-fatal-error/page__view__findpost__p__144435 for updated code.

== How to have full width (100% wide background) modules ==

=== When using responsive-ready child themes ===

These child themes have version number of at least 4.0. The current list of responsive-ready Builder child themes can be seen [http://ithemes.com/codex/page/Builder_Features#List_of_responsive-ready_Builder_child_themes here].

Add the following at the end of child theme's <code>functions.php</code> (WP dashboard -> Appearance -> Editor):

<pre class="brush:php;">
add_theme_support( 'builder-full-width-modules' );
</pre>

'''Note''':

# For simplicity sake, we say "full width modules". Technically speaking, it is not the modules that become full width, but their background wrappers.
# Few child themes like Expansion and all its color variants have the above line in their <code>functions.php</code> out of the box. In such cases, do not add it again.
# All custom CSS code should be placed at end of child theme's style.css.

{| class="wikitable"
|+ '''Before & After screenshots showing the effect of adding above line of code in Default child theme'''
! scope="col" | Before
! scope="col" | After
|-
| [[File:My Test Site 2013-01-01 10-49-01.png|475px|thumb|none]]
|| [[File:My Test Site 2013-01-01 10-49-27.png|475px|thumb|none]]

|}

==== Structural change as a result of adding above line of code ====

<u>Before</u>

<pre class="brush:css;">
.builder-container-outer-wrapper {
max-width: 960px;
width: 100%;
}
</pre>

(where 960 is the layout width)

<u>After</u>

<pre class="brush:css;">
.builder-container-outer-wrapper {
width: 100%;
}
</pre>

Note: In [http://ithemes.com/forum/topic/35775-full-width-modules-with-responsive-turned-off-builder-4011/#entry165354 few cases], we have observed that <code>.builder-container-outer-wrapper</code> isn't automatically becoming 100%. This can be observed using Firebug. In such cases, the following CSS should be used:

<pre class="brush:css;">
.builder-container-outer-wrapper {
width: 100% !important;
}
</pre>

==== How to set background of full width modules ====

===== All modules =====

If you would like to set the same background to every module of all layouts, i.e., throughout the site in a single shot, use the following sample CSS:

<pre class="brush:css;">
.builder-module-background-wrapper {
background: gray;
}
</pre>

[[File:My Test Site 2013-01-01 11-42-10.png|475px|thumb|none]]

===== A specific module based on its ID =====

If you would like to set a background to a specific full width module, use the following sample CSS:

<pre class="brush:css;">
#builder-module-50842a8824755-background-wrapper {
background: yellow;
}
</pre>

where 50842a8824755 is the ID of module in question.

[[File:My Test Site 2013-01-01 11-19-53.png|800px|thumb|none]]

The easiest way to obtain the CSS ID is by using Firebug. Below screenshot shows where <code>builder-module-50842a8824755-background-wrapper</code> can be found.

[[File:2013-01-01 11-15-31.png|800px|thumb|none]]

===== A specific module based on its position =====

It is also possible to set background of a full width module based on its position in the layout from top. For example, the following sample CSS sets yellow background to top most modules of all layouts i.e, throughout the site.

<pre class="brush:css;">
.builder-module-1-background-wrapper {
background: yellow;
}
</pre>

[[File:2013-01-01 11-35-10.png|800px|thumb|none]]

===== All modules of a certain type =====

It is also possible to set background of full width modules based on '''module type'''. For example, the following sample CSS sets yellow background to all widget bar modules in all layouts i.e, throughout the site.

<pre class="brush:css;">
.builder-module-widget-bar-background-wrapper {
background: yellow;
}
</pre>

[[File:My Test Site 2013-01-01 11-38-02.png|432px|thumb|none]]

=== When using non responsive-ready child themes ===

The following applies to all themes other than Acute (and its color variants), Americana (and its color variants), City Church, Blueprint, Scooter, Kepler, Lucky 7, Thinner, Traverse. All the module wrappers in these said child themes are full width by default.

Note:

'''1.''' PHP code given in the sections below should be put in your child theme's functions.php. If this file does not exist, create a new blank file, paste the code in between ''<?php'' and ''?>'', save it as functions.php and upload it to the child theme directory.

'''2.''' To set width of specific module(s) full width, the module(s) should be targeted by its/their GUID. The easiest method to obtain GUID of a module is by inspecting the module via Firebug.

[[Image:GUID.png|200px|none]]

In the example shown in the above screenshot, GUID of the module is: 4d14470049da5

'''3.''' To observe a module becoming full width, set a background color or image or both.

==== To make a specific single module full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Specific-module-full-width-before.png
File:Specific-module-full-width-after.png
</gallery>

* The following has been added to child theme's style.css to see the effect of module going full width:
<pre class="brush:php;">#builder-module-4d14470049da5 {
background-color: yellow;
}</pre>
* In the code below, 4d14470049da5 must be replaced with GUID of the specific module which is to be made full width

Code in functions.php:

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
$full_width_modules = array( '4d14470049da5' );

if ( ! in_array( $fields['guid'], $full_width_modules ) )
return $fields;
foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make specific multiple modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

===== By Module Types =====

By adding the following sample code before the closing PHP tag in child theme's functions.php, all Widget Bar modules, all Navigation modules and the Footer module will become full-width.

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
$full_width_modules = array( 'widget-bar','navigation','footer' );

if ( ! in_array( $fields['module'], $full_width_modules ) )
return $fields;
foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

The other available module types in Builder are: image, content, html

===== By Module IDs =====

<gallery widths=200px caption="Before and After">
File:Specific-modules-full-width-before.png
File:Specific-modules-full-width-after.png
</gallery>

* The following has been added to child theme's style.css to see the effect of module going full width:
<pre class="brush:php;">#builder-module-4d14470049da5, #builder-module-4d14470049da7 {
background-color: yellow;
}</pre>
* In the code below, 4d14470049da5 and 4d14470049da7 must be replaced with GUID of specific modules which are to be made full width

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
$full_width_modules = array( '4d14470049da5','4d14470049da7' );

if ( ! in_array( $fields['guid'], $full_width_modules ) )
return $fields;
foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all Image modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Image-modules-fullwidth-before.png
File:Image-modules-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of all image modules (only 1 is being used in the screenshot above)) going full width:
<pre class="brush:php;">.builder-module-image {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'image' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all Navigation modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Image-modules-fullwidth-before.png
File:Navigation-modules-fullwidth-after.png
</gallery>

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'navigation' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make Content module full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Image-modules-fullwidth-before.png
File:Content-module-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of content module going full width:
<pre class="brush:php;">.builder-module-content {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'content' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all HTML modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Html-modules-fullwidth-before.png
File:Html-modules-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of all HTML modules (only 1 is being used in the screenshot above) going full width:
<pre class="brush:php;">.builder-module-html {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'html' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all Widget Bar modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Widget-bar-modules-fullwidth-before.png
File:Widget-bar-modules-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of widget bar modules going full width:
<pre class="brush:php;">.builder-module-widget-bar {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'widget-bar' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make Footer module full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Specific-module-full-width-before.png
File:Footer-module-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of Footer module going full width:
<pre class="brush:php;">.builder-module-footer {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'footer' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

In this method we are going to add code to functions.php that will make outer wrappers of all modules full width.

[http://d.pr/iH9x Before] -> [http://d.pr/bdwr After]

'''Code in functions.php''':

<pre class="brush:php;">
function it_set_full_width_container( $width ) {
remove_filter( 'builder_get_container_width', 'it_set_full_width_container' );

return '';
}
add_filter( 'builder_get_container_width', 'it_set_full_width_container' );

function it_set_full_width_module( $fields ) {

global $it_original_module_width;

$it_original_module_width = '';

foreach ( (array) $fields['attributes']['style'] as $index => $value ) {
if ( preg_match( '/^(width:.+)/i', $value, $matches ) ) {
$it_original_module_width = $matches[1];
unset( $fields['attributes']['style'][$index] );
}
if ( preg_match( '/^overflow:/', $value ) ) {
unset( $fields['attributes']['style'][$index] );
$fields['attributes']['style'][] = 'overflow:visible;';
}
}
add_filter( 'builder_module_filter_inner_wrapper_attributes', 'it_constrain_full_width_module_inner_wrapper' );

return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'it_set_full_width_module' );

function it_constrain_full_width_module_inner_wrapper( $fields ) {
global $it_original_module_width;

remove_filter( 'builder_module_filter_inner_wrapper_attributes', 'it_constrain_full_width_module_inner_wrapper' );

$fields['attributes']['style'][] = $it_original_module_width;
$fields['attributes']['style'][] = 'margin:0 auto;';

$it_original_module_width = '';

return $fields;
}
</pre>

The following has been added to child theme's style.css to see the effect of all modules going full width:

<pre class="brush:php;">
.builder-module-image-outer-wrapper {
background-color: #247da7;
}

.builder-module-navigation-outer-wrapper {
background: #e0e2e3;
}

.builder-module-html-outer-wrapper {
background: #9ba1ac;
border-bottom: 0.1em dotted #CCCCCC;
}

.builder-module-content-outer-wrapper {
background: #1d313f;
}

.builder-module-widget-bar-outer-wrapper {
background: #262626;
border-bottom: 0.1em dotted #CCCCCC;
}

.builder-module-footer-outer-wrapper {
background-color: #bbbbbb;
}</pre>

If you would like to apply different styles to different modules of the same type when using this method, use [http://ithemes.com/codex/page/Builder_Features#Custom_Module_Styles Custom Module Styles].

Ex.: Let's say there are two widget bar modules in the layout and using the above method, both would become full width. Now if you would like to set red background to one of these widget bar module and green to another, then you have to create two custom module styles for these and use them.

To see how these are implemented, observe functions.php and style.css of Blueprint or Americana child theme.

The overall idea is this:

# Register the new module style using builder_register_module_style() function
# Add a new style rule in child theme's style.css. For the selector name use a class with the name of module style and append "-outer-wrapper" at end.

For details, please see [http://ithemes.com/forum/index.php?/topic/9420-americana-theme-how-do-i-get-away-from-fixed-width-layout/#p44290 Example 1], [http://ithemes.com/forum/index.php?/topic/10030-modification-to-americana-theme/#p47025 Example 2] and [http://ithemes.com/codex/page/BuilderChild-Blueprint#How_to_make_nav_bars_go_full_width Example 3].

==To change widget titles from the default h4 to any other heading tag==

Go to http://ithemes.com/forum/index.php?/topic/10724-widget-tags-how-to-change/#p50888

== How to extend sidebar and/or content background so they reach till the bottom ==

Create a 1px tall image and set it to vertically repeat as background for .builder-module-content. This image can either be created from scratch or by taking a screenshot of the site and editing in Photoshop.

The 10 min video below shows how this can be done. It shows how to create an image in Photoshop which can be set using CSS as background for Builder's content module so the sidebar(s) and element (the actual content) appear to extend all the way to the bottom.

Tip: To watch the video in full screen, go to http://vimeo.com/19781283 and click the small 4-arrow button.

{{#ev:vimeo|19781283|800}}

Relevant forum topics:

http://ithemes.com/forum/index.php?/topic/8265-foundation-child-theme-color-bleed-in-main-area/#p38894

http://ithemes.com/forum/index.php?/topic/11301-need-sidebars-to-extend-to-bottom-of-page/

http://ithemes.com/forum/index.php?/topic/9013-here-we-are-again-sidebar-bg-color/

http://ithemes.com/forum/index.php?/topic/8363-sidebar-styling-to-continue-vertically-for-entire-module-height/

http://ithemes.com/forum/index.php?/topic/876-the-endless-quest-for-equal-column-heights/

== How to add code just after <body> and just before </body> ==

Add the following in your child theme's functions.php. If the child theme does not contain this file, a new one can be created and the below code pasted.

<pre class="brush:php;">
<?php
add_action('builder_layout_engine_render_header', 'add_after_opening_body', 20 );
function add_after_opening_body() { ?>
HTML code that you want just after the opening body tag should be placed here
<?php }

add_action('builder_finish', 'add_before_closing_body', 0 );
function add_before_closing_body() { ?>
HTML code that you want just before the closing body tag should be placed here
<?php }
?>
</pre>

Sources: [http://vanweerd.com/how-to-add-full-width-header-and-footer-to-the-builder-theme/ 1], [http://ithemes.com/codex/page/Builder_Hooks 2].

== How to add code before and after each widget ==

Here's an example that shows how we can add <pre><div class="custom_top"></div></pre> before every widget and <pre><div class="custom_bottom"></div></pre> after every widget.

Add the following to the child theme's functions.php:

<pre class="brush:php;">
function custom_filter_register_sidebar_options( $options ) {
$options['before_widget'] = $options['before_widget'] .'<div class="custom_top"></div>';
$options['after_widget'] = '<div class="custom_bottom"></div>' . $options['after_widget'];

return $options;
}
add_filter( 'builder_filter_register_sidebar_options', 'custom_filter_register_sidebar_options' );
</pre>

Source: http://ithemes.com/forum/index.php?/topic/11752-adding-top-and-bottom-images-to-widget-area/#p55547

== How to replace H4 tags around widget titles with divs ==

The following code can be added before the closing PHP tag in your child theme's functions.php file to remove the H4 tags from around the widget titles:

<pre class="brush:php;">
function custom_modify_widget_wrappers( $options ) {
$options['before_title'] = '<div class="widget-title">';
$options['after_title'] = '</div>';

return $options;
}
add_filter( 'builder_filter_register_sidebar_options', 'custom_modify_widget_wrappers' );
</pre>

[http://ithemes.com/forum/index.php?/topic/12052-builder-seo-issues-widget-heading-elements-semantic-markup/#p57074 Source].

Another example:

To replace h4 tags around widget titles with say h2, the following code can be used:

<pre class="brush:php;">
function custom_modify_widget_wrappers( $options ) {
$options['before_title'] = '<h2 class="widget-title">';
$options['after_title'] = '</h2>';

return $options;
}
add_filter( 'builder_filter_register_sidebar_options', 'custom_modify_widget_wrappers' );
</pre>

== How to add a search form at the right side in a nav bar ==

<gallery widths=400px caption="Before and After">
File:Search-in-nav-method2-before.png
File:Search-in-nav-method2-after.png
</gallery>

'''1.''' At Appearance -> Menus, build a custom menu having the items you would like to be shown on the nav bar.

'''2.''' Edit your layout and add a navigation module. Set it to show your custom menu.

'''3.''' Add the following before closing PHP tag in child theme's functions.php:

<pre class="brush:php;">
add_filter('wp_nav_menu_top-1_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();

$items .= '<li class="my-search-form">' . $searchform . '</li>';
return $items;
}
</pre>

In the above replace "top-1" with the slug of your custom menu.

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

<pre class="brush:css;">
.builder-module-navigation li.my-search-form {
float: right;
margin-right: 0.5em;
border-right: none;
}

#builder-module-4d8f8f64596b7 ul {
float: none;
}
</pre>

In the above replace builder-module-4d8f8f64596b7 with the ID of this module.

If you are using BuilderChild-City-Church, see [http://ithemes.com/forum/index.php?/topic/19945-search-box-in-navigation/#p94449 this] forum topic for sample CSS.

That's it!

Source: http://vanweerd.com/enhancing-your-wordpress-3-menus/

This method is also explained [http://ithemesbuilder.com/how-to-add-a-items-to-builders-navigation-menus/ here].

==Links to specific customization requests==

===Designing a widgetized footer===

[[Image:IWfo.16-04-2011 14-01-22.png|800px|none]]

[http://ithemes.com/forum/index.php?/topic/13449-designing-a-widgetised-footer/#p62860 Forum post]

===Positioning images at a fixed location in all widgets===

[[Image:3wa5.16-04-2011 14-22-06.png|800px|none]]

[http://ithemes.com/forum/index.php?/topic/13430-ionic-widget-height/#p62862 Forum post]

===Setting up Go To Top named anchor===

[http://ithemes.com/forum/index.php?/topic/14119-main-custom-navigation-menu-problems-in-safari-browser/#p65897 Forum post]

== builder_comments_popup_link action explained ==

The builder_comments_popup_link action triggers the builder_comments_popup_link() function by default. This function calls the comments_popup_link() function of WordPress but it also ensures that the link should be shown. For instance, the link should not be shown if the comments have been disabled for that content type per Builder's settings, if both comments and pings are disabled, or if a password is required in order to view the content and it has not been entered yet.

So keeping that call in place is very important. It can still be customized in the same way a comments_popup_link() function call is customized. Let's break out the arguments to see how that is done:

<pre class="brush:php;">
<?php
do_action(
'builder_comments_popup_link',
'<div class="alignright_comments"><span class="comments">',
'</span></div>',
__( 'Add Your Comment %s', 'it-l10n-Builder' ),
__( '(0)', 'it-l10n-Builder' ),
__( '(1)', 'it-l10n-Builder' ),
__( '(%)', 'it-l10n-Builder' )
);
?>
</pre>

Now let's see that listing again while replacing the arguments with their meaning:

<pre class="brush:php;">
<?php
do_action(
action name,
content to add before link,
content to add after link,
template which has %s replaced with the output from comments_popup_link,
comments_popup_link argument zero comments,
comments_popup_link argument one comment,
comments_popup_link argument more than one comment,
);
?>
</pre>

So if you know how to modify comments_popup_link, you should now see how you can modify this action call.

Note that all the __( 'text', 'it-l10n-Builder' ) stuff is just for translation purposes. So __( '(%)', 'it-l10n-Builder' ) just means '(%)'.

'''Usage Example'''

To have an image and the words "Add your Comment" with the image and text being a link:

Since the comments_popup_link() arguments are the ones added to the link, to add an image to the link, we need to modify those arguments. Here's a quick example:

<pre class="brush:php;">
<?php
$image_url = get_bloginfo( 'template_directory' ) . '/images/folder.png';
$image = "<img src='$image_url' alt='comments' />";

do_action(
'builder_comments_popup_link',
'<div class="alignright_comments"><span class="comments">',
'</span></div>',
'Add Your Comment %s',
"$image (0)",
"$image (1)",
"$image (%)"
);
?>
</pre>

Of course, this adds the folder icon and not a comment icon, but hopefully you can see what we are doing here and use it to add your own image. Note that get_bloginfo( 'template_directory' ) returns the base URL to the Builder directory. To get your child theme's directory URL, you can use get_bloginfo( 'stylesheet_directory' ).

Source: http://ithemes.com/forum/index.php?/topic/14453-changing-comments-format/#p67520

== How to show "My Theme" menu only to specific users ==

If the following section of code is added to your child theme's functions.php file, "My Theme" menu will only be shown to the user with a username of "admin".

<pre class="brush:php;">
function child_theme_restrict_my_theme_menu() {
$user = wp_get_current_user();

if ( 'admin' !== $user->user_login )
remove_theme_support( 'builder-my-theme-menu' );
}
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
</pre>

If you want to use a different username, replace "admin" text on the fourth line with the username you want to use. For example, to make it only show for username "james", it would look like:

<pre class="brush:php;">
function child_theme_restrict_my_theme_menu() {
$user = wp_get_current_user();

if ( 'james' !== $user->user_login )
remove_theme_support( 'builder-my-theme-menu' );
}
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
</pre>

The sample code below shows how to hide "My Theme" menu from everyone except Super Admins. This is a feature specific to multisite WordPress installations.

<pre class="brush:php;">
function child_theme_restrict_my_theme_menu() {
if ( ! is_super_admin() )
remove_theme_support( 'builder-my-theme-menu' );
}
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
</pre>

== How to redirect attachment links to corresponding posts ==

Search engine results might show links from your site leading to attachment pages which are not really that useful to the visitors. If you would like to have these links redirect to their corresponding post pages, follow this:

Duplicate ''image.php'' from Builder Parent theme into your child theme directory, then replace the entire content of image.php (the one in your child theme directory) with:

<pre class="brush:php;">
<?php wp_redirect(get_permalink($post->post_parent)); ?>
</pre>

Forum topic: http://ithemes.com/forum/index.php?/topic/17644-how-can-i-find-and-delete-a-attachment-id-page/

More: http://wordpress.org/support/topic/disable-attachment-posts-without-remove-the-medias and http://wordpress.org/support/topic/redirect-attachment-page-to-post-page-how-to

== How to view debug info in page source ==

Add <code>?builder_debug=1</code> at the end of webpage URL.

Ex.: If the page URL is http://ithemesbuilder.com/how-to-add-easy-social-icons-in-the-wordpress-navigation-menu/, visit http://ithemesbuilder.com/how-to-add-easy-social-icons-in-the-wordpress-navigation-menu/?builder_debug=1 and view the page source. It should show Builder specific info like this:

[[File:2012-04-03 20-25-50.png|697px|thumb|none]]

== How to remove Header widget ==

Adding the following code in child theme's functions.php at the end (before closing PHP tag, if present) will remove Builder's Header widget from Appearance -> Widgets.

<pre class="brush:php;">
function unregister_some_widgets() {
unregister_widget('BuilderHeaderWidget');
}
add_action('widgets_init', 'unregister_some_widgets', 1);
</pre>

== How to set up print stylesheet such that only the content gets printed ==

'''1.''' Copy <code>header.php</code> from parent Builder directory into the child theme directory and edit it.

Add

<pre class="brush:php;">
<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo( 'stylesheet_directory' ); ?>/print.css" />
</pre>

below

<pre class="brush:php;">
<?php builder_add_stylesheets(); ?>
</pre>

'''2.''' Create a file named <code>print.css</code> in child theme directory having this code:

<pre class="brush:css;">
.builder-module {
display: none;
}

.builder-module-content .builder-module-sidebar-outer-wrapper {
display: none;
}

.builder-module-content {
display: block;
}
</pre>

Source: http://ithemes.com/forum/topic/8611-printing-problems-with-builder-help-going-live-in-7-days/#entry44752

== How to force CSS changes to "go live" immediately ==

Intro: http://markjaquith.wordpress.com/2009/05/04/force-css-changes-to-go-live-immediately/

This can be done in Builder by first making sure that the default stylesheet does not load, and then load the version with file modification date appended.

Add the following code at the end of your child themes <code>functions.php</code> (but before the closing <code>?></code>, if any):

<pre class="brush: php; gutter: false;">
// disable loading the default stylesheet
function custom_filter_disable_theme_stylesheets( $disable ) {
return true;
}
add_filter( 'builder_filter_disable_theme_stylesheets', 'custom_filter_disable_theme_stylesheets', 20 );

// add the versioned stylesheet
function custom_add_new_stylesheet() { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
<?php
}
add_action( 'builder_add_stylesheets', 'custom_add_new_stylesheet' );
</pre>

Source: http://ithemes.com/forum/topic/31621-reloading-stylecss-after-every-change/#entry146840

== How to left/right align a YouTube video ==

When a responsive-ready child theme is active, wrapping YouTube Embed code with

<pre class="brush: html; gutter: false;">
<div style="float: left;">
</pre>
or
<pre class="brush: html; gutter: false;">
<div style="float: right;">
</pre>

and

<pre class="brush: html; gutter: false;">
</div>
</pre>

Ex.:

<pre class="brush: html; gutter: false;">
<div style="float: right;"><iframe width="560" height="315" src="http://www.youtube.com/embed/DSwQ4Mim28I?list=UUXSQU9bJhGWGvKGtfL-tuag" frameborder="0" allowfullscreen></iframe>
</pre>

will not display the video at all on the Page/Post.

The solution if floating is desired is to ensure that the floated element has a width associated with it. In order to prevent breaking the fluidity of the video, width should be set with a max-width and a width of 100% as shown below.

<pre class="brush: html; gutter: false;">
<div style="float: right; max-width: 560px; width: 100%;"><iframe width="560" height="315" src="http://www.youtube.com/embed/DSwQ4Mim28I?list=UUXSQU9bJhGWGvKGtfL-tuag" frameborder="0" allowfullscreen></iframe></div>
</pre>

Forum topic: http://ithemes.com/forum/topic/34643-div-float-right-youtube-video-disappearing/

== How to set a default placeholder text in Search box ==

[[File:2013-02-12 20-47-26.png|216px|thumb|none]]

[[File:2013-02-12 20-47-38.png|204px|thumb|none]]

If you would like to set a default text in search box that goes away when the search field gets focus AND your active child theme does not already have a <code>searchform.php</code>, do this:

Create a file named <code>searchform.php</code> in child theme's directory having the following code:

<pre class="brush:css; gutter: false;">
<?php $search_box_default = __( 'Search site', 'it-l10n-BuilderChild-Default' ); ?>

<?php $search_box_value = esc_attr( apply_filters( 'the_search_query', get_search_query() ) ); ?>

<?php $search_box_value = ( empty( $search_box_value ) ) ? $search_box_default : $search_box_value; ?>

<form method="get" class="search-form" action="<?php echo get_option( 'home' ); ?>">
<input type="text" value="<?php echo $search_box_value; ?>" name="s" class="search-text-box" onfocus="if(this.value == '<?php echo $search_box_default; ?>') this.value = '';" onblur="if(this.value == '') this.value = '<?php echo $search_box_default; ?>';" />
<input type="submit" value="<?php echo esc_attr__( 'Search', 'it-l10n-BuilderChild-Default' ); ?>" class="search-submit-button" />
</form>
</pre>

The default text can be changed in the first line. Just replace <code>Search site</code> with your desired default placeholder text.

Optional: Replace <code>Default</code> in <code>it-l10n-BuilderChild-Default</code> above with the name of your active child theme.

== How to add support for Sidebars in Navigation Module ==

It is possible to add sidebar(s) in a Navigation Module by adding the following in child theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">
add_theme_support( 'builder-navigation-module-sidebars' );
</pre>

Note: This is presently an experimental feature.

As such the graphic representing the Navigation Module in layout manager will not change to reflect the presence and arrangement of sidebar(s).

Below is an example of using this to add social media icons floating to the right in the nav bar with BuilderChild-Default as the active theme.

But first the result:

[[File:WordPress Dev Site 2013-05-30 13-08-04.png|800px|thumb|none]]

In the backend:

[[File:2013-05-30 12-55-18.png|625px|thumb|none]]

[[File:2013-05-30 12-57-43.png|661px|thumb|none]]

[[File:WordPress Dev Site 2013-05-30 13-13-19.png|800px|thumb|none]]

With [http://wordpress.org/plugins/social-media-widget/ Social Media Widget plugin] installed and activated, its widget has been placed in the Navigation Module's sidebar.

[[File:2013-05-30 13-02-45.png|202px|thumb|none]]

and this CSS added at end of child theme's <code>style.css</code>:

<pre class="brush:css; gutter: false;">
.builder-module-navigation .builder-module-sidebar {
background: transparent;
padding-top: 0;
padding-bottom: 0;
}

.builder-module-navigation .widget {
padding: 0;
padding-right: 0.5em;
}

.builder-module-navigation .widget a {
display: inline;
}

.socialmedia-buttons img {
padding-top: 0.5em;
}
</pre>

Builder Tips and Tricks

2013-05-30T07:45:01Z

Sridhar: /* How to add support for Sidebars in Navigation Module */

== Create custom blog page template for Builder ==
* '''Why''': Although builder generates a blog index page using the content module, in some cases you might want to create your own listing of blog posts. Perhaps to select posts only from a specific category, or for whatever other reasons you can think of.
* '''How''': [http://codex.wordpress.org/Function_Reference/query_posts query_posts] is a WordPress function that allows you to write your own WordPress loop. In Builder, the easiest way to create such a blog page is to
**[http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates create a page template],
**upload to your WordPress site,
**write a new page (no need to add content),
**select the newly created page template,
**and publish the page.
Your page template should look something like this:
<pre class="brush:php; highlight: [22]">
<?php
/*
Template Name: Custom Blog Index Page
*/
?>
<?php

function render_content() {

?>

<?php $paged = ( get_query_var('paged') ) ? get_query_var( 'paged' ) : 1; ?>
<?php query_posts( 'paged='. $paged . '&posts_per_page=' . get_option( 'posts_per_page' ) ); ?>

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( current_theme_supports( 'post-thumbnails' ) ) : ?>
<?php the_post_thumbnail( array( 125, 125 ), array( 'class' => 'thumb' ) ); ?>
<?php endif; ?>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php the_time( __( 'l, F j, Y', 'it-l10n-Builder' ) ); ?>
<?php the_content_limit( 250, "more »" ); ?>
<?php endwhile; ?>

<div class="alignleft"><?php previous_posts_link('« Previous Page') ?></div>
<div class="alignright"><?php next_posts_link('Next Page »') ?></div>
<?php endif; ?>

<?php

}

add_action( 'builder_layout_engine_render_content', 'render_content' );

do_action( 'builder_layout_engine_render', basename( __FILE__ ) );

?>
</pre>
'''Important Note 1''': the actual content part (post header, date and content) is simplified, refer to the Child Themes index.php to see how it is actually coded for that specific Child Theme.
'''Important Note 2''': the content is displayed using <tt>the_content_limit(250, "more »")</tt> (see highlighted line), a function described in [[#Limit_the_content_of_a_post_that_is_displayed_on_a_blog_index_page|another tip on this page]]. You can use <tt>[http://codex.wordpress.org/Function_Reference/the_content the_content()]</tt> or <tt>[http://codex.wordpress.org/Function_Reference/the_excerpt the_excerpt()]</tt>, depending on your requirements.

== Limit the content of a post that is displayed on a blog index page ==
* '''Why''': In some cases, <code>the_content()</code> or <code>the_excerpt()</code> just don't fit your requirements.
* '''How''': Using a new function allows you to specify the number of characters you want to display on the blog index page, and what to use as the "more" text. Add the following [[function]] to your [[Child Theme|child theme's]] [[functions.php]].
<pre class="brush:php">
function the_content_limit($max_char, $more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
$content = get_the_content($more_link_text, $stripteaser, $more_file);
$content = apply_filters('the_content', $content);

if (strlen($_GET['p']) > 0) {
echo $content;
}
else if ((strlen($content)>$max_char) && ($space = strpos($content, " ", $max_char ))) {
$content = substr($content, 0, $space);
echo $content = $content . " <a href='"; the_permalink(); echo "'>".$more_link_text."</a>";
}
else {
echo $content;
}
}
</pre>
''(Note: 95% of the code is based on [http://labitacora.net/software-libre/plugin-for-limit-the-size-of-the-post-in-the-main-page-in-wordpress/ this plugin by Alfonso Sanchez-Paus Diaz and Julian Simon de Castro]).''
* '''Implementation''': Add the code to your blog index template file as described in the [[#Create_your_own_blog_index_page_in_Builder|Create your own blog index page in Builder]] tip.

== Add a full width Header and/or Footer to your Builder theme ==
* '''Why''': Because you want to
* '''How''': Detailed instructions in [http://vanweerd.com/how-to-add-full-width-header-and-footer-to-the-builder-theme/ this article].

Note: See http://ithemes.com/forum/topic/31075-getting-fatal-error/page__view__findpost__p__144435 for updated code.

== How to have full width (100% wide background) modules ==

=== When using responsive-ready child themes ===

These child themes have version number of at least 4.0. The current list of responsive-ready Builder child themes can be seen [http://ithemes.com/codex/page/Builder_Features#List_of_responsive-ready_Builder_child_themes here].

Add the following at the end of child theme's <code>functions.php</code> (WP dashboard -> Appearance -> Editor):

<pre class="brush:php;">
add_theme_support( 'builder-full-width-modules' );
</pre>

'''Note''':

# For simplicity sake, we say "full width modules". Technically speaking, it is not the modules that become full width, but their background wrappers.
# Few child themes like Expansion and all its color variants have the above line in their <code>functions.php</code> out of the box. In such cases, do not add it again.
# All custom CSS code should be placed at end of child theme's style.css.

{| class="wikitable"
|+ '''Before & After screenshots showing the effect of adding above line of code in Default child theme'''
! scope="col" | Before
! scope="col" | After
|-
| [[File:My Test Site 2013-01-01 10-49-01.png|475px|thumb|none]]
|| [[File:My Test Site 2013-01-01 10-49-27.png|475px|thumb|none]]

|}

==== Structural change as a result of adding above line of code ====

<u>Before</u>

<pre class="brush:css;">
.builder-container-outer-wrapper {
max-width: 960px;
width: 100%;
}
</pre>

(where 960 is the layout width)

<u>After</u>

<pre class="brush:css;">
.builder-container-outer-wrapper {
width: 100%;
}
</pre>

Note: In [http://ithemes.com/forum/topic/35775-full-width-modules-with-responsive-turned-off-builder-4011/#entry165354 few cases], we have observed that <code>.builder-container-outer-wrapper</code> isn't automatically becoming 100%. This can be observed using Firebug. In such cases, the following CSS should be used:

<pre class="brush:css;">
.builder-container-outer-wrapper {
width: 100% !important;
}
</pre>

==== How to set background of full width modules ====

===== All modules =====

If you would like to set the same background to every module of all layouts, i.e., throughout the site in a single shot, use the following sample CSS:

<pre class="brush:css;">
.builder-module-background-wrapper {
background: gray;
}
</pre>

[[File:My Test Site 2013-01-01 11-42-10.png|475px|thumb|none]]

===== A specific module based on its ID =====

If you would like to set a background to a specific full width module, use the following sample CSS:

<pre class="brush:css;">
#builder-module-50842a8824755-background-wrapper {
background: yellow;
}
</pre>

where 50842a8824755 is the ID of module in question.

[[File:My Test Site 2013-01-01 11-19-53.png|800px|thumb|none]]

The easiest way to obtain the CSS ID is by using Firebug. Below screenshot shows where <code>builder-module-50842a8824755-background-wrapper</code> can be found.

[[File:2013-01-01 11-15-31.png|800px|thumb|none]]

===== A specific module based on its position =====

It is also possible to set background of a full width module based on its position in the layout from top. For example, the following sample CSS sets yellow background to top most modules of all layouts i.e, throughout the site.

<pre class="brush:css;">
.builder-module-1-background-wrapper {
background: yellow;
}
</pre>

[[File:2013-01-01 11-35-10.png|800px|thumb|none]]

===== All modules of a certain type =====

It is also possible to set background of full width modules based on '''module type'''. For example, the following sample CSS sets yellow background to all widget bar modules in all layouts i.e, throughout the site.

<pre class="brush:css;">
.builder-module-widget-bar-background-wrapper {
background: yellow;
}
</pre>

[[File:My Test Site 2013-01-01 11-38-02.png|432px|thumb|none]]

=== When using non responsive-ready child themes ===

The following applies to all themes other than Acute (and its color variants), Americana (and its color variants), City Church, Blueprint, Scooter, Kepler, Lucky 7, Thinner, Traverse. All the module wrappers in these said child themes are full width by default.

Note:

'''1.''' PHP code given in the sections below should be put in your child theme's functions.php. If this file does not exist, create a new blank file, paste the code in between ''<?php'' and ''?>'', save it as functions.php and upload it to the child theme directory.

'''2.''' To set width of specific module(s) full width, the module(s) should be targeted by its/their GUID. The easiest method to obtain GUID of a module is by inspecting the module via Firebug.

[[Image:GUID.png|200px|none]]

In the example shown in the above screenshot, GUID of the module is: 4d14470049da5

'''3.''' To observe a module becoming full width, set a background color or image or both.

==== To make a specific single module full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Specific-module-full-width-before.png
File:Specific-module-full-width-after.png
</gallery>

* The following has been added to child theme's style.css to see the effect of module going full width:
<pre class="brush:php;">#builder-module-4d14470049da5 {
background-color: yellow;
}</pre>
* In the code below, 4d14470049da5 must be replaced with GUID of the specific module which is to be made full width

Code in functions.php:

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
$full_width_modules = array( '4d14470049da5' );

if ( ! in_array( $fields['guid'], $full_width_modules ) )
return $fields;
foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make specific multiple modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

===== By Module Types =====

By adding the following sample code before the closing PHP tag in child theme's functions.php, all Widget Bar modules, all Navigation modules and the Footer module will become full-width.

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
$full_width_modules = array( 'widget-bar','navigation','footer' );

if ( ! in_array( $fields['module'], $full_width_modules ) )
return $fields;
foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

The other available module types in Builder are: image, content, html

===== By Module IDs =====

<gallery widths=200px caption="Before and After">
File:Specific-modules-full-width-before.png
File:Specific-modules-full-width-after.png
</gallery>

* The following has been added to child theme's style.css to see the effect of module going full width:
<pre class="brush:php;">#builder-module-4d14470049da5, #builder-module-4d14470049da7 {
background-color: yellow;
}</pre>
* In the code below, 4d14470049da5 and 4d14470049da7 must be replaced with GUID of specific modules which are to be made full width

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
$full_width_modules = array( '4d14470049da5','4d14470049da7' );

if ( ! in_array( $fields['guid'], $full_width_modules ) )
return $fields;
foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all Image modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Image-modules-fullwidth-before.png
File:Image-modules-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of all image modules (only 1 is being used in the screenshot above)) going full width:
<pre class="brush:php;">.builder-module-image {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'image' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all Navigation modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Image-modules-fullwidth-before.png
File:Navigation-modules-fullwidth-after.png
</gallery>

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'navigation' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make Content module full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Image-modules-fullwidth-before.png
File:Content-module-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of content module going full width:
<pre class="brush:php;">.builder-module-content {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'content' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all HTML modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Html-modules-fullwidth-before.png
File:Html-modules-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of all HTML modules (only 1 is being used in the screenshot above) going full width:
<pre class="brush:php;">.builder-module-html {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'html' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all Widget Bar modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Widget-bar-modules-fullwidth-before.png
File:Widget-bar-modules-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of widget bar modules going full width:
<pre class="brush:php;">.builder-module-widget-bar {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'widget-bar' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make Footer module full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Specific-module-full-width-before.png
File:Footer-module-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of Footer module going full width:
<pre class="brush:php;">.builder-module-footer {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'footer' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

In this method we are going to add code to functions.php that will make outer wrappers of all modules full width.

[http://d.pr/iH9x Before] -> [http://d.pr/bdwr After]

'''Code in functions.php''':

<pre class="brush:php;">
function it_set_full_width_container( $width ) {
remove_filter( 'builder_get_container_width', 'it_set_full_width_container' );

return '';
}
add_filter( 'builder_get_container_width', 'it_set_full_width_container' );

function it_set_full_width_module( $fields ) {

global $it_original_module_width;

$it_original_module_width = '';

foreach ( (array) $fields['attributes']['style'] as $index => $value ) {
if ( preg_match( '/^(width:.+)/i', $value, $matches ) ) {
$it_original_module_width = $matches[1];
unset( $fields['attributes']['style'][$index] );
}
if ( preg_match( '/^overflow:/', $value ) ) {
unset( $fields['attributes']['style'][$index] );
$fields['attributes']['style'][] = 'overflow:visible;';
}
}
add_filter( 'builder_module_filter_inner_wrapper_attributes', 'it_constrain_full_width_module_inner_wrapper' );

return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'it_set_full_width_module' );

function it_constrain_full_width_module_inner_wrapper( $fields ) {
global $it_original_module_width;

remove_filter( 'builder_module_filter_inner_wrapper_attributes', 'it_constrain_full_width_module_inner_wrapper' );

$fields['attributes']['style'][] = $it_original_module_width;
$fields['attributes']['style'][] = 'margin:0 auto;';

$it_original_module_width = '';

return $fields;
}
</pre>

The following has been added to child theme's style.css to see the effect of all modules going full width:

<pre class="brush:php;">
.builder-module-image-outer-wrapper {
background-color: #247da7;
}

.builder-module-navigation-outer-wrapper {
background: #e0e2e3;
}

.builder-module-html-outer-wrapper {
background: #9ba1ac;
border-bottom: 0.1em dotted #CCCCCC;
}

.builder-module-content-outer-wrapper {
background: #1d313f;
}

.builder-module-widget-bar-outer-wrapper {
background: #262626;
border-bottom: 0.1em dotted #CCCCCC;
}

.builder-module-footer-outer-wrapper {
background-color: #bbbbbb;
}</pre>

If you would like to apply different styles to different modules of the same type when using this method, use [http://ithemes.com/codex/page/Builder_Features#Custom_Module_Styles Custom Module Styles].

Ex.: Let's say there are two widget bar modules in the layout and using the above method, both would become full width. Now if you would like to set red background to one of these widget bar module and green to another, then you have to create two custom module styles for these and use them.

To see how these are implemented, observe functions.php and style.css of Blueprint or Americana child theme.

The overall idea is this:

# Register the new module style using builder_register_module_style() function
# Add a new style rule in child theme's style.css. For the selector name use a class with the name of module style and append "-outer-wrapper" at end.

For details, please see [http://ithemes.com/forum/index.php?/topic/9420-americana-theme-how-do-i-get-away-from-fixed-width-layout/#p44290 Example 1], [http://ithemes.com/forum/index.php?/topic/10030-modification-to-americana-theme/#p47025 Example 2] and [http://ithemes.com/codex/page/BuilderChild-Blueprint#How_to_make_nav_bars_go_full_width Example 3].

==To change widget titles from the default h4 to any other heading tag==

Go to http://ithemes.com/forum/index.php?/topic/10724-widget-tags-how-to-change/#p50888

== How to extend sidebar and/or content background so they reach till the bottom ==

Create a 1px tall image and set it to vertically repeat as background for .builder-module-content. This image can either be created from scratch or by taking a screenshot of the site and editing in Photoshop.

The 10 min video below shows how this can be done. It shows how to create an image in Photoshop which can be set using CSS as background for Builder's content module so the sidebar(s) and element (the actual content) appear to extend all the way to the bottom.

Tip: To watch the video in full screen, go to http://vimeo.com/19781283 and click the small 4-arrow button.

{{#ev:vimeo|19781283|800}}

Relevant forum topics:

http://ithemes.com/forum/index.php?/topic/8265-foundation-child-theme-color-bleed-in-main-area/#p38894

http://ithemes.com/forum/index.php?/topic/11301-need-sidebars-to-extend-to-bottom-of-page/

http://ithemes.com/forum/index.php?/topic/9013-here-we-are-again-sidebar-bg-color/

http://ithemes.com/forum/index.php?/topic/8363-sidebar-styling-to-continue-vertically-for-entire-module-height/

http://ithemes.com/forum/index.php?/topic/876-the-endless-quest-for-equal-column-heights/

== How to add code just after <body> and just before </body> ==

Add the following in your child theme's functions.php. If the child theme does not contain this file, a new one can be created and the below code pasted.

<pre class="brush:php;">
<?php
add_action('builder_layout_engine_render_header', 'add_after_opening_body', 20 );
function add_after_opening_body() { ?>
HTML code that you want just after the opening body tag should be placed here
<?php }

add_action('builder_finish', 'add_before_closing_body', 0 );
function add_before_closing_body() { ?>
HTML code that you want just before the closing body tag should be placed here
<?php }
?>
</pre>

Sources: [http://vanweerd.com/how-to-add-full-width-header-and-footer-to-the-builder-theme/ 1], [http://ithemes.com/codex/page/Builder_Hooks 2].

== How to add code before and after each widget ==

Here's an example that shows how we can add <pre><div class="custom_top"></div></pre> before every widget and <pre><div class="custom_bottom"></div></pre> after every widget.

Add the following to the child theme's functions.php:

<pre class="brush:php;">
function custom_filter_register_sidebar_options( $options ) {
$options['before_widget'] = $options['before_widget'] .'<div class="custom_top"></div>';
$options['after_widget'] = '<div class="custom_bottom"></div>' . $options['after_widget'];

return $options;
}
add_filter( 'builder_filter_register_sidebar_options', 'custom_filter_register_sidebar_options' );
</pre>

Source: http://ithemes.com/forum/index.php?/topic/11752-adding-top-and-bottom-images-to-widget-area/#p55547

== How to replace H4 tags around widget titles with divs ==

The following code can be added before the closing PHP tag in your child theme's functions.php file to remove the H4 tags from around the widget titles:

<pre class="brush:php;">
function custom_modify_widget_wrappers( $options ) {
$options['before_title'] = '<div class="widget-title">';
$options['after_title'] = '</div>';

return $options;
}
add_filter( 'builder_filter_register_sidebar_options', 'custom_modify_widget_wrappers' );
</pre>

[http://ithemes.com/forum/index.php?/topic/12052-builder-seo-issues-widget-heading-elements-semantic-markup/#p57074 Source].

Another example:

To replace h4 tags around widget titles with say h2, the following code can be used:

<pre class="brush:php;">
function custom_modify_widget_wrappers( $options ) {
$options['before_title'] = '<h2 class="widget-title">';
$options['after_title'] = '</h2>';

return $options;
}
add_filter( 'builder_filter_register_sidebar_options', 'custom_modify_widget_wrappers' );
</pre>

== How to add a search form at the right side in a nav bar ==

<gallery widths=400px caption="Before and After">
File:Search-in-nav-method2-before.png
File:Search-in-nav-method2-after.png
</gallery>

'''1.''' At Appearance -> Menus, build a custom menu having the items you would like to be shown on the nav bar.

'''2.''' Edit your layout and add a navigation module. Set it to show your custom menu.

'''3.''' Add the following before closing PHP tag in child theme's functions.php:

<pre class="brush:php;">
add_filter('wp_nav_menu_top-1_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();

$items .= '<li class="my-search-form">' . $searchform . '</li>';
return $items;
}
</pre>

In the above replace "top-1" with the slug of your custom menu.

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

<pre class="brush:css;">
.builder-module-navigation li.my-search-form {
float: right;
margin-right: 0.5em;
border-right: none;
}

#builder-module-4d8f8f64596b7 ul {
float: none;
}
</pre>

In the above replace builder-module-4d8f8f64596b7 with the ID of this module.

If you are using BuilderChild-City-Church, see [http://ithemes.com/forum/index.php?/topic/19945-search-box-in-navigation/#p94449 this] forum topic for sample CSS.

That's it!

Source: http://vanweerd.com/enhancing-your-wordpress-3-menus/

This method is also explained [http://ithemesbuilder.com/how-to-add-a-items-to-builders-navigation-menus/ here].

==Links to specific customization requests==

===Designing a widgetized footer===

[[Image:IWfo.16-04-2011 14-01-22.png|800px|none]]

[http://ithemes.com/forum/index.php?/topic/13449-designing-a-widgetised-footer/#p62860 Forum post]

===Positioning images at a fixed location in all widgets===

[[Image:3wa5.16-04-2011 14-22-06.png|800px|none]]

[http://ithemes.com/forum/index.php?/topic/13430-ionic-widget-height/#p62862 Forum post]

===Setting up Go To Top named anchor===

[http://ithemes.com/forum/index.php?/topic/14119-main-custom-navigation-menu-problems-in-safari-browser/#p65897 Forum post]

== builder_comments_popup_link action explained ==

The builder_comments_popup_link action triggers the builder_comments_popup_link() function by default. This function calls the comments_popup_link() function of WordPress but it also ensures that the link should be shown. For instance, the link should not be shown if the comments have been disabled for that content type per Builder's settings, if both comments and pings are disabled, or if a password is required in order to view the content and it has not been entered yet.

So keeping that call in place is very important. It can still be customized in the same way a comments_popup_link() function call is customized. Let's break out the arguments to see how that is done:

<pre class="brush:php;">
<?php
do_action(
'builder_comments_popup_link',
'<div class="alignright_comments"><span class="comments">',
'</span></div>',
__( 'Add Your Comment %s', 'it-l10n-Builder' ),
__( '(0)', 'it-l10n-Builder' ),
__( '(1)', 'it-l10n-Builder' ),
__( '(%)', 'it-l10n-Builder' )
);
?>
</pre>

Now let's see that listing again while replacing the arguments with their meaning:

<pre class="brush:php;">
<?php
do_action(
action name,
content to add before link,
content to add after link,
template which has %s replaced with the output from comments_popup_link,
comments_popup_link argument zero comments,
comments_popup_link argument one comment,
comments_popup_link argument more than one comment,
);
?>
</pre>

So if you know how to modify comments_popup_link, you should now see how you can modify this action call.

Note that all the __( 'text', 'it-l10n-Builder' ) stuff is just for translation purposes. So __( '(%)', 'it-l10n-Builder' ) just means '(%)'.

'''Usage Example'''

To have an image and the words "Add your Comment" with the image and text being a link:

Since the comments_popup_link() arguments are the ones added to the link, to add an image to the link, we need to modify those arguments. Here's a quick example:

<pre class="brush:php;">
<?php
$image_url = get_bloginfo( 'template_directory' ) . '/images/folder.png';
$image = "<img src='$image_url' alt='comments' />";

do_action(
'builder_comments_popup_link',
'<div class="alignright_comments"><span class="comments">',
'</span></div>',
'Add Your Comment %s',
"$image (0)",
"$image (1)",
"$image (%)"
);
?>
</pre>

Of course, this adds the folder icon and not a comment icon, but hopefully you can see what we are doing here and use it to add your own image. Note that get_bloginfo( 'template_directory' ) returns the base URL to the Builder directory. To get your child theme's directory URL, you can use get_bloginfo( 'stylesheet_directory' ).

Source: http://ithemes.com/forum/index.php?/topic/14453-changing-comments-format/#p67520

== How to show "My Theme" menu only to specific users ==

If the following section of code is added to your child theme's functions.php file, "My Theme" menu will only be shown to the user with a username of "admin".

<pre class="brush:php;">
function child_theme_restrict_my_theme_menu() {
$user = wp_get_current_user();

if ( 'admin' !== $user->user_login )
remove_theme_support( 'builder-my-theme-menu' );
}
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
</pre>

If you want to use a different username, replace "admin" text on the fourth line with the username you want to use. For example, to make it only show for username "james", it would look like:

<pre class="brush:php;">
function child_theme_restrict_my_theme_menu() {
$user = wp_get_current_user();

if ( 'james' !== $user->user_login )
remove_theme_support( 'builder-my-theme-menu' );
}
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
</pre>

The sample code below shows how to hide "My Theme" menu from everyone except Super Admins. This is a feature specific to multisite WordPress installations.

<pre class="brush:php;">
function child_theme_restrict_my_theme_menu() {
if ( ! is_super_admin() )
remove_theme_support( 'builder-my-theme-menu' );
}
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
</pre>

== How to redirect attachment links to corresponding posts ==

Search engine results might show links from your site leading to attachment pages which are not really that useful to the visitors. If you would like to have these links redirect to their corresponding post pages, follow this:

Duplicate ''image.php'' from Builder Parent theme into your child theme directory, then replace the entire content of image.php (the one in your child theme directory) with:

<pre class="brush:php;">
<?php wp_redirect(get_permalink($post->post_parent)); ?>
</pre>

Forum topic: http://ithemes.com/forum/index.php?/topic/17644-how-can-i-find-and-delete-a-attachment-id-page/

More: http://wordpress.org/support/topic/disable-attachment-posts-without-remove-the-medias and http://wordpress.org/support/topic/redirect-attachment-page-to-post-page-how-to

== How to view debug info in page source ==

Add <code>?builder_debug=1</code> at the end of webpage URL.

Ex.: If the page URL is http://ithemesbuilder.com/how-to-add-easy-social-icons-in-the-wordpress-navigation-menu/, visit http://ithemesbuilder.com/how-to-add-easy-social-icons-in-the-wordpress-navigation-menu/?builder_debug=1 and view the page source. It should show Builder specific info like this:

[[File:2012-04-03 20-25-50.png|697px|thumb|none]]

== How to remove Header widget ==

Adding the following code in child theme's functions.php at the end (before closing PHP tag, if present) will remove Builder's Header widget from Appearance -> Widgets.

<pre class="brush:php;">
function unregister_some_widgets() {
unregister_widget('BuilderHeaderWidget');
}
add_action('widgets_init', 'unregister_some_widgets', 1);
</pre>

== How to set up print stylesheet such that only the content gets printed ==

'''1.''' Copy <code>header.php</code> from parent Builder directory into the child theme directory and edit it.

Add

<pre class="brush:php;">
<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo( 'stylesheet_directory' ); ?>/print.css" />
</pre>

below

<pre class="brush:php;">
<?php builder_add_stylesheets(); ?>
</pre>

'''2.''' Create a file named <code>print.css</code> in child theme directory having this code:

<pre class="brush:css;">
.builder-module {
display: none;
}

.builder-module-content .builder-module-sidebar-outer-wrapper {
display: none;
}

.builder-module-content {
display: block;
}
</pre>

Source: http://ithemes.com/forum/topic/8611-printing-problems-with-builder-help-going-live-in-7-days/#entry44752

== How to force CSS changes to "go live" immediately ==

Intro: http://markjaquith.wordpress.com/2009/05/04/force-css-changes-to-go-live-immediately/

This can be done in Builder by first making sure that the default stylesheet does not load, and then load the version with file modification date appended.

Add the following code at the end of your child themes <code>functions.php</code> (but before the closing <code>?></code>, if any):

<pre class="brush: php; gutter: false;">
// disable loading the default stylesheet
function custom_filter_disable_theme_stylesheets( $disable ) {
return true;
}
add_filter( 'builder_filter_disable_theme_stylesheets', 'custom_filter_disable_theme_stylesheets', 20 );

// add the versioned stylesheet
function custom_add_new_stylesheet() { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
<?php
}
add_action( 'builder_add_stylesheets', 'custom_add_new_stylesheet' );
</pre>

Source: http://ithemes.com/forum/topic/31621-reloading-stylecss-after-every-change/#entry146840

== How to left/right align a YouTube video ==

When a responsive-ready child theme is active, wrapping YouTube Embed code with

<pre class="brush: html; gutter: false;">
<div style="float: left;">
</pre>
or
<pre class="brush: html; gutter: false;">
<div style="float: right;">
</pre>

and

<pre class="brush: html; gutter: false;">
</div>
</pre>

Ex.:

<pre class="brush: html; gutter: false;">
<div style="float: right;"><iframe width="560" height="315" src="http://www.youtube.com/embed/DSwQ4Mim28I?list=UUXSQU9bJhGWGvKGtfL-tuag" frameborder="0" allowfullscreen></iframe>
</pre>

will not display the video at all on the Page/Post.

The solution if floating is desired is to ensure that the floated element has a width associated with it. In order to prevent breaking the fluidity of the video, width should be set with a max-width and a width of 100% as shown below.

<pre class="brush: html; gutter: false;">
<div style="float: right; max-width: 560px; width: 100%;"><iframe width="560" height="315" src="http://www.youtube.com/embed/DSwQ4Mim28I?list=UUXSQU9bJhGWGvKGtfL-tuag" frameborder="0" allowfullscreen></iframe></div>
</pre>

Forum topic: http://ithemes.com/forum/topic/34643-div-float-right-youtube-video-disappearing/

== How to set a default placeholder text in Search box ==

[[File:2013-02-12 20-47-26.png|216px|thumb|none]]

[[File:2013-02-12 20-47-38.png|204px|thumb|none]]

If you would like to set a default text in search box that goes away when the search field gets focus AND your active child theme does not already have a <code>searchform.php</code>, do this:

Create a file named <code>searchform.php</code> in child theme's directory having the following code:

<pre class="brush:css; gutter: false;">
<?php $search_box_default = __( 'Search site', 'it-l10n-BuilderChild-Default' ); ?>

<?php $search_box_value = esc_attr( apply_filters( 'the_search_query', get_search_query() ) ); ?>

<?php $search_box_value = ( empty( $search_box_value ) ) ? $search_box_default : $search_box_value; ?>

<form method="get" class="search-form" action="<?php echo get_option( 'home' ); ?>">
<input type="text" value="<?php echo $search_box_value; ?>" name="s" class="search-text-box" onfocus="if(this.value == '<?php echo $search_box_default; ?>') this.value = '';" onblur="if(this.value == '') this.value = '<?php echo $search_box_default; ?>';" />
<input type="submit" value="<?php echo esc_attr__( 'Search', 'it-l10n-BuilderChild-Default' ); ?>" class="search-submit-button" />
</form>
</pre>

The default text can be changed in the first line. Just replace <code>Search site</code> with your desired default placeholder text.

Optional: Replace <code>Default</code> in <code>it-l10n-BuilderChild-Default</code> above with the name of your active child theme.

== How to add support for Sidebars in Navigation Module ==

It is possible to add sidebar(s) in a Navigation Module by adding the following in child theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">
add_theme_support( 'builder-navigation-module-sidebars' );
</pre>

Note: This is presently an experimental feature.

As such the graphic representing the Navigation Module in layout manager will not change to reflect the presence and arrangement of sidebar(s).

Below is an example of using this to add social media icons floating to the right in the nav bar with BuilderChild-Default as the active theme.

But first the result:

[[File:WordPress Dev Site 2013-05-30 13-08-04.png|800px|thumb|none]]

In the backend:

[[File:2013-05-30 12-55-18.png|625px|thumb|none]]

[[File:2013-05-30 12-57-43.png|661px|thumb|none]]

[[File:WordPress Dev Site 2013-05-30 13-13-19.pn|800px|thumb|none]]

With [http://wordpress.org/plugins/social-media-widget/ Social Media Widget plugin] installed and activated, its widget has been placed in the Navigation Module's sidebar.

[[File:2013-05-30 13-02-45.png|202px|thumb|none]]

and this CSS added at end of child theme's <code>style.css</code>:

<pre class="brush:css; gutter: false;">
.builder-module-navigation .builder-module-sidebar {
background: transparent;
padding-top: 0;
padding-bottom: 0;
}

.builder-module-navigation .widget {
padding: 0;
padding-right: 0.5em;
}

.builder-module-navigation .widget a {
display: inline;
}

.socialmedia-buttons img {
padding-top: 0.5em;
}
</pre>

File:WordPress Dev Site 2013-05-30 13-13-19.png

2013-05-30T07:44:01Z

Sridhar:

Builder Tips and Tricks

2013-05-30T07:41:14Z

Sridhar: Added == How to add support for Sidebars in Navigation Module ==

== Create custom blog page template for Builder ==
* '''Why''': Although builder generates a blog index page using the content module, in some cases you might want to create your own listing of blog posts. Perhaps to select posts only from a specific category, or for whatever other reasons you can think of.
* '''How''': [http://codex.wordpress.org/Function_Reference/query_posts query_posts] is a WordPress function that allows you to write your own WordPress loop. In Builder, the easiest way to create such a blog page is to
**[http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates create a page template],
**upload to your WordPress site,
**write a new page (no need to add content),
**select the newly created page template,
**and publish the page.
Your page template should look something like this:
<pre class="brush:php; highlight: [22]">
<?php
/*
Template Name: Custom Blog Index Page
*/
?>
<?php

function render_content() {

?>

<?php $paged = ( get_query_var('paged') ) ? get_query_var( 'paged' ) : 1; ?>
<?php query_posts( 'paged='. $paged . '&posts_per_page=' . get_option( 'posts_per_page' ) ); ?>

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( current_theme_supports( 'post-thumbnails' ) ) : ?>
<?php the_post_thumbnail( array( 125, 125 ), array( 'class' => 'thumb' ) ); ?>
<?php endif; ?>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php the_time( __( 'l, F j, Y', 'it-l10n-Builder' ) ); ?>
<?php the_content_limit( 250, "more »" ); ?>
<?php endwhile; ?>

<div class="alignleft"><?php previous_posts_link('« Previous Page') ?></div>
<div class="alignright"><?php next_posts_link('Next Page »') ?></div>
<?php endif; ?>

<?php

}

add_action( 'builder_layout_engine_render_content', 'render_content' );

do_action( 'builder_layout_engine_render', basename( __FILE__ ) );

?>
</pre>
'''Important Note 1''': the actual content part (post header, date and content) is simplified, refer to the Child Themes index.php to see how it is actually coded for that specific Child Theme.
'''Important Note 2''': the content is displayed using <tt>the_content_limit(250, "more »")</tt> (see highlighted line), a function described in [[#Limit_the_content_of_a_post_that_is_displayed_on_a_blog_index_page|another tip on this page]]. You can use <tt>[http://codex.wordpress.org/Function_Reference/the_content the_content()]</tt> or <tt>[http://codex.wordpress.org/Function_Reference/the_excerpt the_excerpt()]</tt>, depending on your requirements.

== Limit the content of a post that is displayed on a blog index page ==
* '''Why''': In some cases, <code>the_content()</code> or <code>the_excerpt()</code> just don't fit your requirements.
* '''How''': Using a new function allows you to specify the number of characters you want to display on the blog index page, and what to use as the "more" text. Add the following [[function]] to your [[Child Theme|child theme's]] [[functions.php]].
<pre class="brush:php">
function the_content_limit($max_char, $more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
$content = get_the_content($more_link_text, $stripteaser, $more_file);
$content = apply_filters('the_content', $content);

if (strlen($_GET['p']) > 0) {
echo $content;
}
else if ((strlen($content)>$max_char) && ($space = strpos($content, " ", $max_char ))) {
$content = substr($content, 0, $space);
echo $content = $content . " <a href='"; the_permalink(); echo "'>".$more_link_text."</a>";
}
else {
echo $content;
}
}
</pre>
''(Note: 95% of the code is based on [http://labitacora.net/software-libre/plugin-for-limit-the-size-of-the-post-in-the-main-page-in-wordpress/ this plugin by Alfonso Sanchez-Paus Diaz and Julian Simon de Castro]).''
* '''Implementation''': Add the code to your blog index template file as described in the [[#Create_your_own_blog_index_page_in_Builder|Create your own blog index page in Builder]] tip.

== Add a full width Header and/or Footer to your Builder theme ==
* '''Why''': Because you want to
* '''How''': Detailed instructions in [http://vanweerd.com/how-to-add-full-width-header-and-footer-to-the-builder-theme/ this article].

Note: See http://ithemes.com/forum/topic/31075-getting-fatal-error/page__view__findpost__p__144435 for updated code.

== How to have full width (100% wide background) modules ==

=== When using responsive-ready child themes ===

These child themes have version number of at least 4.0. The current list of responsive-ready Builder child themes can be seen [http://ithemes.com/codex/page/Builder_Features#List_of_responsive-ready_Builder_child_themes here].

Add the following at the end of child theme's <code>functions.php</code> (WP dashboard -> Appearance -> Editor):

<pre class="brush:php;">
add_theme_support( 'builder-full-width-modules' );
</pre>

'''Note''':

# For simplicity sake, we say "full width modules". Technically speaking, it is not the modules that become full width, but their background wrappers.
# Few child themes like Expansion and all its color variants have the above line in their <code>functions.php</code> out of the box. In such cases, do not add it again.
# All custom CSS code should be placed at end of child theme's style.css.

{| class="wikitable"
|+ '''Before & After screenshots showing the effect of adding above line of code in Default child theme'''
! scope="col" | Before
! scope="col" | After
|-
| [[File:My Test Site 2013-01-01 10-49-01.png|475px|thumb|none]]
|| [[File:My Test Site 2013-01-01 10-49-27.png|475px|thumb|none]]

|}

==== Structural change as a result of adding above line of code ====

<u>Before</u>

<pre class="brush:css;">
.builder-container-outer-wrapper {
max-width: 960px;
width: 100%;
}
</pre>

(where 960 is the layout width)

<u>After</u>

<pre class="brush:css;">
.builder-container-outer-wrapper {
width: 100%;
}
</pre>

Note: In [http://ithemes.com/forum/topic/35775-full-width-modules-with-responsive-turned-off-builder-4011/#entry165354 few cases], we have observed that <code>.builder-container-outer-wrapper</code> isn't automatically becoming 100%. This can be observed using Firebug. In such cases, the following CSS should be used:

<pre class="brush:css;">
.builder-container-outer-wrapper {
width: 100% !important;
}
</pre>

==== How to set background of full width modules ====

===== All modules =====

If you would like to set the same background to every module of all layouts, i.e., throughout the site in a single shot, use the following sample CSS:

<pre class="brush:css;">
.builder-module-background-wrapper {
background: gray;
}
</pre>

[[File:My Test Site 2013-01-01 11-42-10.png|475px|thumb|none]]

===== A specific module based on its ID =====

If you would like to set a background to a specific full width module, use the following sample CSS:

<pre class="brush:css;">
#builder-module-50842a8824755-background-wrapper {
background: yellow;
}
</pre>

where 50842a8824755 is the ID of module in question.

[[File:My Test Site 2013-01-01 11-19-53.png|800px|thumb|none]]

The easiest way to obtain the CSS ID is by using Firebug. Below screenshot shows where <code>builder-module-50842a8824755-background-wrapper</code> can be found.

[[File:2013-01-01 11-15-31.png|800px|thumb|none]]

===== A specific module based on its position =====

It is also possible to set background of a full width module based on its position in the layout from top. For example, the following sample CSS sets yellow background to top most modules of all layouts i.e, throughout the site.

<pre class="brush:css;">
.builder-module-1-background-wrapper {
background: yellow;
}
</pre>

[[File:2013-01-01 11-35-10.png|800px|thumb|none]]

===== All modules of a certain type =====

It is also possible to set background of full width modules based on '''module type'''. For example, the following sample CSS sets yellow background to all widget bar modules in all layouts i.e, throughout the site.

<pre class="brush:css;">
.builder-module-widget-bar-background-wrapper {
background: yellow;
}
</pre>

[[File:My Test Site 2013-01-01 11-38-02.png|432px|thumb|none]]

=== When using non responsive-ready child themes ===

The following applies to all themes other than Acute (and its color variants), Americana (and its color variants), City Church, Blueprint, Scooter, Kepler, Lucky 7, Thinner, Traverse. All the module wrappers in these said child themes are full width by default.

Note:

'''1.''' PHP code given in the sections below should be put in your child theme's functions.php. If this file does not exist, create a new blank file, paste the code in between ''<?php'' and ''?>'', save it as functions.php and upload it to the child theme directory.

'''2.''' To set width of specific module(s) full width, the module(s) should be targeted by its/their GUID. The easiest method to obtain GUID of a module is by inspecting the module via Firebug.

[[Image:GUID.png|200px|none]]

In the example shown in the above screenshot, GUID of the module is: 4d14470049da5

'''3.''' To observe a module becoming full width, set a background color or image or both.

==== To make a specific single module full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Specific-module-full-width-before.png
File:Specific-module-full-width-after.png
</gallery>

* The following has been added to child theme's style.css to see the effect of module going full width:
<pre class="brush:php;">#builder-module-4d14470049da5 {
background-color: yellow;
}</pre>
* In the code below, 4d14470049da5 must be replaced with GUID of the specific module which is to be made full width

Code in functions.php:

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
$full_width_modules = array( '4d14470049da5' );

if ( ! in_array( $fields['guid'], $full_width_modules ) )
return $fields;
foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make specific multiple modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

===== By Module Types =====

By adding the following sample code before the closing PHP tag in child theme's functions.php, all Widget Bar modules, all Navigation modules and the Footer module will become full-width.

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
$full_width_modules = array( 'widget-bar','navigation','footer' );

if ( ! in_array( $fields['module'], $full_width_modules ) )
return $fields;
foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

The other available module types in Builder are: image, content, html

===== By Module IDs =====

<gallery widths=200px caption="Before and After">
File:Specific-modules-full-width-before.png
File:Specific-modules-full-width-after.png
</gallery>

* The following has been added to child theme's style.css to see the effect of module going full width:
<pre class="brush:php;">#builder-module-4d14470049da5, #builder-module-4d14470049da7 {
background-color: yellow;
}</pre>
* In the code below, 4d14470049da5 and 4d14470049da7 must be replaced with GUID of specific modules which are to be made full width

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
$full_width_modules = array( '4d14470049da5','4d14470049da7' );

if ( ! in_array( $fields['guid'], $full_width_modules ) )
return $fields;
foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all Image modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Image-modules-fullwidth-before.png
File:Image-modules-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of all image modules (only 1 is being used in the screenshot above)) going full width:
<pre class="brush:php;">.builder-module-image {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'image' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all Navigation modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Image-modules-fullwidth-before.png
File:Navigation-modules-fullwidth-after.png
</gallery>

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'navigation' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make Content module full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Image-modules-fullwidth-before.png
File:Content-module-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of content module going full width:
<pre class="brush:php;">.builder-module-content {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'content' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all HTML modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Html-modules-fullwidth-before.png
File:Html-modules-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of all HTML modules (only 1 is being used in the screenshot above) going full width:
<pre class="brush:php;">.builder-module-html {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'html' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all Widget Bar modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Widget-bar-modules-fullwidth-before.png
File:Widget-bar-modules-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of widget bar modules going full width:
<pre class="brush:php;">.builder-module-widget-bar {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'widget-bar' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make Footer module full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

<gallery widths=200px caption="Before and After">
File:Specific-module-full-width-before.png
File:Footer-module-fullwidth-after.png
</gallery>

The following has been added to child theme's style.css to see the effect of Footer module going full width:
<pre class="brush:php;">.builder-module-footer {
background-color: yellow;
}</pre>

'''Code in functions.php''':

<pre class="brush:php;">
function custom_remove_container_width( $fields ) {
foreach ( (array) $fields['style'] as $index => $rule ) {
if ( preg_match( '/^(max-)?width:/', $rule ) )
unset( $fields['style'][$index] );
}

return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
if ( 'footer' !== $fields['module'] )
return $fields;

foreach ( (array) $fields['attributes']['style'] as $index => $rule ) {
if ( preg_match( '/^width:/', $rule ) )
unset( $fields['attributes']['style'][$index] );
}

return $fields;
}

add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) {
$width = apply_filters( 'builder_get_container_width', 0 );

echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) {
echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );
</pre>

==== To make all modules full width ====

Please read the [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Intro Intro].

In this method we are going to add code to functions.php that will make outer wrappers of all modules full width.

[http://d.pr/iH9x Before] -> [http://d.pr/bdwr After]

'''Code in functions.php''':

<pre class="brush:php;">
function it_set_full_width_container( $width ) {
remove_filter( 'builder_get_container_width', 'it_set_full_width_container' );

return '';
}
add_filter( 'builder_get_container_width', 'it_set_full_width_container' );

function it_set_full_width_module( $fields ) {

global $it_original_module_width;

$it_original_module_width = '';

foreach ( (array) $fields['attributes']['style'] as $index => $value ) {
if ( preg_match( '/^(width:.+)/i', $value, $matches ) ) {
$it_original_module_width = $matches[1];
unset( $fields['attributes']['style'][$index] );
}
if ( preg_match( '/^overflow:/', $value ) ) {
unset( $fields['attributes']['style'][$index] );
$fields['attributes']['style'][] = 'overflow:visible;';
}
}
add_filter( 'builder_module_filter_inner_wrapper_attributes', 'it_constrain_full_width_module_inner_wrapper' );

return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'it_set_full_width_module' );

function it_constrain_full_width_module_inner_wrapper( $fields ) {
global $it_original_module_width;

remove_filter( 'builder_module_filter_inner_wrapper_attributes', 'it_constrain_full_width_module_inner_wrapper' );

$fields['attributes']['style'][] = $it_original_module_width;
$fields['attributes']['style'][] = 'margin:0 auto;';

$it_original_module_width = '';

return $fields;
}
</pre>

The following has been added to child theme's style.css to see the effect of all modules going full width:

<pre class="brush:php;">
.builder-module-image-outer-wrapper {
background-color: #247da7;
}

.builder-module-navigation-outer-wrapper {
background: #e0e2e3;
}

.builder-module-html-outer-wrapper {
background: #9ba1ac;
border-bottom: 0.1em dotted #CCCCCC;
}

.builder-module-content-outer-wrapper {
background: #1d313f;
}

.builder-module-widget-bar-outer-wrapper {
background: #262626;
border-bottom: 0.1em dotted #CCCCCC;
}

.builder-module-footer-outer-wrapper {
background-color: #bbbbbb;
}</pre>

If you would like to apply different styles to different modules of the same type when using this method, use [http://ithemes.com/codex/page/Builder_Features#Custom_Module_Styles Custom Module Styles].

Ex.: Let's say there are two widget bar modules in the layout and using the above method, both would become full width. Now if you would like to set red background to one of these widget bar module and green to another, then you have to create two custom module styles for these and use them.

To see how these are implemented, observe functions.php and style.css of Blueprint or Americana child theme.

The overall idea is this:

# Register the new module style using builder_register_module_style() function
# Add a new style rule in child theme's style.css. For the selector name use a class with the name of module style and append "-outer-wrapper" at end.

For details, please see [http://ithemes.com/forum/index.php?/topic/9420-americana-theme-how-do-i-get-away-from-fixed-width-layout/#p44290 Example 1], [http://ithemes.com/forum/index.php?/topic/10030-modification-to-americana-theme/#p47025 Example 2] and [http://ithemes.com/codex/page/BuilderChild-Blueprint#How_to_make_nav_bars_go_full_width Example 3].

==To change widget titles from the default h4 to any other heading tag==

Go to http://ithemes.com/forum/index.php?/topic/10724-widget-tags-how-to-change/#p50888

== How to extend sidebar and/or content background so they reach till the bottom ==

Create a 1px tall image and set it to vertically repeat as background for .builder-module-content. This image can either be created from scratch or by taking a screenshot of the site and editing in Photoshop.

The 10 min video below shows how this can be done. It shows how to create an image in Photoshop which can be set using CSS as background for Builder's content module so the sidebar(s) and element (the actual content) appear to extend all the way to the bottom.

Tip: To watch the video in full screen, go to http://vimeo.com/19781283 and click the small 4-arrow button.

{{#ev:vimeo|19781283|800}}

Relevant forum topics:

http://ithemes.com/forum/index.php?/topic/8265-foundation-child-theme-color-bleed-in-main-area/#p38894

http://ithemes.com/forum/index.php?/topic/11301-need-sidebars-to-extend-to-bottom-of-page/

http://ithemes.com/forum/index.php?/topic/9013-here-we-are-again-sidebar-bg-color/

http://ithemes.com/forum/index.php?/topic/8363-sidebar-styling-to-continue-vertically-for-entire-module-height/

http://ithemes.com/forum/index.php?/topic/876-the-endless-quest-for-equal-column-heights/

== How to add code just after <body> and just before </body> ==

Add the following in your child theme's functions.php. If the child theme does not contain this file, a new one can be created and the below code pasted.

<pre class="brush:php;">
<?php
add_action('builder_layout_engine_render_header', 'add_after_opening_body', 20 );
function add_after_opening_body() { ?>
HTML code that you want just after the opening body tag should be placed here
<?php }

add_action('builder_finish', 'add_before_closing_body', 0 );
function add_before_closing_body() { ?>
HTML code that you want just before the closing body tag should be placed here
<?php }
?>
</pre>

Sources: [http://vanweerd.com/how-to-add-full-width-header-and-footer-to-the-builder-theme/ 1], [http://ithemes.com/codex/page/Builder_Hooks 2].

== How to add code before and after each widget ==

Here's an example that shows how we can add <pre><div class="custom_top"></div></pre> before every widget and <pre><div class="custom_bottom"></div></pre> after every widget.

Add the following to the child theme's functions.php:

<pre class="brush:php;">
function custom_filter_register_sidebar_options( $options ) {
$options['before_widget'] = $options['before_widget'] .'<div class="custom_top"></div>';
$options['after_widget'] = '<div class="custom_bottom"></div>' . $options['after_widget'];

return $options;
}
add_filter( 'builder_filter_register_sidebar_options', 'custom_filter_register_sidebar_options' );
</pre>

Source: http://ithemes.com/forum/index.php?/topic/11752-adding-top-and-bottom-images-to-widget-area/#p55547

== How to replace H4 tags around widget titles with divs ==

The following code can be added before the closing PHP tag in your child theme's functions.php file to remove the H4 tags from around the widget titles:

<pre class="brush:php;">
function custom_modify_widget_wrappers( $options ) {
$options['before_title'] = '<div class="widget-title">';
$options['after_title'] = '</div>';

return $options;
}
add_filter( 'builder_filter_register_sidebar_options', 'custom_modify_widget_wrappers' );
</pre>

[http://ithemes.com/forum/index.php?/topic/12052-builder-seo-issues-widget-heading-elements-semantic-markup/#p57074 Source].

Another example:

To replace h4 tags around widget titles with say h2, the following code can be used:

<pre class="brush:php;">
function custom_modify_widget_wrappers( $options ) {
$options['before_title'] = '<h2 class="widget-title">';
$options['after_title'] = '</h2>';

return $options;
}
add_filter( 'builder_filter_register_sidebar_options', 'custom_modify_widget_wrappers' );
</pre>

== How to add a search form at the right side in a nav bar ==

<gallery widths=400px caption="Before and After">
File:Search-in-nav-method2-before.png
File:Search-in-nav-method2-after.png
</gallery>

'''1.''' At Appearance -> Menus, build a custom menu having the items you would like to be shown on the nav bar.

'''2.''' Edit your layout and add a navigation module. Set it to show your custom menu.

'''3.''' Add the following before closing PHP tag in child theme's functions.php:

<pre class="brush:php;">
add_filter('wp_nav_menu_top-1_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();

$items .= '<li class="my-search-form">' . $searchform . '</li>';
return $items;
}
</pre>

In the above replace "top-1" with the slug of your custom menu.

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

<pre class="brush:css;">
.builder-module-navigation li.my-search-form {
float: right;
margin-right: 0.5em;
border-right: none;
}

#builder-module-4d8f8f64596b7 ul {
float: none;
}
</pre>

In the above replace builder-module-4d8f8f64596b7 with the ID of this module.

If you are using BuilderChild-City-Church, see [http://ithemes.com/forum/index.php?/topic/19945-search-box-in-navigation/#p94449 this] forum topic for sample CSS.

That's it!

Source: http://vanweerd.com/enhancing-your-wordpress-3-menus/

This method is also explained [http://ithemesbuilder.com/how-to-add-a-items-to-builders-navigation-menus/ here].

==Links to specific customization requests==

===Designing a widgetized footer===

[[Image:IWfo.16-04-2011 14-01-22.png|800px|none]]

[http://ithemes.com/forum/index.php?/topic/13449-designing-a-widgetised-footer/#p62860 Forum post]

===Positioning images at a fixed location in all widgets===

[[Image:3wa5.16-04-2011 14-22-06.png|800px|none]]

[http://ithemes.com/forum/index.php?/topic/13430-ionic-widget-height/#p62862 Forum post]

===Setting up Go To Top named anchor===

[http://ithemes.com/forum/index.php?/topic/14119-main-custom-navigation-menu-problems-in-safari-browser/#p65897 Forum post]

== builder_comments_popup_link action explained ==

The builder_comments_popup_link action triggers the builder_comments_popup_link() function by default. This function calls the comments_popup_link() function of WordPress but it also ensures that the link should be shown. For instance, the link should not be shown if the comments have been disabled for that content type per Builder's settings, if both comments and pings are disabled, or if a password is required in order to view the content and it has not been entered yet.

So keeping that call in place is very important. It can still be customized in the same way a comments_popup_link() function call is customized. Let's break out the arguments to see how that is done:

<pre class="brush:php;">
<?php
do_action(
'builder_comments_popup_link',
'<div class="alignright_comments"><span class="comments">',
'</span></div>',
__( 'Add Your Comment %s', 'it-l10n-Builder' ),
__( '(0)', 'it-l10n-Builder' ),
__( '(1)', 'it-l10n-Builder' ),
__( '(%)', 'it-l10n-Builder' )
);
?>
</pre>

Now let's see that listing again while replacing the arguments with their meaning:

<pre class="brush:php;">
<?php
do_action(
action name,
content to add before link,
content to add after link,
template which has %s replaced with the output from comments_popup_link,
comments_popup_link argument zero comments,
comments_popup_link argument one comment,
comments_popup_link argument more than one comment,
);
?>
</pre>

So if you know how to modify comments_popup_link, you should now see how you can modify this action call.

Note that all the __( 'text', 'it-l10n-Builder' ) stuff is just for translation purposes. So __( '(%)', 'it-l10n-Builder' ) just means '(%)'.

'''Usage Example'''

To have an image and the words "Add your Comment" with the image and text being a link:

Since the comments_popup_link() arguments are the ones added to the link, to add an image to the link, we need to modify those arguments. Here's a quick example:

<pre class="brush:php;">
<?php
$image_url = get_bloginfo( 'template_directory' ) . '/images/folder.png';
$image = "<img src='$image_url' alt='comments' />";

do_action(
'builder_comments_popup_link',
'<div class="alignright_comments"><span class="comments">',
'</span></div>',
'Add Your Comment %s',
"$image (0)",
"$image (1)",
"$image (%)"
);
?>
</pre>

Of course, this adds the folder icon and not a comment icon, but hopefully you can see what we are doing here and use it to add your own image. Note that get_bloginfo( 'template_directory' ) returns the base URL to the Builder directory. To get your child theme's directory URL, you can use get_bloginfo( 'stylesheet_directory' ).

Source: http://ithemes.com/forum/index.php?/topic/14453-changing-comments-format/#p67520

== How to show "My Theme" menu only to specific users ==

If the following section of code is added to your child theme's functions.php file, "My Theme" menu will only be shown to the user with a username of "admin".

<pre class="brush:php;">
function child_theme_restrict_my_theme_menu() {
$user = wp_get_current_user();

if ( 'admin' !== $user->user_login )
remove_theme_support( 'builder-my-theme-menu' );
}
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
</pre>

If you want to use a different username, replace "admin" text on the fourth line with the username you want to use. For example, to make it only show for username "james", it would look like:

<pre class="brush:php;">
function child_theme_restrict_my_theme_menu() {
$user = wp_get_current_user();

if ( 'james' !== $user->user_login )
remove_theme_support( 'builder-my-theme-menu' );
}
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
</pre>

The sample code below shows how to hide "My Theme" menu from everyone except Super Admins. This is a feature specific to multisite WordPress installations.

<pre class="brush:php;">
function child_theme_restrict_my_theme_menu() {
if ( ! is_super_admin() )
remove_theme_support( 'builder-my-theme-menu' );
}
add_action( 'builder_customize_theme_features', 'child_theme_restrict_my_theme_menu' );
</pre>

== How to redirect attachment links to corresponding posts ==

Search engine results might show links from your site leading to attachment pages which are not really that useful to the visitors. If you would like to have these links redirect to their corresponding post pages, follow this:

Duplicate ''image.php'' from Builder Parent theme into your child theme directory, then replace the entire content of image.php (the one in your child theme directory) with:

<pre class="brush:php;">
<?php wp_redirect(get_permalink($post->post_parent)); ?>
</pre>

Forum topic: http://ithemes.com/forum/index.php?/topic/17644-how-can-i-find-and-delete-a-attachment-id-page/

More: http://wordpress.org/support/topic/disable-attachment-posts-without-remove-the-medias and http://wordpress.org/support/topic/redirect-attachment-page-to-post-page-how-to

== How to view debug info in page source ==

Add <code>?builder_debug=1</code> at the end of webpage URL.

Ex.: If the page URL is http://ithemesbuilder.com/how-to-add-easy-social-icons-in-the-wordpress-navigation-menu/, visit http://ithemesbuilder.com/how-to-add-easy-social-icons-in-the-wordpress-navigation-menu/?builder_debug=1 and view the page source. It should show Builder specific info like this:

[[File:2012-04-03 20-25-50.png|697px|thumb|none]]

== How to remove Header widget ==

Adding the following code in child theme's functions.php at the end (before closing PHP tag, if present) will remove Builder's Header widget from Appearance -> Widgets.

<pre class="brush:php;">
function unregister_some_widgets() {
unregister_widget('BuilderHeaderWidget');
}
add_action('widgets_init', 'unregister_some_widgets', 1);
</pre>

== How to set up print stylesheet such that only the content gets printed ==

'''1.''' Copy <code>header.php</code> from parent Builder directory into the child theme directory and edit it.

Add

<pre class="brush:php;">
<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo( 'stylesheet_directory' ); ?>/print.css" />
</pre>

below

<pre class="brush:php;">
<?php builder_add_stylesheets(); ?>
</pre>

'''2.''' Create a file named <code>print.css</code> in child theme directory having this code:

<pre class="brush:css;">
.builder-module {
display: none;
}

.builder-module-content .builder-module-sidebar-outer-wrapper {
display: none;
}

.builder-module-content {
display: block;
}
</pre>

Source: http://ithemes.com/forum/topic/8611-printing-problems-with-builder-help-going-live-in-7-days/#entry44752

== How to force CSS changes to "go live" immediately ==

Intro: http://markjaquith.wordpress.com/2009/05/04/force-css-changes-to-go-live-immediately/

This can be done in Builder by first making sure that the default stylesheet does not load, and then load the version with file modification date appended.

Add the following code at the end of your child themes <code>functions.php</code> (but before the closing <code>?></code>, if any):

<pre class="brush: php; gutter: false;">
// disable loading the default stylesheet
function custom_filter_disable_theme_stylesheets( $disable ) {
return true;
}
add_filter( 'builder_filter_disable_theme_stylesheets', 'custom_filter_disable_theme_stylesheets', 20 );

// add the versioned stylesheet
function custom_add_new_stylesheet() { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
<?php
}
add_action( 'builder_add_stylesheets', 'custom_add_new_stylesheet' );
</pre>

Source: http://ithemes.com/forum/topic/31621-reloading-stylecss-after-every-change/#entry146840

== How to left/right align a YouTube video ==

When a responsive-ready child theme is active, wrapping YouTube Embed code with

<pre class="brush: html; gutter: false;">
<div style="float: left;">
</pre>
or
<pre class="brush: html; gutter: false;">
<div style="float: right;">
</pre>

and

<pre class="brush: html; gutter: false;">
</div>
</pre>

Ex.:

<pre class="brush: html; gutter: false;">
<div style="float: right;"><iframe width="560" height="315" src="http://www.youtube.com/embed/DSwQ4Mim28I?list=UUXSQU9bJhGWGvKGtfL-tuag" frameborder="0" allowfullscreen></iframe>
</pre>

will not display the video at all on the Page/Post.

The solution if floating is desired is to ensure that the floated element has a width associated with it. In order to prevent breaking the fluidity of the video, width should be set with a max-width and a width of 100% as shown below.

<pre class="brush: html; gutter: false;">
<div style="float: right; max-width: 560px; width: 100%;"><iframe width="560" height="315" src="http://www.youtube.com/embed/DSwQ4Mim28I?list=UUXSQU9bJhGWGvKGtfL-tuag" frameborder="0" allowfullscreen></iframe></div>
</pre>

Forum topic: http://ithemes.com/forum/topic/34643-div-float-right-youtube-video-disappearing/

== How to set a default placeholder text in Search box ==

[[File:2013-02-12 20-47-26.png|216px|thumb|none]]

[[File:2013-02-12 20-47-38.png|204px|thumb|none]]

If you would like to set a default text in search box that goes away when the search field gets focus AND your active child theme does not already have a <code>searchform.php</code>, do this:

Create a file named <code>searchform.php</code> in child theme's directory having the following code:

<pre class="brush:css; gutter: false;">
<?php $search_box_default = __( 'Search site', 'it-l10n-BuilderChild-Default' ); ?>

<?php $search_box_value = esc_attr( apply_filters( 'the_search_query', get_search_query() ) ); ?>

<?php $search_box_value = ( empty( $search_box_value ) ) ? $search_box_default : $search_box_value; ?>

<form method="get" class="search-form" action="<?php echo get_option( 'home' ); ?>">
<input type="text" value="<?php echo $search_box_value; ?>" name="s" class="search-text-box" onfocus="if(this.value == '<?php echo $search_box_default; ?>') this.value = '';" onblur="if(this.value == '') this.value = '<?php echo $search_box_default; ?>';" />
<input type="submit" value="<?php echo esc_attr__( 'Search', 'it-l10n-BuilderChild-Default' ); ?>" class="search-submit-button" />
</form>
</pre>

The default text can be changed in the first line. Just replace <code>Search site</code> with your desired default placeholder text.

Optional: Replace <code>Default</code> in <code>it-l10n-BuilderChild-Default</code> above with the name of your active child theme.

== How to add support for Sidebars in Navigation Module ==

It is possible to add sidebar(s) in a Navigation Module by adding the following in child theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">
add_theme_support( 'builder-navigation-module-sidebars' );
</pre>

Note: This is presently an experimental feature.

As such the graphic representing the Navigation Module in layout manager will not change to reflect the presence and arrangement of sidebar(s).

Below is an example of using this to add social media icons floating to the right in the nav bar with BuilderChild-Default as the active theme.

But first the result:

[[File:WordPress Dev Site 2013-05-30 13-08-04.png|800px|thumb|none]]

In the backend:

[[File:2013-05-30 12-55-18.png|625px|thumb|none]]

[[File:2013-05-30 12-57-43.png|661px|thumb|none]]

With [http://wordpress.org/plugins/social-media-widget/ Social Media Widget plugin] installed and activated, its widget has been placed in the Navigation Module's sidebar.

[[File:2013-05-30 13-02-45.png|202px|thumb|none]]

and this CSS added at end of child theme's <code>style.css</code>:

<pre class="brush:css; gutter: false;">
.builder-module-navigation .builder-module-sidebar {
background: transparent;
padding-top: 0;
padding-bottom: 0;
}

.builder-module-navigation .widget {
padding: 0;
padding-right: 0.5em;
}

.builder-module-navigation .widget a {
display: inline;
}

.socialmedia-buttons img {
padding-top: 0.5em;
}
</pre>

File:WordPress Dev Site 2013-05-30 13-08-04.png

2013-05-30T07:38:28Z

Sridhar:

File:2013-05-30 13-02-45.png

2013-05-30T07:33:49Z

Sridhar:

File:2013-05-30 12-57-43.png

2013-05-30T07:28:26Z

Sridhar:

File:2013-05-30 12-55-18.png

2013-05-30T07:26:54Z

Sridhar:

Builder CSS Guide

2013-05-27T02:19:24Z

Sridhar: /* If you are using a WordPress 3 custom menu */

==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. [http://getfirebug.com/ 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 [http://ithemes.com/forum/index.php?/topic/925-builder-theme-advanced-css-free-training-videos/ here].'''

Here are few recommended resources for CSS:

*[http://www.brainjar.com/css/using/ BrainJar]
*[http://www.sitepoint.com/videos/videocss1/ The CSS Video Crash Course - SitePoint Videos]
*[http://www.w3schools.com/css/ 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. [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.

=== 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===

<pre class="brush:css;">
.builder-container-outer-wrapper {
margin-top: 0;
}
</pre>

<gallery widths=200px caption="Before and After">
File:Top-margin-container-before.png
File:Top-margin-container-after.png
</gallery>

=== To remove gap between each module ===

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

<pre class="brush:css; gutter: false;">
.builder-module-background-wrapper {
margin-bottom: 0;
}
</pre>

<gallery widths=320px heights=199px>
File:Holistic Nutrition By Lisa 2013-01-25 09-16-09.png|Before
File:Holistic Nutrition By Lisa 2013-01-25 09-15-19.png|After
</gallery>

<u>Note</u>: This only applies to Default child theme.

===To remove the top and bottom borders for all modules===

<u>Note</u>: This only applies to Default child theme.

<pre class="brush:css;">
.builder-module {
border-top: none;
border-bottom: none;
}
</pre>

<gallery widths=200px caption="Before and After">
File:borders-for-modules-before.png
File:borders-for-modules-after.png
</gallery>

===To target a specific module===

<pre class="brush:css;">
#builder-module-4d396c72bbb6b {
}
</pre>

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

[[Image:a-specific-module.png|200px|none]]

===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,

<pre class="brush:css;">
.builder-module-1 {
background: transparent;
}
</pre>

To set all sidebars in first module transparent,

<pre class="brush:css;">
.builder-module-1 .builder-module-sidebar {
background: transparent;
}
</pre>

===To set the height of a specific module===

<pre class="brush:css;">
#builder-module-4d396c72bbb6e {
height: 200px;
}
</pre>

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

<gallery widths=200px caption="Before and After">
File:identifying-a-module.png
File:setting-module-height-after.png
</gallery>

===To remove padding around a specific widget===

<pre class="brush:css;">
#text-3 {
padding: 0;
}
</pre>

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

[[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==

===To target all nav bars===

<pre class="brush:css;">
.builder-module-navigation {
}
</pre>

===To target a specific nav bar===

<pre class="brush:css;">
#builder-module-4d396c72bbb6b {
}
</pre>

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

[[Image:a-specific-module.png|200px|none]]

===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;">
.menu-mainmenu-container {
display: table;
margin: 0 auto;
}
</pre>

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

If there are a lot of menu items in the menu resulting in wrapping and multiple lines in the nav bar, then [http://ithemes.com/forum/topic/44976-center-navigation-for-attent/#entry199202 this] method can be used for centering.

==== 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,

<pre class="brush:css;">
.builder-module-navigation .builder-module-navigation-menu-wrapper {
display: table;
margin: 0 auto;
}
</pre>

==== For all other types of navigation module ====

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

<pre class="brush:css;">
.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

=== 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==

=== How to center image in Image Module ===

Before:

[[File:WordPress Dev Site - before.png|800px|thumb|none]]

After:

[[File:WordPress Dev Site.png|800px|thumb|none]]

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

<pre class="brush:css; gutter: false;">
.builder-module-1 .builder-module-element img {
margin: 0 auto;
}
</pre>

Change 1 in <code>.builder-module-1</code> to the position of your Image module from the top in layout.

==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==

===Targeting the full widget bar===

To target all widget bars:

<pre class="brush:css;">
.builder-module-widget-bar {
}
</pre>

To target a specific widget bar:

<pre class="brush:css;">
#builder-module-4d3956642cc05 {
}
</pre>

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.

[[Image:Specific-widget-bar-module.png|200px|none]]

===Targeting all the individual widgets globally===

To target all individual widgets of all widget bars:

<pre class="brush:css;">
.builder-module-widget-bar .widget {
}
</pre>

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

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget {
}
</pre>

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===

<pre class="brush:css;">
#text-3 {
}
</pre>

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.

[[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===

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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''right widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''middle widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .middle .widget {
}
</pre>

To target any widget in the '''right widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''second widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-2 .widget {
}
</pre>

To target any widget in the '''third widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-3 .widget {
}
</pre>

To target any widget in the '''right most widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''second widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-2 .widget {
}
</pre>

To target any widget in the '''third widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-3 .widget {
}
</pre>

To target any widget in the '''fourth widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-4 .widget {
}
</pre>

To target any widget in the '''right most widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

==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===

<gallery widths=200px caption="Before and After">
File:2-adjacent-sidebars-before.png
File:2-adjacent-sidebars-after.png
</gallery>

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

<pre class="brush:css;">
.builder-module-content .widget-outer-wrapper-top, .builder-module-content .widget-outer-wrapper-bottom {
display: none;
}
</pre>

==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==

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 <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===

==== 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'''====

<pre class="brush:css;">
.page-id-2 {
background-color: #333333;
}
</pre>

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

<gallery widths=200px caption="Before and After">
File:page-background-before.png
File:page-background-after.png
</gallery>

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

*Examining the body element using Firebug
[[Image:id-from-firebug.png|200px|none]]
*Placing cursor on the Page/post title in edit screen and observing the number in the browser status bar
[[Image:id-in-status-bar.png|200px|none]]

===='''To set a background color to mutiple pages'''====

<pre class="brush:css;">
.page-id-2, .page-id-4 {
background-color: #333333;
}
</pre>

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>

=== 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!

=== How to set up and use <code>custom.css</code> ===

If you would like to place all your custom CSS code in a separate file named, say, <code>custom.css</code>, do the following.

The advantages of doing this over editing the styles inline in style.css or writing at the end of style.css is that all your CSS customizations will be in one file. This file can easily be backed up and used again as needed when updating the child theme (Note however that 99 times out of 100, one does not update child themes). Also it will help the support personnel help you better as the style changes will all be in one place and not inline.

'''1.''' Create a file named <code>custom.css</code> and upload it to active theme directory.

'''2.''' Add the following at the end of active theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">
function my_custom_styles() {
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css', '1.0.0', 'all' );
}
add_action('wp_enqueue_scripts', 'my_custom_styles');
</pre>

Ref.: http://codex.wordpress.org/Function_Reference/wp_enqueue_style

'''3.''' Place your custom CSS code in custom.css. This file will be available for editing at Appearance -> Editor.

Note: Make sure to take a back-up of your customized custom.css when [http://ithemes.com/codex/page/Builder_Child_Themes#How_to_update_a_child_theme updating your active child theme].

Source: http://ithemes.com/forum/topic/36721-why-has-ithemes-not-upgraded-to-wordpress-35/#entry169383

Builder Child Themes

2013-05-25T05:58:32Z

Sridhar: Added Attent and Coverage

=Introduction=

In version 2.7, child themes have been introduced in WordPress. Using Child themes, you can modify (override) all aspects of a Parent theme (e.g. the stylesheet, page templates, functions) without risking to lose any modifications when upgrading the parent theme.

See [http://ithemes.com/ithemes-and-child-themes-introduction/ iThemes and Child Themes – introduction] and [http://ithemes.com/ithemes-and-child-themes-a-quick-tutorial-1/ Child Themes, a quick tutorial].

Child Theme Graphics can also be seen [http://ithemes.com/builder-store/ here] and [http://affiliates.ithemes.com/banners-graphics/ithemes/child-theme-graphics/ here].

Listed below are the child themes of Builder that can be downloaded from the [http://ithemes.com/member/member.php member's area] (latest at the top):

= List of child themes =

== Attent ==

Introducing Attent, the latest Builder child theme designed for bloggers. Attent features a sleek, minimalistic design and a simple color scheme. With several alternate module styles like a built-in mobile nav and full window images, Attent is one of our favorite additions to the Builder child theme library.

[[File:Attent-2013-05-25-11-25-48.jpg|307px|thumb|none]]

[http://demos.ithemes.com/attent/ Live Demo]

[http://ithemes.com/2013/05/16/attent-a-new-minimalistic-builder-child-theme-for-bloggers/ Blog entry announcing the release of Attent]

== Coverage ==

Introducing Coverage, a news and magazine child theme for iThemes Builder. Featuring a totally-new-to-Builder custom widget for displaying post content, Coverage was built and designed specifically with content-rich news and magazine sites in mind.

[[File:Coverage-2013-05-25-11-19-50.jpg|297px|thumb|none]]

[http://demos.ithemes.com/coverage/ Live Demo]

[http://ithemes.com/2013/04/30/just-released-coverage-a-news-magazine-child-theme-for-builder/ Blog entry announcing the release of Coverage]

== Air ==

Builder Child Air is a new foundational or starter child theme for iThemes Builder. Whether you’re using the Builder Style Manager or writing your own CSS, we hope Air will be a great new place to start when creating your custom responsive-ready Builder child themes.

Builder child Air includes several convenient built-in features to help lay the groundwork for custom child theme creation. A few of Air's theme highlights include:

* Built-in Mobile-Ready Menu Style
* Fully Optimized for Style Manager
* New Inset Module Styles
* Full Window Image Style

[[File:Air 2013-04-12 09-33-58.png|291px|thumb|none]]

[http://demos.ithemes.com/air/ Live Demo]

[http://ithemes.com/2013/04/04/introducing-air-a-new-foundation-child-theme-for-builder/ Blog entry announcing the release of Air]

== Noise ==

12 March 2013

Today we’re pumped to release Noise, a responsive-ready Builder child theme with a brand new plugin for iThemes Builder, Builder Audio Block. Designed with musicians and bands in mind, Builder now makes it easy to create a WordPress band website with a “built-in” audio player, a way to display albums or discographies, a list of upcoming shows and support for music downloads/purchases with Easy Digital Downloads.

Builder Child Noise features several new-to-Builder design and functionality elements that you’ve requested, including:

* New Full Window and No Spacing Image Module Styles: Noise features new alternate module styles for images, including Full Window (or full width) and No Spacing. These new module styles for images can be added anywhere in your Builder Layouts.

* Post Formats Styles: Ever wanted to post a quick status update or just a link? Noise includes new post format styles that add a Tumblr-like feel for your blog. From the Add New Post Page, you’ll see a new option to apply a format to the post, including standard, status, video, link or image.

* Events Block Styling: To make it easy to include upcoming shows, Noise includes matching styles for Builder Events Block.

[[File:Noise 2013-04-12 09-41-21.png|409px|thumb|none]]

[http://demos.ithemes.com/noise/ Live Demo]

[http://ithemes.com/2013/03/11/just-released-noise-a-new-builder-child-theme-new-builder-audio-block/ Blog entry announcing the release of Noise]

[http://ithemes.com/codex/page/BuilderChild-Noise Noise codex page]

== RedBud ==

With a soft, feminine style, RedBud is perfect for bloggers, event planners, photography sites or vintage boutiques. RedBud features hand-drawn details, several alternate widget styles, a unique Google font pairing and theme-matching styling for Gravity Forms.

[[File:RedBud 2013-02-05 21-57-03.png|404px|thumb|none]]

[http://demos.ithemes.com/redbud/ Live Demo]

[http://ithemes.com/2013/02/05/redbud-a-new-builder-child-theme-with-hand-drawn-details/ Blog entry announcing the release of Threads]

[http://demos.ithemes.com/redbud/2013/02/03/free-social-media-icons-download/ Free social media icons to match RedBud Builder child theme]

== Threads ==

Need to build an online t-shirt shop on WordPress? We released a new feature-rich responsive-ready Builder Child Theme, Threads.

Threads is designed to integrate exclusively with Shopp, our favorite ecommerce plugin for WordPress. Threads includes 15+ Shopp-specific styled templates so you'll have one consistent look across the theme and ecommerce portions of the site, plus custom styles for product views, cart-in-navigation settings and much more.

[[File:Threads 2013-01-21 20-04-40.png|429px|thumb|none]]

[http://demos.ithemes.com/threads/ Live Demo]

[http://ithemes.com/2013/01/11/threads-a-new-builder-child-theme-for-t-shirt-shops-available-now/ Blog entry announcing the release of Threads]

== Icebox ==

We're celebrating Builder's birthday today (December 17, 2012) with a free Builder child theme download for all Builder users! Icebox is a new responsive-ready child theme.

[http://f.cl.ly/items/0e1E3w0F0n0N0i2b3K1h/Icebox%202012-12-18%2009-22-15.png Screenshot]

[http://demos.ithemes.com/icebox/ Live Demo]

[http://ithemes.com/2012/12/18/free-builder-child-theme-download-icebox/ Blog entry announcing the release of Icebox]

== Thrifty ==

Thrifty is a responsive ecommerce child theme for Builder. With a simple, minimalist design, Thrifty perfectly showcases your products by combining the usefulness of three popular ecommerce plugins with Builder's powerful layout engine.

'''Support for Three Ecommerce Plugins'''

Each of the following plugins provides its own set of ecommerce features and we've worked to highlight the functionalities of each in Thrifty:

* Shopp (our recommended solution)
* Easy Digital Downloads
* WooCommerce

Just choose your plugin, upload and activate and Thrifty goes to work providing the styling for your online store.

<u>Note</u>: Thrifty (or any other Builder child theme) does not influence the functionality of the e-commerce plugin, but has styling and tweaked template files that enhance the presentation of the ecommerce plugin's output.

[[File:Thrifty - Shopp 2012-12-21 09-25-35.png|199px|thumb|none]]

[http://demos.ithemes.com/thrifty/ Live Demo]

[http://ithemes.com/2012/11/26/just-released-thrifty-a-new-ecommerce-child-theme-for-builder/ Blog entry announcing the release of Thrifty (has more details)]

[http://ithemes.com/codex/page/BuilderChild-Thrifty Thrifty codex page]

== Avail ==

With a clean, modern design, Avail is great for business or corporate websites. Paired with iThemes Builder 4.0, Avail automatically responds for mobile, tablet and desktop viewing.

[[File:Avail 2013-01-31 23-17-11.png|467px|thumb|none]]

[http://demos.ithemes.com/avail Live Demo]

[http://ithemes.com/2012/11/15/avail-a-new-responsive-ready-builder-child-theme/ Blog entry announcing the release of Avail]

[http://ithemes.tv/november-20-2012/ Overview Video by Benjamin Bradley on iThemesTV - Nov 20, 2012] - Time frame: 02:48 to 13:53

[http://ithemes.com/purchase/avail/ Purchase page]

== Essence Silver ==

Essence Silver is ported from one of our most popular classic themes (the very first iThemes theme to be exact) by the same name.

[[File:Demosithemescombuilderessencesilver-full.png|652px|thumb|none]]

[http://demos.ithemes.com/builder-essence-silver/ Live Demo]

[http://ithemes.com/2012/09/27/classic-theme-essence-silver-now-available-as-a-builder-child-theme/ Blog entry announcing the release of Essence Silver]

== Resume ==

Résumé child theme has been designed for building a WordPress résumé website.

Résumé features 3 color versions: Résumé, Résumé Blue and Résumé Dark.

[[File:Résumé 2012-09-12 11-09-03.png|800px|thumb|none]]

[http://demos.ithemes.com/resume/ Live Demo]

[http://ithemes.com/2012/09/11/just-released-new-builder-child-theme-resume-in-3-color-variations/ Blog entry announcing the release of Resume]

Résumé Blue:

[[File:Résumé - Blue 2012-09-12 11-13-16.png|800px|thumb|none]]

Résumé Dark:

[[File:Résumé - Dark 2012-09-12 11-14-36.png|800px|thumb|none]]

== Remark ==

Remark is a fun, simple child theme designed with bloggers in mind and a perfect match for those that may want to set up a small Etsy-type shop.

[[File:Remark 2012-07-20 20-52-12.png|351px|thumb|none]]

[http://demos.ithemes.com/remark/ Live Demo]

[http://ithemes.com/2012/07/20/just-released-new-child-theme-remark/ Blog entry announcing the release of Remark]

== Book Nook ==

Designed with authors in mind, the latest child theme for iThemes Builder will showcase your work perfectly.

[[File:Book-Nook-2012-06-23-12-16-59.jpg|565px|none]]

[http://demos.ithemes.com/book-nook/ Live Demo]

[http://ithemes.com/2012/06/22/new-child-theme-preview-book-nook/ Blog entry announcing the release of Book Nook]

== Gallery Church ==

You'll have everything you need for building a WordPress church website with our latest Builder child theme release: Gallery Church — featuring integrations with both Builder Church Block and the newly-released Builder Events Block.

With a bold and modern style, this theme is perfect for church sites that are both welcoming with a fresh, direct message and easy to navigate for visitors.

[[File:Gallery-Church-2012-06-23-12-24-04.jpg|501px|none]]

[http://demos.ithemes.com/gallery-church/ Live Demo]

[http://ithemes.com/2012/05/23/new-child-theme-gallery-church-with-church-and-events-block-integration/ Blog entry announcing the release of Gallery Church]

== Arrival ==

Arrival features simple styling in either blue or pink for creating a baby announcement site to share with family and friends.

[[File:Arrival-2012-06-23-12-43-18.jpg|406px|none]]

[http://demos.ithemes.com/arrival/ Live Demo]

[http://ithemes.com/2012/04/27/due-next-week-new-child-theme-arrival/ Blog entry announcing the release of Arrival]

'''Arrival Blue''':

[[File:Arrival-2012-06-23-12-48-47.jpg|406px|none]]

== Yukon ==

Yukon is iThemes first Builder child theme for BuddyPress.

Yukon styles BuddyPress features for member profiles, network activity/updates, groups, and forums to create the perfect BuddyPress + Builder social networking site.

[[File:2012-03-15 08-20-50.png|800px|none]]

[http://demos.ithemes.com/buddypress/yukon/ Live Demo]

[http://ithemes.com/2012/03/14/our-first-builder-child-theme-for-buddypress-yukon/ Blog entry announcing the release of Yukon]

== Vow ==

Perfect for wedding websites, Vow features a bright, clean-lined design with a ribbon menu, framing wedding details in classic style. Chronicle wedding plans with Vow’s blog styling, add wedding details like ceremony location or registry information, or add a photo gallery with engagement photos.

[[File:Vow-2012-02-09-10-25-00.jpg|374px|none]]

[http://demos.ithemes.com/vow/ Live Demo]

[http://ithemes.com/2012/02/08/introducing-vow-a-wedding-child-theme-for-builder/ Blog entry announcing the release of Vow]

[http://demos.ithemes.com/vow-red Vow Red]

[http://demos.ithemes.com/vow-yellow Vow Yellow]

[http://demos.ithemes.com/vow-blue Vow Blue]

[http://ithemes.com/2012/02/23/just-released-three-new-color-variations-of-vow/ Blog entry announcing the release of Vow color variants]

== Market ==

Like Depot, Market features integration with three different WordPress eCommerce plugins: Shopp, Cart66 and WP-Ecommerce.

With simple lines, cool colors, and bold contrast styling for widget areas, Market is the perfect store-front for your WordPress eCommerce site.

[[File:Market 2012-02-05 09-34-05.png|541px|none]]

[http://demos.ithemes.com/market/ Live Demo]

[http://ithemes.com/2012/02/02/just-released-market-an-ecommerce-child-theme-for-builder/ Blog entry announcing the release of Market]

== Kepler Light ==

Kepler Light is the "lighter" version of the original Kepler. Kepler Light features the same great photography-focused styling, great for showcasing your creative work.

Kepler Light includes several specific post styles to focus on featured images, all with a unique custom date stamp to add interest to your blog. With Kepler Light and Builder, you'll have the perfect foundation for creating awesome WordPress photography sites.

[[File:Kepler-2012-01-27-21-17-02.jpg|269px|none]]

[http://demos.ithemes.com/kepler-light Live Demo]

[http://ithemes.com/2012/01/26/introducing-kepler-lite/ Blog entry announcing the release of Kepler Light]

== Adept ==

Percfect for small businesses or professional bloggers, Adept features a sleek design to pair with Builder’s great flexibility and functionality for easily building WordPress websites.

Some of the key features include:

* simple navigation with great button styling and secondary dropdown styles
* alternate module styles for navigation and widget modules to configure your site exactly to your specifications
* styling for Gravity Forms to match the theme’s overall look and feel
* and custom-styled search bar style

[[File:Adept-613x1024.jpg|613px|none]]

[http://demos.ithemes.com/adept/ Live Demo]

[http://ithemes.com/2012/01/13/just-released-adept-a-child-theme-for-builder/ Blog entry announcing the release of Adept]

== Depot ==

Depot is the first e-commerce Builder Child Theme. Depot features full integration and optimization of three different WordPress Ecommerce plugins: Shopp, Cart66 and WP-Ecommerce. Operating on iThemes Builder's powerful layout engine and paired with one of these eCommerce plugins, Depot is the perfect store-front for your WordPress-powered website or blog.

[http://demos.ithemes.com/depot/ Live Demo]

[[File:Depot-shopp.jpg|451px|thumb|none]]

[http://ithemes.com/2011/12/22/just-released-depot-an-ecommerce-child-theme-for-builder/ Blog entry announcing the release of Depot]

[http://ithemes.com/builder-store/depot/ Purchase page]

== Expansion ==

Expansion, the latest child theme for iThemes Builder, boasts a high-contrast design with strong, simple, and clean edges. Besides the remarkable layout flexibility of all iThemes Builder child themes, Expansion also features several theme-specific details. It is a great child theme for small and large businesses. Featuring 3 alternate widget styles and a beautiful date stamp on each blog post, Expansion is the perfect choice for your next theme.

[[File:Builder-Child---Expansion-Demo-2011-12-02-14-51-14.jpg|800px|thumb|none]]

[http://demos.ithemes.com/expansion/ Live Demo]

[http://ithemes.com/2011/12/01/just-released-expansion-the-latest-child-theme-for-builder/ Blog entry announcing the release of Expansion]

[http://ithemes.com/builder-store/expansion/ Purchase page]

'''Expansion Red'''

[[File:Expansion-red.png|800px|thumb|none]]

'''Expansion Blue'''

[[File:Expansion-blue.png|800px|thumb|none]]

[http://ithemes.com/2011/12/15/just-released-two-new-color-options-for-expansion/ Blog entry announcing Expansion Red and Expansion Blue]

== Patterned ==

A handcrafted look and feel – perfect for any special project or site. You'll love the Google Web Font (Rancho) that gives titles a special flair and draws people in to your site. From the stay-at-home blogging mom to the business looking for a softer, more subtle design, Patterned is a great choice for your next Builder child theme!

[[File:Ithemes-builder-childtheme-patterned.jpg|800px|thumb|none]]

[http://demos.ithemes.com/patterned/ Live Demo]

[http://ithemes.com/2011/11/08/ithemes-builder-releases-51st-child-theme-patterned/ Blog entry announcing the release of Patterned]

== Traverse ==

Traverse features a high contrast design and bold styling intended to showcase content for travel blogs. Stories and photos from your adventures will be framed perfectly by Traverse.

[[File:Traverse-ithemes-builder-childtheme.png|800px|thumb|none]]

[http://demos.ithemes.com/traverse/ Live Demo]

[http://ithemes.com/2011/10/26/get-ready-to-travel-with-traverse/ Blog entry announcing the release of Traverse]

== Architect ==

[[File:IThemes-builder-Architect.png|800px|thumb|none]]

[http://demos.ithemes.com/architect-builder/ Live Demo]

[http://ithemes.com/2011/09/20/architect-child-theme-for-ithemes-builder/ Blog entry announcing the release of Architect]

== Acute ==

Acute is a clean business theme, perfect for giving your site a professional, polished look. Currently it is in gray and blue, there will be 4 more color options released soon.

With Acute you will find custom styled (default) widgets; integrated support for Slideshow and Accordion (2 plugins from the DisplayBuddy suite); image grid, portfolio and magazine extensions; plus a new custom portfolio extension – only available with Acute.

[[File:IThemes-builder-Acute.png|800px|thumb|none]]

[http://demos.ithemes.com/acute/ Live Demo]

[http://ithemes.com/2011/09/20/acute-is-the-45th-child-theme-for-ithemes-builder/ Blog entry announcing the release of Acute]

=== Acute Blue ===

[[File:Acute-blue.png|800px|thumb|none|Acute Blue]]

=== Acute Green ===

[[File:Acute-Green.png|800px|thumb|none|Acute Green]]

=== Acute Red ===

[[File:Acute-Red.png|800px|thumb|none|Acute Red]]

=== Acute Violet ===

[[File:Acute-Violet.png|800px|thumb|none|Acute Violet]]

=== Acute Orange ===

[[File:Acute-Orange.png|800px|thumb|none|Acute Orange]]

== Kepler ==

Kepler is a portfolio style theme - perfect for showcasing photography, graphic design, and art. It is characterized by simple, easy to read typography, and a focus on images.

[[File:Ithemes-builder-child-kepler.png|800px|thumb|none]]

[http://demos.ithemes.com/kepler/ Live Demo]

[http://ithemes.com/2011/08/30/kepler-child-theme-walkthroughwebinar/ Quick video showing you how Kepler looks and works (Kepler Child Theme Walkthrough/Webinar)]

[http://ithemes.com/2011/09/06/how-to-work-with-kepler-child-theme-video/ How to Work With Kepler Child Theme (video)]

== Singular ==

[[File:Builder-child-singular.png|800px|thumb|none]]

Singular - the simple, clean theme with all the flexibility inherent in iThemes Builder.

Release Date: August 9, 2011

[http://demos.ithemes.com/singular/ Live Demo]

==City Church==

[[File:CityChurch.jpg|573px|thumb|none]]

[http://ithemes.com/2011/07/19/city-church-preview-an-upcoming-child-theme-for-builder/ Preview]

The theme developers [http://ithemes.com/2011/07/27/preview-of-new-photo-child-theme-for-builder/ described] the unique features of the theme on iThemes.tv. You can watch the specific segment here:

{{#ev:youtube|4YObZwIoYok|560}}

Release Date: August 3, 2011

[http://demos.ithemes.com/city-church/ Live Demo]

[http://ithemes.com/2011/08/03/how-to-launch-your-churchs-website-with-wordpress-and-builder/ Blog entry announcing the release of City Church]

==Thinner==

[[File:Builder-Child–Thinner.jpg|800px|thumb|none|Screenshot of Thinner, 41st child theme of iThemes Builder]]

[http://demos.ithemes.com/thinner/ Live Demo]

[http://ithemes.com/2011/07/15/thinner-the-41st-child-theme-for-ithemes-builder/ Blog entry announcing the release of Thinner]

==Keen==

[[File:Builder-Child–Keen.png|800px|thumb|none|Screenshot of Keen, 40th child theme of iThemes Builder]]

[http://demos.ithemes.com/keen/ Live Demo]

[http://ithemes.com/2011/07/11/builder-child-40-keen/ Blog entry announcing the release of Keen]

==Dockside==

[[File:Builder Child – Dockside Demo 1309411970077.png|800px|none]]

[http://demos.ithemes.com/dockside/ Live Demo]

Features:

* beautifully designed blockquotes with dropcap styling to give that extra flare and distinction.
* fresh, new category and comment icons to make your meta data stand out.
* featured image usage on blog layout
* great typography, including the "Brawler" Google font for the headlines

[http://ithemes.com/2011/06/29/dockside-child-theme-39-for-ithemes-builder/ Blog entry announcing the release of Dockside]

==Revised==

[[File:Builder Child – Revised Demo 2011-06-15 22-37-21.png|800px|none]]

[http://demos.ithemes.com/revised/ Live Demo]

Features:

* Simple Blogroll Layout
* Feature Image Usage
* Unique Styled Archives
* Two Alternate Widget Styles

[http://ithemes.com/2011/06/13/builder-child-themes-number-37-and-38/ Blog entry announcing the release of Revised]

==Heat Wave==

[[File:Builder-child-heat-wave.png|800px|none]]

[http://demos.ithemes.com/heat-wave/ Live Demo]

Features:

* Uniquely Styled Comment Section
* Default WordPress Gallery Colorbox Pop Up
* Hot, Summery Colors
* and Built In Gravity Forms Styles

[http://ithemes.com/2011/06/06/sneak-peak-at-our-35th-builder-child-theme-heat-wave/ Blog entry announcing the release of Heat Wave]

==Encased Light==

[[File:builder-child-encased-light.png|800px|none]]

[http://demos.ithemes.com/encased-light/ Live Demo]

[http://ithemes.com/new-ithemes-builder-child-theme-encased-light/ Blog entry announcing the release of Encased Light]

==Drafted==

[[File:Builder-child-drafted.png|800px|none]]

[http://demos.ithemesbuilder.com/drafted/ Live Demo]

==Cubed==

[[File:Builder-child-cubed.png|800px|none]]

[http://demos.ithemesbuilder.com/cubed/ Live Demo]

==Rainey Day==

[[File:Builder-childtheme-rainey-day.png|800px|none]]

[http://demos.ithemesbuilder.com/rainey-day/ Live Demo]

A light and subtle, yet dramatic theme.

* unique fonts and font styling on the nav bar and headlines tags
* multi-shaded lavender color scheme
* ribbon graphics for added flair and elegance
* styling of the author meta data
* other stylish graphics being used throughout the theme

[http://ithemes.com/rainey-day-child-theme/ Blog entry announcing the release of Rainey Day]

==Scooter==

[[File:Builder-childtheme-scooter.png|800px|none]]

[http://demos.ithemesbuilder.com/scooter/ Live Demo]

* Retro Styled Theme – making Retro the new Contemporary.
* 'Dancing Script' Google Font, providing a super-easy way to have a unique titles and headlines without slowing your site down with heavy graphics.
* Magazine Layout Builder Extension – so you can take advantage of the ease of using Builder with the visual sophistication of a magazine layout.
* ContactBuddy and GravityForms Styles (Extensions) built in – so once you install the specific plugins, you will have access to the advanced styling without having to touch any code.
* Alternate HTML modules – so you can have different looking HTML modules without having to change the css code.

{{#ev:youtube|IQlnrb9sfiY}}

[http://ithemes.com/scooter-a-retro-style-child-theme-for-ithemes-builder/ Blog entry announcing the release of Scooter]

==Covert==

[[File:Covert-builder-childtheme.png|800px|none]]

[http://demos.ithemesbuilder.com/covert/ Live Demo]

A quite stunning in its bold-yet-minimalist style. Similar to its related (sister?) theme Covell, Covert uses a minimalist, monochromatic style, but one that allows photographers and artists to display their work in a more dramatic and darker style.

Covert also includes 2 distinct navigation styles, making it easy to portray just the amount of "minimalism" you want, as well as the custom projects post type, making project organization and display a snap.

[http://ithemes.com/covert-30th-child-theme-for-ithemes-builder-just-released/ Blog entry announcing the release of Covert]

==Encased==

[[File:Encased-builder-child-theme.png|800px|none]]

[http://demos.ithemesbuilder.com/encased/ Live Demo]

Some of the other features that make this theme special:

* Unique Navigation Styles – Fixed Left and Top Navigation
* Encased Content Module – Content Module is ‘encased’ within the layout making it stand out from the other modules.

[http://ithemes.com/new-ithemes-builder-child-theme-encased/ Blog entry announcing the release of Encased]

==Lucky 7==

[[File:Lucky7-builder-child-theme.png|800px|none]]

[http://demos.ithemesbuilder.com/lucky7/ Live Demo]

Some of the special features included in Lucky 7:

* 7 awesome color palettes – which can be further customized using the Style Manager plugin – giving you a professional look with virtually no effort
* The ability to select a different color for individual modules – making it easy to super-customize each portion of the page
* Beautiful meta blocks for author info – making your site (and your authors) stand out from the crowd
* Inset widgets and navigation for a unique, professional look
* Additional custom theme settings, such as a simple setting to change the “read more” text, giving your site a special touch without having to know anything about code
* Built-in iPhone-ready mobile theme
* and popular rounded corners

[http://ithemes.com/lucky-7-new-ithemes-builder-child-theme-released/ Blog entry announcing the release of Lucky 7]

==Covell==

[[File:Ithemes-builder-child-covell.png|800px|none]]

[http://demos.ithemesbuilder.com/covell/ Live Demo]

[http://ithemes.com/covell-the-newest-child-theme-for-ithemes-builder/ Blog entry announcing the release of Covell]

==Classen==

[[File:Classen-ss-blog.png]]

[http://demos.ithemesbuilder.com/classen Live Demo]

[http://ithemes.com/new-builder-child-theme-released-classen/ Blog entry announcing the release of Classen]

==Blueprint==

[[File:Blueprint-builder-childtheme.png|537px]]

[http://demos.ithemesbuilder.com/blueprint/ Live Demo]

[http://ithemes.com/new-builder-child-theme-released-blueprint/ Blog entry announcing the release of Blueprint]

==Ionic==

'''Ionic – Sky'''

[[File:Ionic-sky.png|537px]]

[http://demos.ithemesbuilder.com/ionic-sky Live Demo]

'''Ionic – Green'''

[[File:Ionic-green.png|537px]]

[http://demos.ithemesbuilder.com/ionic-green Live Demo]

[http://ithemes.com/new-builder-child-themes-released/ Blog entry announcing the release of Ionic Sky and Ionic Green]

'''Ionic'''

[[File:Ionic-builder-child-theme.png|537px]]

[http://demos.ithemesbuilder.com/ionic Live Demo]

[http://ithemes.com/ionic-new-builder-child-theme-released/ Blog entry announcing the release of Ionic theme]

==Americana==

'''Americana'''

[[File:Americana-builder-child-theme.png|537px]]

[http://ithemes.com/americana-new-builder-child-theme-released/ Blog entry announcing the release of Americana theme]

[http://demos.ithemesbuilder.com/americana/ Live Demo]

[http://ithemes.com/codex/page/Americana Instructions for setting up Americana to look like the demo site]

'''Americana - Mojave''' (Release Date: January 21, 2011)

[[File:Americana-mojave.png|537px]]

[http://ithemes.com/new-builder-child-themes-released/ Blog entry announcing the release of this theme]

[http://demos.ithemesbuilder.com/americana-mojave Live Demo]

'''Americana - Libertas''' (Release Date: January 21, 2011)

[[File:Americana-libertas.png|537px]]

[http://ithemes.com/new-builder-child-themes-released/ Blog entry announcing the release of this theme]

[http://demos.ithemesbuilder.com/americana-libertas Live Demo]

'''Americana - Interstate''' (Release Date: January 21, 2011)

[[File:Americana-interstate.png|537px]]

[http://ithemes.com/new-builder-child-themes-released/ Blog entry announcing the release of this theme]

[http://demos.ithemesbuilder.com/americana-interstate Live Demo]

==4 more themes in Foundation series==

[[File:Foundation_tropic.jpg]]

[[File:Foundation_bonsai.jpg]]

[[File:Foundation_glacier.jpg]]

[[File:Foundation_blank.jpg]]

[http://ithemes.com/4-new-ithemes-builder-themes-released/ Blog entry announcing these]

==Foundation - WordPress theme for Churches and Ministries==

[[File:Foundation.jpg]]

[http://ithemes.com/foundation-church-wordpress-theme-released/ Blog entry announcing the release of Foundation theme]

[http://demos.ithemesbuilder.com/foundation/ Live Demo]

==Entree Pub==

[[File:EntreePub.png|700px]]

This is another theme in the restaurant series, with a little bit of a pub twist.

[http://ithemes.com/new-builder-child-theme-released-entree-pub/ Blog entry announcing the release of Entree Pub theme]

[http://demos.ithemesbuilder.com/entree-pub Live Demo]

==Entree==

[[File:Builder-child-enree.png|500px]]

This is a child theme associated with Restaurant Block.

[http://demos.ithemesbuilder.com/entree/ Live Demo]

[http://ithemes.com/restaurant-builder-block-and-child-theme-released/ Blog Post]

==Anchor==

[[File:Anchor_ChildTheme.png]]

[http://ithemes.com/new-builder-child-theme-anchor-released/ Blog entry announcing the release of Anchor theme]

[http://demos.ithemesbuilder.com/anchor Live Demo]

[http://ithemes.com/forum/index.php?/topic/4955-question-about-anchor-theme/#p23068 Instructions on how to set up Anchor so it looks like the demo site]

==Slate==

[[File:Slate_ChildTheme.png]]

[http://ithemes.com/new-builder-child-theme-slate/ Blog entry announcing the release of Slate theme]

[http://demos.ithemesbuilder.com/slate/ Live Demo]

==Astro==

[[File:Astro__ChildTheme.jpg]]

[http://ithemes.com/forum/index.php?/topic/2530-astro-child-theme-version-2-released/ Version 2 Release Announcement forum thread]

[http://ithemes.com/new-builder-child-theme-astro-released/ Blog entry announcing the release of Astro theme]

==Default==

[[File:Default__ChildTheme.png]]

==Retro==

[[File:Retro__ChildTheme.png]]

==Vintage==

[[File:Vintage_ChildTheme.png]]

==Coffee==

[[File:Coffee_ChildTheme.png]]

==Fire==

[[File:Fire_ChildTheme.png]]

[http://ithemes.com/more-builder-goodness-coming-your-way/ Blog entry announcing the release of Retro, Vintage, Coffee and Fire themes]

= How to rename a child theme =

'''1.''' Edit Theme Name in child theme's style.css.

Ex.: Change

<code>Theme Name: Builder Child Theme - Default</code>

to

<code>Theme Name: My Awesome Theme</code>

You can also change other values like Theme URI, Description, Author etc.

DO NOT delete or change <code>Template: Builder</code>

'''2.''' Change the name of child theme directory to your liking.

Ex.: Change

<code>BuilderChild-Default </code>

to

<code>MyAwesomeTheme</code>

Ensure that there are no spaces in the name of child theme directory.

= How to update a child theme =

It is generally not recommended to update a child theme after it has been extensively customized.

However, if you would like to, follow these steps:

# Take a full backup of your site using BackupBuddy
# Make a list of changes and addition/deletions done to files and foldes in the current child theme directory
# Download the latest version of child theme, edit its style.css, change the theme name in the comments section at the top, change the theme folder name to something else. For details, see the above section on ''How to rename a child theme''
# Re-apply the changes noted in step 2 to this theme
# Zip it up, install and activate this new theme
# Check the site and ensure that everything is alright. You can use a plugin like [http://wordpress.org/extend/plugins/theme-test-drive/ Theme Test Drive] to see the site in older version of this child theme in another tab/browser

File:Attent-2013-05-25-11-25-48.jpg

2013-05-25T05:56:41Z

Sridhar:

File:Coverage-2013-05-25-11-19-50.jpg

2013-05-25T05:51:33Z

Sridhar:

BuilderChild-Noise

2013-05-23T03:18:47Z

Sridhar: Added == How to make entry box below post titles look simpler ==

= Demo Site =

[http://demos.ithemes.com/noise/ Noise Live Demo]

= Intro =

Noise is a responsive-ready Builder child theme designed to be used in conjunction with a plugin for iThemes Builder, Builder Audio Block.

Designed with musicians and bands in mind, Builder now makes it easy to create a WordPress band website with a "built-in" audio player, a way to display albums or discographies, a list of upcoming shows and support for music downloads/purchases with Easy Digital Downloads.

[http://ithemes.com/2013/03/11/just-released-noise-a-new-builder-child-theme-new-builder-audio-block/ Announcement Blog Post]

= Videos =

{{#ev:vimeo|61387316|640}}

{{#ev:youtube|n7xCgrb0Qik|640|none|Noise Demo Site and Audio Block Walkthrough}}

[http://ithemes.com/2013/03/12/video-noise-demo-site-and-audio-block-walkthrough-ithemestv/ Blog post]

= FAQ =

== How to Assign a Layout to Audio Archive page ==

By default, Audio archive page, http://yoursite.com/audio/ will use <code>Full Width</code> layout (unless the default View Builder ships with is deleted). This comes from the <code>Archives</code> view at My Theme -> Layouts & Views -> Views. This View can be edited and another layout selected which will work for all archive pages including the Audio archive page.

However if you wish to apply a layout just to the Audio archive page, follow this.

Add this code at the end of child theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">
function custom_filter_audio_layout( $layout_id ) {
if ( is_post_type_archive('it_bb_audio') )
return '4f30b1482cde8';

return $layout_id;
}
add_filter( 'builder_filter_current_layout', 'custom_filter_audio_layout' );
</pre>

In the above, change "4f30b1482cde8" to the ID of layout that you wish to assign to Audio archive page.

To find the ID for a Layout, go to the Layouts listing, copy the edit link for the desired Layout, paste the link somewhere, and grab the text after the last equal sign. For example, consider the following link:

<pre>http://yoursite.com/wp-admin/admin.php?page=layout-editor&editor_tab=layouts&layout=4f30b1482cde8</pre>

The Layout's ID for the above is 4f30b1482cde8.

== How to Assign a Layout to Every Single Entry page of Audio CPT ==

=== Method 1 ===

Use <code>Post Type - Audio</code> View at My Theme -> Layouts & Views -> Views to assign a layout to every single Audio entry page.

=== Method 2 ===

Add the following in child theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">
function custom_filter_audio_single_layout( $layout_id ) {
if ( is_singular('it_bb_audio') )
return '513f60026cf01';

return $layout_id;
}
add_filter( 'builder_filter_current_layout', 'custom_filter_audio_single_layout' );
</pre>

In the above, change "513f60026cf01" to the ID of layout that you wish to assign to single Audio pages.

== How to Add Start and End times to Events archive page ==

[[File:Screen Shot 2013-03-23 at 1.46.09 PM.png|800px|thumb|none]]

'''1.''' Install and activate [http://www.advancedcustomfields.com/ Advanced Custom Fields] plugin. Note: At the time of writing this, this plugin that's available in wordpress.org/extend/plugins is not functional and must be downloaded only from the plugin author's site.

'''2.''' Go to Custom Fields -> Custom Fields and add Start Time and End Time custom fields per screenshot below (click for bigger view).

[[File:Edit Field Group ‹ iThemes Builder Test Site — WordPress 2013-03-23 13-52-48.png|271px|thumb|none]]

'''3.''' Edit wp-content/themes BuilderChild-Noise/archive-it_bb_event.php

Below

<pre class="brush: php; gutter: false;">
<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
</pre>

add [http://pastebin.com/w9JpSqwF this] code.

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

<pre class="brush: css; gutter: false;">
.entry-meta.start-time,
.entry-meta.end-time {
display: inline-block;
float: left;
/*margin-right: 2em;*/
padding-top: 0.25em;
/*width: 15%;*/
}

.builder-template-archive-it-bb-event .builder-module .entry-title {
float: left;
width: 25%;
clear: none;
}
</pre>

'''5.''' When creating/editing events, enter the event's start and end times. These (both fields or a single one) can be left empty.

[[File:Edit Event ‹ iThemes Builder Test Site — WordPress 2013-03-23 13-59-38.png|800px|thumb|none]]

== How to Show Links to Navigate to Next and Previous months in Events Calendar View in Firefox ==

When viewing the Events archive page in Calendar view, the buttons to switch to Previous and Next months won't be visible in Firefox. It's fine in other browsers.

To fix this, add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):

<pre class="brush: css; gutter: false;">
.loop-calendar {
clear: both;
}
</pre>

== How to make entry box below post titles look simpler ==

Before:

[[File:Screen Shot 2013-05-23 at 8.35.18 AM.png|653px|thumb|none]]

After:

[[File:Screen Shot 2013-05-23 at 8.34.30 AM.png|628px|thumb|none]]

Note: The below steps are for making the changes per above sample screenshots in Posts page. For making similar changes in other listing views like archives or category pages or search results pages, appropriate template files need to be edited and CSS adjusted.

'''1)''' Create a file named <code>content-index.php</code> in child theme directory having [http://pastebin.com/YJkXePnm this] code.

'''2)''' Edit child theme's <code>index.php</code>.

Change

<pre class="brush: php; gutter: false;">
<?php get_template_part('content', get_post_format()); ?>
</pre>

to

<pre class="brush: php; gutter: false;">
<?php get_template_part('content-index', get_post_format()); ?>
</pre>

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

<pre class="brush: css; gutter: false;">
.blog .entry-meta.author-gravatar-wrapper {
display: none;
}

.blog .left-entry-meta {
margin-left: 0;
}

.blog .meta-wrapper {
background: none;
}

.blog .meta-wrapper {
padding-left: 0;
padding-right: 0;
}

.blog .hentry .entry-meta.categories {
display: inline;
}

.blog .hentry .entry-meta.categories a {
background: none;
border: none;
padding-left: 0;
padding-right: 0;
}

.blog .hentry .entry-meta.categories a:hover {
color: #EFEFEF;
}
</pre>

File:Screen Shot 2013-05-23 at 8.34.30 AM.png

2013-05-23T03:06:53Z

Sridhar:

File:Screen Shot 2013-05-23 at 8.35.18 AM.png

2013-05-23T03:05:48Z

Sridhar:

BuilderChild-Air

2013-05-20T02:25:38Z

Sridhar: Added == How to have logo at left and navigation menu at right ==

== Introduction ==

Builder Child Air is a new foundational or starter child theme for iThemes Builder. Whether you're using the Builder Style Manager or writing your own CSS, we hope Air will be a great new place to start when creating your custom responsive-ready Builder child themes.

Builder child Air includes several convenient built-in features to help lay the groundwork for custom child theme creation. A few of Air's theme highlights include:

* Built-in Mobile-Ready Menu Style
* Fully Optimized for Style Manager
* New Inset Module Styles
* Full Window Image Style

[[File:Air 2013-04-12 09-33-58.png|291px|thumb|none]]

[http://demos.ithemes.com/air/ Live Demo]

[http://ithemes.com/2013/04/04/introducing-air-a-new-foundation-child-theme-for-builder/ Blog entry announcing the release of Air]

== How to Change the Appearance of Search ==

Follow http://ithemes.com/2013/05/03/how-to-change-the-appearance-of-search-in-ithemes-builder-air-child-theme/

== How to show Excerpts instead of full post content on Posts page ==

'''1.''' Duplicate (using a FTP client or cPanel file manager)

wp-content/themes/BuilderChild-Air/post-formats/content.php

as

wp-content/themes/BuilderChild-Air/post-formats/content-excerpt.php

and edit <code>content-excerpt.php</code>.

Replace

<pre class="brush: php; gutter: false;">
<?php the_content( __( 'Read More →', 'it-l10n-BuilderChild-Air' ) ); ?>
</pre>

with

<pre class="brush: php; gutter: false;">
<?php the_excerpt(); ?>
</pre>

'''2.''' Edit Air's <code>index.php</code> and change

<pre class="brush: php; gutter: false;">
<?php get_template_part('post-formats/content', get_post_format()); ?>
</pre>

to

<pre class="brush: php; gutter: false;">
<?php get_template_part('post-formats/content-excerpt', get_post_format()); ?>
</pre>

That's it.

If you would like to do the same in other views like Archives or Search, edit the [http://codex.wordpress.org/images/1/18/Template_Hierarchy.png appropriate files].

== How to have logo at left and navigation menu at right ==

[[File:WordPress Dev Site 2013-05-20 07-52-04.png|800px|thumb|none]]

'''1.''' Create a HTML module and paste this code in the textarea:

<pre class="brush: php; gutter: false;">
<div id="logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/logo.png" alt="Home" /></a></div>

<div class="my-menu-container"><?php wp_nav_menu( array( 'menu' => 'Primary', 'menu_class' => 'builder-module-navigation') ); ?></div>
</pre>

Set <code>Enable PHP</code> to <code>Yes</code>.

[[File:Screen Shot 2013-05-20 at 7.50.56 AM.png|595px|thumb|none]]

Upload your logo to child theme's images directory and replace "logo.png" in the above code with the name of your logo image.

Also change "Primary" in the above code to the name of custom menu at Appearance -> Menus that you wish to appear in the nav bar.

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

<pre class="brush: css; gutter: false;">
#logo {
float: left;
}

.my-menu-container {
float: right;
}
</pre>

[Optional] Also add this CSS to reduce the extra space above and below the content of our HTML module:

<pre class="brush: css; gutter: false;">
.builder-module-2 {
padding-top: 1em !important;
}

.builder-module-2 .builder-module-element {
margin-bottom: 1em !important;
}
</pre>

Change the number <code>2</code> in ".builder-module-2" above to the position of module from the top in layout.

File:Screen Shot 2013-05-20 at 7.50.56 AM.png

2013-05-20T02:23:42Z

Sridhar:

File:WordPress Dev Site 2013-05-20 07-52-04.png

2013-05-20T02:22:32Z

Sridhar:

BuilderChild-Essence

2013-05-16T12:21:12Z

Sridhar: /* Classic Essence and Essence Builder child theme */

== Demo Sites ==

* [http://demos.ithemes.com/builder-essence-blue/ Essence Blue]
* [http://demos.ithemes.com/builder-essence-dark/ Essence Dark]
* [http://demos.ithemes.com/builder-essence-golden/ Essence Golden]
* [http://demos.ithemes.com/builder-essence-red/ Essence Red]
* [http://demos.ithemes.com/builder-essence-silver/ Essence Silver]

== How to have a gradient background for nav bar that works in all browsers incl. IE ==

Before:

[[File:Navbar-essence-ie-before.jpg|800px|thumb|none]]

After:

[[File:03-20-2013 18-39-33.png|800px|thumb|none]]

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

<pre class="brush:css; gutter: false;">
.builder-module-navigation {
background: url('http://f.cl.ly/items/0u0R0O32391A210Y432l/nav-bkgrd.png') repeat-x;
}
</pre>

== Classic Essence and Essence Builder child theme ==

Essence Builder child theme ([http://demos.ithemes.com/builder-essence-golden/ Builder Essence Golden demo]) is not an exact replica of the stand-alone classic Essence ([http://essence.ithemes.com/index.php?wptheme=Golden+Essence classic Golden Essence]), but is close to it. They both have different body backgrounds.

The rotating images feature in classic Essence can be replicated by using Rotating Images plugin. This plugin is free for all iThemes Builder customers.

Due to the flexibility of Builder, not all design elements have remained in the Builder version. For instance, the shadow is a [http://essence.ithemes.com/wp-content/themes/red_essence/images/homebottom.png fixed width background image] with the background colour of the widget module below it. There is no way to incorporate that, whilst also allowing the Builder user to design any width for his site, colours etc AND maintain responsiveness. There are no plans to further update the Essence design. One could examine the specifics from the classic Essence (background images, css code) and reapply them. This will require CSS knowledge, and of course knowledge of the Builder.

== Item 4 ==

BuilderChild-Essence

2013-05-16T08:16:05Z

Sridhar: Added == Classic Essence and Essence Builder child theme ==

BuilderChild-Book-Nook

2013-05-16T03:38:34Z

Sridhar: /* How to set up homepage to look like demo site */

== Introduction ==

Designed with authors in mind, the latest child theme for iThemes Builder will showcase your work perfectly.

[[File:Book-Nook-2012-06-23-12-16-59.jpg|565px|none]]

[http://demos.ithemes.com/book-nook/ Live Demo]

[http://ithemes.com/2012/06/22/new-child-theme-preview-book-nook/ Blog entry announcing the release of Book Nook]

== How to set up homepage to look like demo site ==

Update on Thursday, May 16, 2013: [http://demos.ithemes.com/book-nook/ Book Nook demo site] PSDs can be downloaded from the link in [http://ithemes.com/forum/topic/30883-book-nook-buttons-and-ads/#entry194318 this] forum post.

'''1.''' Create Pages. This will help in setting up nav bar since Pages will be listed in the next step.

'''2.''' Go to Appearance -> Menus. Create a menu named say <code>Main</code> having your desired items (Pages, Categories, custom links etc).

'''3.''' Create a layout named say, <code>Home</code>. Width = 960px.

Add modules in this order:

[[File:2012-07-12 19-25-05.png|460px|thumb|none]]

=== Navigation Module ===

Select the menu created earlier in Navigation Type dropdown.

[[File:2012-07-12 19-32-41.png|576px|thumb|none]]

=== Header Module ===

[[File:2012-07-12 19-33-59.png|470px|thumb|none]]

In the [http://demos.ithemes.com/book-nook/ demo site], an image is placed in a Widget Content widget in Header module's sidebar having the following code:

<pre class="brush: html; gutter: false;">
<a href="http://www.amazon.com/The-Entrepreneurial-Adventure-For-ebook/dp/B006UH274O"><img class="alignnone size-full wp-image-61" title="purchase-small-ad" src="http://demos.ithemes.com/book-nook/files/2012/06/purchase-small-ad.png" alt="" height="58" width="411"></a>
</pre>

Instead of the image, if you would like to use HTML code so you can alter the price and change the "Purchase the Book" phrase, place the following in a text widget in the Header module's widget area:

[http://pastebin.com/EVyVZFiu http://pastebin.com/EVyVZFiu]

Change URL and any text in the above to your liking.

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

<pre class="brush: css; gutter: false;">
/*********************************************
Purchase Button
*********************************************/

.purchase-button a {
display: block;
border: 1px solid #000000;
border-radius: 3px;
background-color: #b35332;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(179, 83, 50)), to(rgb(123, 43, 16)));
background-image: -webkit-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
background-image: -moz-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
background-image: -o-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
background-image: -ms-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
background-image: linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
padding: 0.5em 1.3em;
text-decoration: none;

-webkit-transition: all .2s linear;
-moz-transition: all .2s linear 0s;
max-width: 320px;
width: 100%;
text-align: center;
}

.purchase-button a:hover {

}

.purchase-message {
color: #FFFFFF;
font-size: 1.4em;
text-shadow: 1px 1px 3px #333;
}

.purchase-price {
color: #35160c;
font-size: 1.1em;
padding-left: 0.5em;
}
</pre>

to get

[[File:Purchase-the-book.png|800px|thumb|none]]

=== Widget Bar 1 ===

[[File:2012-07-12 19-35-32.png|467px|thumb|none]]

=== Widget Bar 2 ===

[[File:2012-07-12 19-39-29.png|470px|thumb|none]]

=== Widget Bar 3 ===

[[File:2012-07-12 19-40-43.png|470px|thumb|none]]

=== Footer Module ===

[[File:2012-07-12 19-41-54.png|466px|thumb|none]]

'''4.''' Create a Page named say, <code>Home</code> and select <code>Home</code> layout for this in the <code>Custom Layout</code> meta box. This page can be left blank.

[[File:2012-07-12 19-46-47.png|298px|thumb|none]]

'''5.''' Go to Settings -> Reading. Set <code>Home</code> as the Front page.

[[File:2012-07-12 19-48-19.png|489px|thumb|none]]

'''6.''' Visit your site's homepage and you should see the basic structure similar to that of demo site. Hover on Builder in the top WordPress bar and click on <code>Manage Widgets for this Layout</code>. Add your desired widgets in the sidebars.

BuilderChild-Book-Nook

2013-05-16T01:03:56Z

Sridhar: /* How to set up homepage to look like demo site */

== Introduction ==

Designed with authors in mind, the latest child theme for iThemes Builder will showcase your work perfectly.

[[File:Book-Nook-2012-06-23-12-16-59.jpg|565px|none]]

[http://demos.ithemes.com/book-nook/ Live Demo]

[http://ithemes.com/2012/06/22/new-child-theme-preview-book-nook/ Blog entry announcing the release of Book Nook]

== How to set up homepage to look like demo site ==

Update on Thursday, May 16, 2013: [http://demos.ithemes.com/book-nook/ Book Nook demo site] PSDs can be downloaded from [http://cl.ly/Oz6k here].

'''1.''' Create Pages. This will help in setting up nav bar since Pages will be listed in the next step.

'''2.''' Go to Appearance -> Menus. Create a menu named say <code>Main</code> having your desired items (Pages, Categories, custom links etc).

'''3.''' Create a layout named say, <code>Home</code>. Width = 960px.

Add modules in this order:

[[File:2012-07-12 19-25-05.png|460px|thumb|none]]

=== Navigation Module ===

Select the menu created earlier in Navigation Type dropdown.

[[File:2012-07-12 19-32-41.png|576px|thumb|none]]

=== Header Module ===

[[File:2012-07-12 19-33-59.png|470px|thumb|none]]

In the [http://demos.ithemes.com/book-nook/ demo site], an image is placed in a Widget Content widget in Header module's sidebar having the following code:

<pre class="brush: html; gutter: false;">
<a href="http://www.amazon.com/The-Entrepreneurial-Adventure-For-ebook/dp/B006UH274O"><img class="alignnone size-full wp-image-61" title="purchase-small-ad" src="http://demos.ithemes.com/book-nook/files/2012/06/purchase-small-ad.png" alt="" height="58" width="411"></a>
</pre>

Instead of the image, if you would like to use HTML code so you can alter the price and change the "Purchase the Book" phrase, place the following in a text widget in the Header module's widget area:

[http://pastebin.com/EVyVZFiu http://pastebin.com/EVyVZFiu]

Change URL and any text in the above to your liking.

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

<pre class="brush: css; gutter: false;">
/*********************************************
Purchase Button
*********************************************/

.purchase-button a {
display: block;
border: 1px solid #000000;
border-radius: 3px;
background-color: #b35332;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(179, 83, 50)), to(rgb(123, 43, 16)));
background-image: -webkit-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
background-image: -moz-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
background-image: -o-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
background-image: -ms-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
background-image: linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
padding: 0.5em 1.3em;
text-decoration: none;

-webkit-transition: all .2s linear;
-moz-transition: all .2s linear 0s;
max-width: 320px;
width: 100%;
text-align: center;
}

.purchase-button a:hover {

}

.purchase-message {
color: #FFFFFF;
font-size: 1.4em;
text-shadow: 1px 1px 3px #333;
}

.purchase-price {
color: #35160c;
font-size: 1.1em;
padding-left: 0.5em;
}
</pre>

to get

[[File:Purchase-the-book.png|800px|thumb|none]]

=== Widget Bar 1 ===

[[File:2012-07-12 19-35-32.png|467px|thumb|none]]

=== Widget Bar 2 ===

[[File:2012-07-12 19-39-29.png|470px|thumb|none]]

=== Widget Bar 3 ===

[[File:2012-07-12 19-40-43.png|470px|thumb|none]]

=== Footer Module ===

[[File:2012-07-12 19-41-54.png|466px|thumb|none]]

'''4.''' Create a Page named say, <code>Home</code> and select <code>Home</code> layout for this in the <code>Custom Layout</code> meta box. This page can be left blank.

[[File:2012-07-12 19-46-47.png|298px|thumb|none]]

'''5.''' Go to Settings -> Reading. Set <code>Home</code> as the Front page.

[[File:2012-07-12 19-48-19.png|489px|thumb|none]]

'''6.''' Visit your site's homepage and you should see the basic structure similar to that of demo site. Hover on Builder in the top WordPress bar and click on <code>Manage Widgets for this Layout</code>. Add your desired widgets in the sidebars.

BuilderChild-Air

2013-05-15T12:05:38Z

Sridhar: Added == How to show Excerpts instead of full post content on Posts page ==

BuilderChild-Book-Nook

2013-05-15T09:39:45Z

Sridhar: /* Header Module */

== Introduction ==

Designed with authors in mind, the latest child theme for iThemes Builder will showcase your work perfectly.

[[File:Book-Nook-2012-06-23-12-16-59.jpg|565px|none]]

[http://demos.ithemes.com/book-nook/ Live Demo]

[http://ithemes.com/2012/06/22/new-child-theme-preview-book-nook/ Blog entry announcing the release of Book Nook]

== How to set up homepage to look like demo site ==

'''1.''' Create Pages. This will help in setting up nav bar since Pages will be listed in the next step.

'''2.''' Go to Appearance -> Menus. Create a menu named say <code>Main</code> having your desired items (Pages, Categories, custom links etc).

'''3.''' Create a layout named say, <code>Home</code>. Width = 960px.

Add modules in this order:

[[File:2012-07-12 19-25-05.png|460px|thumb|none]]

=== Navigation Module ===

Select the menu created earlier in Navigation Type dropdown.

[[File:2012-07-12 19-32-41.png|576px|thumb|none]]

=== Header Module ===

[[File:2012-07-12 19-33-59.png|470px|thumb|none]]

In the [http://demos.ithemes.com/book-nook/ demo site], an image is placed in a Widget Content widget in Header module's sidebar having the following code:

<pre class="brush: html; gutter: false;">
<a href="http://www.amazon.com/The-Entrepreneurial-Adventure-For-ebook/dp/B006UH274O"><img class="alignnone size-full wp-image-61" title="purchase-small-ad" src="http://demos.ithemes.com/book-nook/files/2012/06/purchase-small-ad.png" alt="" height="58" width="411"></a>
</pre>

Instead of the image, if you would like to use HTML code so you can alter the price and change the "Purchase the Book" phrase, place the following in a text widget in the Header module's widget area:

[http://pastebin.com/EVyVZFiu http://pastebin.com/EVyVZFiu]

Change URL and any text in the above to your liking.

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

<pre class="brush: css; gutter: false;">
/*********************************************
Purchase Button
*********************************************/

.purchase-button a {
display: block;
border: 1px solid #000000;
border-radius: 3px;
background-color: #b35332;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(179, 83, 50)), to(rgb(123, 43, 16)));
background-image: -webkit-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
background-image: -moz-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
background-image: -o-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
background-image: -ms-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
background-image: linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
padding: 0.5em 1.3em;
text-decoration: none;

-webkit-transition: all .2s linear;
-moz-transition: all .2s linear 0s;
max-width: 320px;
width: 100%;
text-align: center;
}

.purchase-button a:hover {

}

.purchase-message {
color: #FFFFFF;
font-size: 1.4em;
text-shadow: 1px 1px 3px #333;
}

.purchase-price {
color: #35160c;
font-size: 1.1em;
padding-left: 0.5em;
}
</pre>

to get

[[File:Purchase-the-book.png|800px|thumb|none]]

=== Widget Bar 1 ===

[[File:2012-07-12 19-35-32.png|467px|thumb|none]]

=== Widget Bar 2 ===

[[File:2012-07-12 19-39-29.png|470px|thumb|none]]

=== Widget Bar 3 ===

[[File:2012-07-12 19-40-43.png|470px|thumb|none]]

=== Footer Module ===

[[File:2012-07-12 19-41-54.png|466px|thumb|none]]

'''4.''' Create a Page named say, <code>Home</code> and select <code>Home</code> layout for this in the <code>Custom Layout</code> meta box. This page can be left blank.

[[File:2012-07-12 19-46-47.png|298px|thumb|none]]

'''5.''' Go to Settings -> Reading. Set <code>Home</code> as the Front page.

[[File:2012-07-12 19-48-19.png|489px|thumb|none]]

'''6.''' Visit your site's homepage and you should see the basic structure similar to that of demo site. Hover on Builder in the top WordPress bar and click on <code>Manage Widgets for this Layout</code>. Add your desired widgets in the sidebars.

File:Purchase-the-book.png

2013-05-15T09:36:57Z

Sridhar:

Builder CSS Guide

2013-05-09T09:09:09Z

Sridhar: /* How to set up and use custom.css */

==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. [http://getfirebug.com/ 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 [http://ithemes.com/forum/index.php?/topic/925-builder-theme-advanced-css-free-training-videos/ here].'''

Here are few recommended resources for CSS:

*[http://www.brainjar.com/css/using/ BrainJar]
*[http://www.sitepoint.com/videos/videocss1/ The CSS Video Crash Course - SitePoint Videos]
*[http://www.w3schools.com/css/ 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. [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.

=== 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===

<pre class="brush:css;">
.builder-container-outer-wrapper {
margin-top: 0;
}
</pre>

<gallery widths=200px caption="Before and After">
File:Top-margin-container-before.png
File:Top-margin-container-after.png
</gallery>

=== To remove gap between each module ===

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

<pre class="brush:css; gutter: false;">
.builder-module-background-wrapper {
margin-bottom: 0;
}
</pre>

<gallery widths=320px heights=199px>
File:Holistic Nutrition By Lisa 2013-01-25 09-16-09.png|Before
File:Holistic Nutrition By Lisa 2013-01-25 09-15-19.png|After
</gallery>

<u>Note</u>: This only applies to Default child theme.

===To remove the top and bottom borders for all modules===

<u>Note</u>: This only applies to Default child theme.

<pre class="brush:css;">
.builder-module {
border-top: none;
border-bottom: none;
}
</pre>

<gallery widths=200px caption="Before and After">
File:borders-for-modules-before.png
File:borders-for-modules-after.png
</gallery>

===To target a specific module===

<pre class="brush:css;">
#builder-module-4d396c72bbb6b {
}
</pre>

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

[[Image:a-specific-module.png|200px|none]]

===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,

<pre class="brush:css;">
.builder-module-1 {
background: transparent;
}
</pre>

To set all sidebars in first module transparent,

<pre class="brush:css;">
.builder-module-1 .builder-module-sidebar {
background: transparent;
}
</pre>

===To set the height of a specific module===

<pre class="brush:css;">
#builder-module-4d396c72bbb6e {
height: 200px;
}
</pre>

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

<gallery widths=200px caption="Before and After">
File:identifying-a-module.png
File:setting-module-height-after.png
</gallery>

===To remove padding around a specific widget===

<pre class="brush:css;">
#text-3 {
padding: 0;
}
</pre>

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

[[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==

===To target all nav bars===

<pre class="brush:css;">
.builder-module-navigation {
}
</pre>

===To target a specific nav bar===

<pre class="brush:css;">
#builder-module-4d396c72bbb6b {
}
</pre>

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

[[Image:a-specific-module.png|200px|none]]

===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;">
.menu-mainmenu-container {
display: table;
margin: 0 auto;
}
</pre>

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

==== 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,

<pre class="brush:css;">
.builder-module-navigation .builder-module-navigation-menu-wrapper {
display: table;
margin: 0 auto;
}
</pre>

==== For all other types of navigation module ====

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

<pre class="brush:css;">
.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

=== 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==

=== How to center image in Image Module ===

Before:

[[File:WordPress Dev Site - before.png|800px|thumb|none]]

After:

[[File:WordPress Dev Site.png|800px|thumb|none]]

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

<pre class="brush:css; gutter: false;">
.builder-module-1 .builder-module-element img {
margin: 0 auto;
}
</pre>

Change 1 in <code>.builder-module-1</code> to the position of your Image module from the top in layout.

==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==

===Targeting the full widget bar===

To target all widget bars:

<pre class="brush:css;">
.builder-module-widget-bar {
}
</pre>

To target a specific widget bar:

<pre class="brush:css;">
#builder-module-4d3956642cc05 {
}
</pre>

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.

[[Image:Specific-widget-bar-module.png|200px|none]]

===Targeting all the individual widgets globally===

To target all individual widgets of all widget bars:

<pre class="brush:css;">
.builder-module-widget-bar .widget {
}
</pre>

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

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget {
}
</pre>

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===

<pre class="brush:css;">
#text-3 {
}
</pre>

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.

[[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===

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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''right widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''middle widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .middle .widget {
}
</pre>

To target any widget in the '''right widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''second widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-2 .widget {
}
</pre>

To target any widget in the '''third widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-3 .widget {
}
</pre>

To target any widget in the '''right most widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''second widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-2 .widget {
}
</pre>

To target any widget in the '''third widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-3 .widget {
}
</pre>

To target any widget in the '''fourth widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-4 .widget {
}
</pre>

To target any widget in the '''right most widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

==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===

<gallery widths=200px caption="Before and After">
File:2-adjacent-sidebars-before.png
File:2-adjacent-sidebars-after.png
</gallery>

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

<pre class="brush:css;">
.builder-module-content .widget-outer-wrapper-top, .builder-module-content .widget-outer-wrapper-bottom {
display: none;
}
</pre>

==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==

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 <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===

==== 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'''====

<pre class="brush:css;">
.page-id-2 {
background-color: #333333;
}
</pre>

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

<gallery widths=200px caption="Before and After">
File:page-background-before.png
File:page-background-after.png
</gallery>

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

*Examining the body element using Firebug
[[Image:id-from-firebug.png|200px|none]]
*Placing cursor on the Page/post title in edit screen and observing the number in the browser status bar
[[Image:id-in-status-bar.png|200px|none]]

===='''To set a background color to mutiple pages'''====

<pre class="brush:css;">
.page-id-2, .page-id-4 {
background-color: #333333;
}
</pre>

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>

=== 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!

=== How to set up and use <code>custom.css</code> ===

If you would like to place all your custom CSS code in a separate file named, say, <code>custom.css</code>, do the following.

The advantages of doing this over editing the styles inline in style.css or writing at the end of style.css is that all your CSS customizations will be in one file. This file can easily be backed up and used again as needed when updating the child theme (Note however that 99 times out of 100, one does not update child themes). Also it will help the support personnel help you better as the style changes will all be in one place and not inline.

'''1.''' Create a file named <code>custom.css</code> and upload it to active theme directory.

'''2.''' Add the following at the end of active theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">
function my_custom_styles() {
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css', '1.0.0', 'all' );
}
add_action('wp_enqueue_scripts', 'my_custom_styles');
</pre>

Ref.: http://codex.wordpress.org/Function_Reference/wp_enqueue_style

'''3.''' Place your custom CSS code in custom.css. This file will be available for editing at Appearance -> Editor.

Note: Make sure to take a back-up of your customized custom.css when [http://ithemes.com/codex/page/Builder_Child_Themes#How_to_update_a_child_theme updating your active child theme].

Source: http://ithemes.com/forum/topic/36721-why-has-ithemes-not-upgraded-to-wordpress-35/#entry169383

Builder CSS Guide

2013-05-09T04:11:37Z

Sridhar: /* How to set up and use custom.css */

==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. [http://getfirebug.com/ 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 [http://ithemes.com/forum/index.php?/topic/925-builder-theme-advanced-css-free-training-videos/ here].'''

Here are few recommended resources for CSS:

*[http://www.brainjar.com/css/using/ BrainJar]
*[http://www.sitepoint.com/videos/videocss1/ The CSS Video Crash Course - SitePoint Videos]
*[http://www.w3schools.com/css/ 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. [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.

=== 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===

<pre class="brush:css;">
.builder-container-outer-wrapper {
margin-top: 0;
}
</pre>

<gallery widths=200px caption="Before and After">
File:Top-margin-container-before.png
File:Top-margin-container-after.png
</gallery>

=== To remove gap between each module ===

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

<pre class="brush:css; gutter: false;">
.builder-module-background-wrapper {
margin-bottom: 0;
}
</pre>

<gallery widths=320px heights=199px>
File:Holistic Nutrition By Lisa 2013-01-25 09-16-09.png|Before
File:Holistic Nutrition By Lisa 2013-01-25 09-15-19.png|After
</gallery>

<u>Note</u>: This only applies to Default child theme.

===To remove the top and bottom borders for all modules===

<u>Note</u>: This only applies to Default child theme.

<pre class="brush:css;">
.builder-module {
border-top: none;
border-bottom: none;
}
</pre>

<gallery widths=200px caption="Before and After">
File:borders-for-modules-before.png
File:borders-for-modules-after.png
</gallery>

===To target a specific module===

<pre class="brush:css;">
#builder-module-4d396c72bbb6b {
}
</pre>

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

[[Image:a-specific-module.png|200px|none]]

===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,

<pre class="brush:css;">
.builder-module-1 {
background: transparent;
}
</pre>

To set all sidebars in first module transparent,

<pre class="brush:css;">
.builder-module-1 .builder-module-sidebar {
background: transparent;
}
</pre>

===To set the height of a specific module===

<pre class="brush:css;">
#builder-module-4d396c72bbb6e {
height: 200px;
}
</pre>

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

<gallery widths=200px caption="Before and After">
File:identifying-a-module.png
File:setting-module-height-after.png
</gallery>

===To remove padding around a specific widget===

<pre class="brush:css;">
#text-3 {
padding: 0;
}
</pre>

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

[[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==

===To target all nav bars===

<pre class="brush:css;">
.builder-module-navigation {
}
</pre>

===To target a specific nav bar===

<pre class="brush:css;">
#builder-module-4d396c72bbb6b {
}
</pre>

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

[[Image:a-specific-module.png|200px|none]]

===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;">
.menu-mainmenu-container {
display: table;
margin: 0 auto;
}
</pre>

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

==== 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,

<pre class="brush:css;">
.builder-module-navigation .builder-module-navigation-menu-wrapper {
display: table;
margin: 0 auto;
}
</pre>

==== For all other types of navigation module ====

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

<pre class="brush:css;">
.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

=== 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==

=== How to center image in Image Module ===

Before:

[[File:WordPress Dev Site - before.png|800px|thumb|none]]

After:

[[File:WordPress Dev Site.png|800px|thumb|none]]

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

<pre class="brush:css; gutter: false;">
.builder-module-1 .builder-module-element img {
margin: 0 auto;
}
</pre>

Change 1 in <code>.builder-module-1</code> to the position of your Image module from the top in layout.

==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==

===Targeting the full widget bar===

To target all widget bars:

<pre class="brush:css;">
.builder-module-widget-bar {
}
</pre>

To target a specific widget bar:

<pre class="brush:css;">
#builder-module-4d3956642cc05 {
}
</pre>

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.

[[Image:Specific-widget-bar-module.png|200px|none]]

===Targeting all the individual widgets globally===

To target all individual widgets of all widget bars:

<pre class="brush:css;">
.builder-module-widget-bar .widget {
}
</pre>

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

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget {
}
</pre>

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===

<pre class="brush:css;">
#text-3 {
}
</pre>

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.

[[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===

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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''right widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''middle widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .middle .widget {
}
</pre>

To target any widget in the '''right widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''second widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-2 .widget {
}
</pre>

To target any widget in the '''third widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-3 .widget {
}
</pre>

To target any widget in the '''right most widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''second widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-2 .widget {
}
</pre>

To target any widget in the '''third widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-3 .widget {
}
</pre>

To target any widget in the '''fourth widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-4 .widget {
}
</pre>

To target any widget in the '''right most widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

==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===

<gallery widths=200px caption="Before and After">
File:2-adjacent-sidebars-before.png
File:2-adjacent-sidebars-after.png
</gallery>

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

<pre class="brush:css;">
.builder-module-content .widget-outer-wrapper-top, .builder-module-content .widget-outer-wrapper-bottom {
display: none;
}
</pre>

==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==

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 <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===

==== 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'''====

<pre class="brush:css;">
.page-id-2 {
background-color: #333333;
}
</pre>

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

<gallery widths=200px caption="Before and After">
File:page-background-before.png
File:page-background-after.png
</gallery>

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

*Examining the body element using Firebug
[[Image:id-from-firebug.png|200px|none]]
*Placing cursor on the Page/post title in edit screen and observing the number in the browser status bar
[[Image:id-in-status-bar.png|200px|none]]

===='''To set a background color to mutiple pages'''====

<pre class="brush:css;">
.page-id-2, .page-id-4 {
background-color: #333333;
}
</pre>

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>

=== 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!

=== How to set up and use <code>custom.css</code> ===

If you would like to place all your custom CSS code in a separate file named, say, <code>custom.css</code>, do the following.

The advantages of doing this over editing the styles inline in style.css or writing at the end of style.css is that all your CSS customizations will be in one file. This file can easily be backed up and used again as needed when updating the child theme (Note that 99 times out of 100, one does not update child themes). Also it will help the support personnel help you better as the style changes will all be in one place and not inline.

'''1.''' Create a file named <code>custom.css</code> and upload it to active theme directory.

'''2.''' Add the following at the end of active theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">
function my_custom_styles() {
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css', '1.0.0', 'all' );
}
add_action('wp_enqueue_scripts', 'my_custom_styles');
</pre>

'''3.''' Place your custom CSS code in custom.css. This file will be available for editing at Appearance -> Editor.

Note: Make sure to take a back up of your customized custom.css when updating your active child theme.

Source: http://ithemes.com/forum/topic/36721-why-has-ithemes-not-upgraded-to-wordpress-35/#entry169383

Builder CSS Guide

2013-05-09T04:11:04Z

Sridhar: /* Miscellaneous */ Added === How to set up and use a <code>custom.css</code> ===

==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. [http://getfirebug.com/ 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 [http://ithemes.com/forum/index.php?/topic/925-builder-theme-advanced-css-free-training-videos/ here].'''

Here are few recommended resources for CSS:

*[http://www.brainjar.com/css/using/ BrainJar]
*[http://www.sitepoint.com/videos/videocss1/ The CSS Video Crash Course - SitePoint Videos]
*[http://www.w3schools.com/css/ 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. [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.

=== 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===

<pre class="brush:css;">
.builder-container-outer-wrapper {
margin-top: 0;
}
</pre>

<gallery widths=200px caption="Before and After">
File:Top-margin-container-before.png
File:Top-margin-container-after.png
</gallery>

=== To remove gap between each module ===

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

<pre class="brush:css; gutter: false;">
.builder-module-background-wrapper {
margin-bottom: 0;
}
</pre>

<gallery widths=320px heights=199px>
File:Holistic Nutrition By Lisa 2013-01-25 09-16-09.png|Before
File:Holistic Nutrition By Lisa 2013-01-25 09-15-19.png|After
</gallery>

<u>Note</u>: This only applies to Default child theme.

===To remove the top and bottom borders for all modules===

<u>Note</u>: This only applies to Default child theme.

<pre class="brush:css;">
.builder-module {
border-top: none;
border-bottom: none;
}
</pre>

<gallery widths=200px caption="Before and After">
File:borders-for-modules-before.png
File:borders-for-modules-after.png
</gallery>

===To target a specific module===

<pre class="brush:css;">
#builder-module-4d396c72bbb6b {
}
</pre>

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

[[Image:a-specific-module.png|200px|none]]

===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,

<pre class="brush:css;">
.builder-module-1 {
background: transparent;
}
</pre>

To set all sidebars in first module transparent,

<pre class="brush:css;">
.builder-module-1 .builder-module-sidebar {
background: transparent;
}
</pre>

===To set the height of a specific module===

<pre class="brush:css;">
#builder-module-4d396c72bbb6e {
height: 200px;
}
</pre>

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

<gallery widths=200px caption="Before and After">
File:identifying-a-module.png
File:setting-module-height-after.png
</gallery>

===To remove padding around a specific widget===

<pre class="brush:css;">
#text-3 {
padding: 0;
}
</pre>

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

[[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==

===To target all nav bars===

<pre class="brush:css;">
.builder-module-navigation {
}
</pre>

===To target a specific nav bar===

<pre class="brush:css;">
#builder-module-4d396c72bbb6b {
}
</pre>

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

[[Image:a-specific-module.png|200px|none]]

===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;">
.menu-mainmenu-container {
display: table;
margin: 0 auto;
}
</pre>

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

==== 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,

<pre class="brush:css;">
.builder-module-navigation .builder-module-navigation-menu-wrapper {
display: table;
margin: 0 auto;
}
</pre>

==== For all other types of navigation module ====

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

<pre class="brush:css;">
.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

=== 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==

=== How to center image in Image Module ===

Before:

[[File:WordPress Dev Site - before.png|800px|thumb|none]]

After:

[[File:WordPress Dev Site.png|800px|thumb|none]]

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

<pre class="brush:css; gutter: false;">
.builder-module-1 .builder-module-element img {
margin: 0 auto;
}
</pre>

Change 1 in <code>.builder-module-1</code> to the position of your Image module from the top in layout.

==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==

===Targeting the full widget bar===

To target all widget bars:

<pre class="brush:css;">
.builder-module-widget-bar {
}
</pre>

To target a specific widget bar:

<pre class="brush:css;">
#builder-module-4d3956642cc05 {
}
</pre>

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.

[[Image:Specific-widget-bar-module.png|200px|none]]

===Targeting all the individual widgets globally===

To target all individual widgets of all widget bars:

<pre class="brush:css;">
.builder-module-widget-bar .widget {
}
</pre>

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

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget {
}
</pre>

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===

<pre class="brush:css;">
#text-3 {
}
</pre>

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.

[[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===

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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''right widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''middle widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .middle .widget {
}
</pre>

To target any widget in the '''right widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''second widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-2 .widget {
}
</pre>

To target any widget in the '''third widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-3 .widget {
}
</pre>

To target any widget in the '''right most widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''second widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-2 .widget {
}
</pre>

To target any widget in the '''third widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-3 .widget {
}
</pre>

To target any widget in the '''fourth widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-4 .widget {
}
</pre>

To target any widget in the '''right most widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

==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===

<gallery widths=200px caption="Before and After">
File:2-adjacent-sidebars-before.png
File:2-adjacent-sidebars-after.png
</gallery>

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

<pre class="brush:css;">
.builder-module-content .widget-outer-wrapper-top, .builder-module-content .widget-outer-wrapper-bottom {
display: none;
}
</pre>

==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==

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 <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===

==== 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'''====

<pre class="brush:css;">
.page-id-2 {
background-color: #333333;
}
</pre>

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

<gallery widths=200px caption="Before and After">
File:page-background-before.png
File:page-background-after.png
</gallery>

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

*Examining the body element using Firebug
[[Image:id-from-firebug.png|200px|none]]
*Placing cursor on the Page/post title in edit screen and observing the number in the browser status bar
[[Image:id-in-status-bar.png|200px|none]]

===='''To set a background color to mutiple pages'''====

<pre class="brush:css;">
.page-id-2, .page-id-4 {
background-color: #333333;
}
</pre>

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>

=== 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!

=== How to set up and use a <code>custom.css</code> ===

If you would like to place all your custom CSS code in a separate file named, say, <code>custom.css</code>, do the following.

The advantages of doing this over editing the styles inline in style.css or writing at the end of style.css is that all your CSS customizations will be in one file. This file can easily be backed up and used again as needed when updating the child theme (Note that 99 times out of 100, one does not update child themes). Also it will help the support personnel help you better as the style changes will all be in one place and not inline.

'''1.''' Create a file named <code>custom.css</code> and upload it to active theme directory.

'''2.''' Add the following at the end of active theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">
function my_custom_styles() {
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css', '1.0.0', 'all' );
}
add_action('wp_enqueue_scripts', 'my_custom_styles');
</pre>

'''3.''' Place your custom CSS code in custom.css. This file will be available for editing at Appearance -> Editor.

Note: Make sure to take a back up of your customized custom.css when updating your active child theme.

Source: http://ithemes.com/forum/topic/36721-why-has-ithemes-not-upgraded-to-wordpress-35/#entry169383

Builder Frequently Asked Questions

2013-05-03T11:51:31Z

Sridhar: /* Most Frequently Asked Questions */ Added == How to change text and layout of 404 pages in iThemes Builder ==

=Most Frequently Asked Questions=

==Where can I learn about the basics of how Builder works?==

Please start here: http://ithemes.com/builder-basics-training/

==What are child themes? Should I use a child theme?==

It is a good idea to use a child theme (of Builder) as your active theme and not Builder directly. This will protect any modifications and customizations you might have done from being erased when you upgrade Builder.

To learn how to do this, go to:
[http://ithemes.com/ithemes-and-child-themes-introduction/ Child Themes Introduction]
[http://ithemes.com/ithemes-and-child-themes-a-quick-tutorial-1/ Child Themes Tutorial]

Screenshots of the [[Builder Child Themes|available child themes]] for Builder

==Activated a child theme. How come my site does not look like the demo site?==

To get a Builder site with a child theme active to look like the child theme's demo site, it has to be built by way of arranging layouts, modules, widgets and in some cases, editing style.css.

When a child theme is activated, the site will NOT look like the demo site out of the box.

When we create the demo sites, we make no adjustments to any .php or .css files within the theme. The only adjustments we make are within the WordPress dashboard. Like with all themes and child themes (both iThemes and other companies), every site need a little set up. For example, one will need to add some pages, write some posts, create menus, etc. In other words, every site need content. There is no way any theme can do all of these things for customers.

For Thinner child theme (as an example), if one writes some posts, sets a [http://codex.wordpress.org/Post_Thumbnails#Setting_a_Post_Thumbnail post thumbnail] for seven or more of those posts, and selects the slider extension in his/her layout (My Theme > Layouts & Views) that points to his/her main blog, he/she will find a comparable layout as the Thinner home page.

As one can see, there is no way we can provide content for a customer. However, if one takes the time to set up WordPress and add default WordPress items, he/she will see that our child theme demos do represent what a child theme would look like when on a site with content.

If time permits, we will provide instructions on how to create a layout similar to the demo.

Example: [http://ithemes.com/codex/page/Americana#How_to_set_up_Americana_to_look_like_the_demo_site This link] has instructions on how a Builder site with Americana child theme can be made to look like its demo site.

==Use a static page as front page==

Q: I want to have a static page as front page (i.e., at www.mysite.com) and the blog posts to appear at another page, say www.mysite.com/blog. How do I do this?
*Go to Settings -> Permalinks and set the permalink structure to something like /%postname%/
*Create two empty pages (with no content in them) titled '''Home''' and '''Blog'''.
*Go to Settings -> Reading. Under ''Front page displays'', select "A static page (select below)", choose '''Home''' for Front page and '''Blog''' for Posts page. Save changes.

==Apply a layout to the Posts page==

Q:I have created a layout for my Posts page. How do I apply this layout to the Posts page?

A: Go to My Theme -> Layouts and Views. Click on Views tab, then Add View and associate '''Blog''' view with the layout you have created for the Posts page.

==All the pages are getting re-directed to front(home) page==

# Ensure that the default layout has a content module. It is a common occurrence to construct site's home/front page layout with just widget bars, HTML modules etc. and leave it as default. The layout used for Pages, posts, archives, search, category pages etc. must have a content module or else, there will be no place for the content to show up in. Therefore, it is highly recommended that default layout has content module.
# If you using some sort of Redirection plugin, check its settings/deactivate it (for troubleshooting)

==Is it possible to have a 100% full width modules in Builder?==
It is possible to have 100% fluid modules using by editing theme's functions.php. Click [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Use_a_100.25_width_background_for_one_or_more_modules here] for details.

When using the above method, to specify 100% width to more than 1 module see [http://ithemes.com/forum/index.php?/topic/8624-how-to-get-100-background-for-specific-modules/ this forum thread] and [http://ithemes.com/forum/index.php?/topic/10676-styling-the-content-area-from-builder-274-how-to/#p50101 this].

You might also want to check out http://vanweerd.com/how-to-add-full-width-header-and-footer-to-the-builder-theme/

==How do I display post excerpts as opposed to the full posts in my Posts page?==

Edit your active theme's (should be a child theme of Builder) ''index.php''. (Note: for the Acute theme, edit ''content.php'').

Replace a line similar to

<pre class="brush:php;">
<?php the_content( __( 'Read More→', 'it-l10n-Builder' ) ); ?>
</pre>

with

<pre class="brush:php;">
<?php the_excerpt(); ?>
</pre>

Note: To do the same for other views like category pages, edit the appropriate template file - archive.php, in this case. See http://codex.wordpress.org/images/1/18/Template_Hierarchy.png

If you would like to control the number of characters to appear in excerpts and change the cut-off character from "..." to something else, you might want to use [http://wordpress.org/extend/plugins/the-excerpt-re-reloaded/ The Excerpt re-reloaded] or [http://wordpress.org/extend/plugins/excerpts-deluxe/ Excerpts Deluxe] or [http://wordpress.org/extend/plugins/advanced-excerpt/ Advanced Excerpt].

Also see http://codex.wordpress.org/Function_Reference/the_excerpt

==How do I display full posts as opposed to post excerpts in my Posts page?==

Edit your active theme's '''index.php'''. (Note: for the Acute theme, edit ''content.php'').

Replace

<pre class="brush:php;">
<?php the_excerpt(); ?>
</pre>

with

<pre class="brush:php;">
<?php the_content('Read more...'); ?>
</pre>

== How to place nav bar to the right of logo ==

Follow http://ithemes.com/codex/page/BuilderChild-Default#How_to_place_nav_bar_to_the_right_of_logo

==How do I edit the footer?==

=== Method 1 ===

Make a copy of ''footer.php'' from parent Builder directory, edit it and place in your child theme's (active theme) directory.

[http://ithemes.com/builder-tip-how-to-edit-footer/ Video and detailed instructions]

Examples of customized footer.php: [http://d.pr/MwxJ 1]

'''If you would like to have a footer.php that looks like the screenshot below as starting point to use as is or further customize''', download [http://cl.ly/0z1C1X32243A30462F1q this] zip file, extract it and upload footer.php to your child theme directory.

[[File:Custom-footer.png|800px|thumb|none|Screenshot showing customized footer - Click to enlarge]]

This is the code in footer.php just in case the download link does not work:

<pre class="brush:php;">
<?php

function render_footer() {
?>

<div class="alignmiddle">
<p><a href="<?php bloginfo('url'); ?>">Home</a> | <a href="<?php bloginfo('url'); ?>/privacy-policy/">Privacy Policy</a> | <a href="<?php bloginfo('url'); ?>/terms-conditions/">Terms & Conditions</a></p>
<p><?php echo date( 'Y' ); ?> - Copyright © All Rights Reserved</p>
</div>


<?php wp_footer(); ?>
<?php

}

add_action( 'builder_layout_engine_render_footer', 'render_footer' );

?>
</pre>

In the above replace & with '''& a m p ;''' without spaces and © with '''& c o p y ;''' without the spaces.

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

<pre class="brush:css;">
.alignmiddle {
text-align: center;
}
</pre>

=== Method 2 ===

To remove the credit to iThemes Builder (but leave the standard copyright notice, powered by WordPress etc.) you could also include this function in your child theme's functions.php:

<pre class="brush:php;">
add_filter( 'builder_footer_credit', 'custom_builder_footer_credit' );

function custom_builder_footer_credit( $footer_credit ) {
$footer_credit = 'Powered by <a href="http://wordpress.org">WordPress</a><br />Customized by <a href="http://me.com/">Myself!</a>';

return $footer_credit;
}
</pre>

Ensure that line numbers are not present in the code in functions.php.

See http://www.screencast.com/t/R2hJBzCRk and http://www.screencast.com/t/ZajvGiQGo

Source: http://ithemes.com/forum/index.php?/topic/12687-edit-footer/#p59955

== How to backup and restore a WordPress site that uses Builder ==

=== Manually ===

The standard method of backing up database, editing the resulting .sql file to do a find and replace of source and destination URLs, importing the modified .sql to the new server and then uploading the files will not work in case of Builder sites.

The reason for this is that simple find and replace can not handle [http://wpgarage.com/tips/data-portability-and-data-serialization-in-wordpress/ serialized data]. A solution that handles serialized data must be used. We have tested [http://wordpress.org/extend/plugins/wp-migrate-db/ WP Migrate DB] successfully to manually copy a Builder site with no loss of data (layouts incl their IDs, Style Manager Styles, widgets etc.) from one location to another.

=== Automated (simpler and faster) ===

[http://pluginbuddy.com/purchase/backupbuddy/ BackupBuddy] is the only solution that lets you completely backup and restore a Builder site. For a discussion on the reason behind this, see post #8 at [http://ithemes.com/forum/index.php?/topic/7451-how-do-i-restore-a-site-to-a-different-host-wo-losing-layouts-and-wo-using-backupbuddy/ this] forum thread.

==How to add a custom favicon==

# go to using wp-dashboard > My Theme > Settings, click Favicon and select an icon, or upload your own
# alternatively (but not recommended) you can upload favicon.ico file to your child theme's images directory. Ex.: wp-content/themes/BuilderChild-Foundation/images

Tip: There are services like [http://www.htmlkit.com/services/favicon/ this] and [http://tools.dynamicdrive.com/favicon/ this] which lets you upload a regular image (jpg, png, gif etc.) and convert them to a .ico file.

==How to upgrade Builder?==

See [[Builder_Documentation#How_to_upgrade_Builder|How to upgrade Builder]]

==How to fix "Fatal Error: Class 'ITStorage2' not found"==

This happens because of upgrading Builder without first updating the associated plugins like Style Manager and SEO plugin.

This could have been avoided by following the instructions we provided on how to upgrade Builder [[Builder_Documentation#How_to_upgrade_Builder|here]].

To fix the issue,

# Connect to your web server using either the file manager in cPanel of your hosting account or a FTP client.
# Download the latest versions of Style Manager (if you are using this plugin) and Builder SEO plugin (if you are using this plugin) zip files from your [http://ithemes.com/member/member.php Member Panel].
# Extract the contents of these plugins (whichever is being used i.e., present at wp-content/plugins) and upload them to the corresponding directories in wp-content/plugins overwriting the existing ones.

==How to upgrade Builder when a child theme isn't being used?==

It is always good to use a child theme of Builder as the active theme and not Builder directly. This will avoid custom changes to the theme files from being overwritten by the upgrade.

If you were not aware of this and have been directly using Builder as the active theme and would like to now upgrade to the latest version, follow this approach:

# Take a full backup of your site using [http://pluginbuddy.com/purchase/backupbuddy/ BackupBuddy]. If purchasing BackupBuddy is not an option, take a backup of wp-content/themes/Builder directory and WordPress database (using phpMyAdmin or otherwise) at the least.
# Make a note of all file changes (modifications and new additions) inside Builder directory. Usually modifications will be done to templates like index.php, single.php, archive.php and style.css.
# Upload the latest default child theme to wp-content/themes. It can be downloaded from [http://ithemes.com/member/member.php member panel].
# Apply all changes that were noted in step 2 in wp-content/themes/BuilderChild-Default
# Upgrade Builder to the latest version by following the steps in http://ithemes.com/codex/page/Builder_Documentation#How_to_upgrade_Builder
# Activate the child theme.
# Check your site and fix anything that is amiss. If there are any links whose URLs point to files inside Builder directory, they may have to be changed to point to the child theme directory.

==How do I add search at the right side of my nav bar?==

=== Method 1 ===
Pre-requisite: WordPress 3+, Builder 2.4.10+

Rather than using the navigation module, add an HTML module where you want the navigation to appear
*add the following content to the textbox (assuming your menu is called "menu1", change of course if needed):

<pre class="brush:php;">
<div id="nav_container">
<?php wp_nav_menu( array( 'menu' => 'menu1', 'menu_class' => 'builder-module-navigation') ); ?>

<div class="search_in_nav">
<?php get_search_form(); ?>
</div>

</div>
</pre>
*save the html module, select <tt>no sidebars</tt>, and <tt>enable PHP</tt>,
*save the Builder layout
*add the following code to your stylesheet:
<pre class="brush:css;">
#nav_container {
height: 34px;
display: block;
width: 100%;
background: #FFFFFF url('images/nav_bg.png') repeat top left;
}

.search_in_nav {
float: right;
display: block;
width: 250px;
height: 24px;
padding: 0px 5px;
margin: 0px;
}
</pre>
*play around a bit with the margins and paddings, heights and widths.

'''Note: This method can also be applied to place a image or RSS feed or any HTML in the nav bar.'''

[http://ithemes.com/forum/index.php?/topic/5151-dps-solutions-builder/#p23629 this topic on the forum]

[http://vanweerd.com/how-to-replace-text-links-with-icon-links-in-wp-3-navigation-menus/ Additional Resource 1], [http://ithemes.com/forum/index.php?/topic/10290-adding-social-media-icons-to-the-main-menu-nav/ Additional Resource 2]

=== Method 2 ===

http://ithemes.com/codex/page/Builder_Tips_and_Tricks#How_to_add_a_search_form_at_the_right_side_in_a_nav_bar

==At Appearance -> Editor, templates like footer.php do not appear==

See [http://ithemes.com/forum/index.php?/topic/12061-why-is-child-theme-forum-locked/#p56540 this] and [http://wordpress.org/support/topic/child-themes-in-31-rc2?replies=8 this].

==PCLZIP_ERR_BAD_FORMAT==

When Builder is being installed, if the following appears

<blockquote>
Installing Theme from uploaded file: Builder.zip

Unpacking the package…

Incompatible Archive. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature
</blockquote>

it means that the zip file is corrupt. Try re-downloading it using another browser.

From our observation, this is happening only on Macs. So if you have a spare Windows computer, try downloading Builder again from PC.

==How to center my navigation menu==

http://ithemes.com/codex/page/Builder_CSS_Guide#To_center_the_content_of_nav_bar

== How to assign a layout to all posts belonging to a specific category ==

No view exists which can be used for all single post pages belonging to a particular category.

There are design questions that need to be addressed before implementing such a view. What will happen if a post belongs to multiple categories? In such case suppose the user sets a view associating all posts from Category A and another one for all posts from Category B, and if a post belongs to both the categories there will be conflicting views which leads to the question: which layout should be applied for that post's single page?

The only way currently is to edit each post and set the layout manually.

Forum topic on this: http://ithemes.com/forum/topic/17616-layout-for-single-post-page-of-only-one-post-category/

===Update: There now is a fairly straightforward solution for this===
Chris has come up with a code snippet that needs to be placed in child theme's <code>functions.php</code> which allows you to specify a specific layout using specific conditions.

<pre class="brush:php;">
function custom_filter_category_layouts( $layout_id ) {
if ( is_single() && in_category( 'news' ) )
return '4e5f997043d8e';

return $layout_id;
}
add_filter( 'builder_filter_current_layout', 'custom_filter_category_layouts' );
</pre>

The builder_filter_current_layout filter runs after the Layout selection process has finished and allows custom code to have the final say on what Layout is used. The example code will force the current Layout to be the one with an ID of "4e5f997043d8e" if the site is currently showing an individual post that is in the "news" category. If this condition isn't met, it returns the current Layout ID so that it doesn't change any of the other portions of the site. This can be modified to use any category and any Layout ID.

To find the ID for a Layout, go to the Layouts listing, copy the edit link for the desired Layout, paste the link somewhere, and grab the text after the last equal sign. For example, consider the following link:

<pre>http://example.com/wp-admin/admin.php?page=layout-editor&editor_tab=layouts&layout=4e5f997043849</pre>

The Layout's ID is 4e5f997043849.

To use the code, simply add it to your child theme's functions.php file."

See also: http://ithemes.com/forum/topic/22220-assigning-a-layout-for-post-page-by-category

==Does WordPress 3.0 menu system work in Builder?==

Oh yes! Even before the WordPress 3.0 menu system's final version got released. Then what about this message "Your theme supports 0 menus. Select which menu appears in each location."?, you may be asking. Well, just ignore it. Go ahead and create your menu at Appearance -> Menus, then edit your layout and in the navigation module's settings, select "Custom Menu - ''name''".

You might want to watch [http://ithemes.com/wordpress-3-0-menus-demo-video-on-ithemes-builder/ WordPress 3.0 Menus Demo Video on iThemes Builder].

== How to use a custom font in Builder? ==

See [http://ithemes.com/forum/topic/29969-how-to-add-custom-menu-fonts-to-builder/page__view__findpost__p__138928 this] forum post for an example.

== Builder and BuddyPress ==

Builder's child theme [http://ithemes.com/codex/page/Builder_Child_Themes#Yukon Yukon] has built-in support for BuddyPress. It is designed specifically to work with BuddyPress, and does not require the template pack.

To install BuddyPress while using Builder Yukon as a child theme, follow these steps:

# Install WordPress
# Upload the [http://wordpress.org/extend/plugins/buddypress/ BuddyPress plugin] (from WP repository)
# Activate and follow the BuddyPress installation five-step walkthrough (during step #4 choose to use the included BuddyPress theme, and then finish the installation)
# Upload Builder Theme (Core)
# Upload the Builder child Yukon theme and activate. With Builder and BuddyPress now setup, begin customization.

For all other Builder child themes, BuddyPress need to be installed like it will be installed for any other WordPress theme. Those will require the BuddyPress template pack plugin. On using the template pack: http://wordpress.org/extend/plugins/bp-template-pack/

More [http://ithemes.com/2012/03/14/our-first-builder-child-theme-for-buddypress-yukon/ here] and a follow up post [http://ithemes.com/forum/topic/25458-when-to-activate-buddypress-template-packmembership/ here].

== How to change text and layout of 404 pages in iThemes Builder ==

Copy <code>not_found.php</code> from parent Builder directory into active child theme directory and edit it to your liking.

[http://pastebin.com/ERwP3BmB Here] is a sample modified not_found.php file.

To apply your desired layout to any 404 page, '''add a 404 View''' at My Theme -> Layouts & Views -> Views (tab).

Sample screenshot:

[[File:Screen Shot 2013-05-03 at 5.15.49 PM.png|365px|thumb|none]]

= Less Frequently Asked Questions =

== How do I disable comments on all Pages? ==

Use the [http://wordpress.org/extend/plugins/no-comments-on-pages/ no comments on pages] plugin

==I want to get rid of the text "Comments are closed" at the bottom of the content==

Add the following to your theme's style.css:

<pre class="brush:css;">
.nocomments {
display: none;
}
</pre>

==Uploaded images do not appear==

'''1.''' Ensure that the image is saved in the right format (extension). For example, if a png file is incorrectly saved as .jpg, then it won't work. Two ways of checking this is opening the image in a) Photoshop b) Irfanview.

'''2.''' WordPress 3.5 has taken away the option to manually change the path through WordPress settings, but one can follow [http://www.wpbeginner.com/wp-tutorials/how-to-change-the-default-media-upload-location-in-wordpress-3-5/ these] instructions, and set it to

<pre class="brush: php; gutter: false;">
define( 'UPLOADS', 'wp-content/'.'uploads' );
</pre>

In your WP dashboard go to Settings -> Media. Tick the option to organize uploads in year and month based folders.

'''3.''' Check to see if GD image library support is enabled in your hosting. This can be checked by saving the following as a php file, say phpinfo.php and accessing it from the URL like yoursite.com/phpinfo.php.

<pre>
<?php phpinfo();?>
</pre>

Tip: While uploading an image in image module if you want a fully wide image (i.e., no sidebar) ensure that image width is the same as that of layout. Also specify the exact image height in the module's settings. This will avoid the image from getting stretched disproportionately.

==I am unable to drag and drop widgets onto the sidebar==

*Deactivate all your plugins and try.
*See also this [http://ithemes.com/forum/index.php?/topic/619-widget-problem-no-sidebars-defined/#p2769 support forum thread]

==Add Module shows a blank window==
Q: When I go into My Theme, Layout, Create Layout then choose Add Module, a blank window comes up and just seems to hang there.

A: Deactivate FCKEditor plugin.

B. Deactivate White Label CMS plugin

==Is it possible to have vertical navigation?==
See [http://ithemes.com/forum/index.php?/topic/4697-vertical-navigation/#p23709 this video], the content of interest starts at 07:38 in the video

Pages and/or Categories widget can be used in the sidebar of any widget.

Other solutions:
*[http://wordpress.org/extend/plugins/page-tree/ page tree] plugin
*[http://wordpress.org/extend/plugins/flexi-pages-widget/ flexi pages widget] plugin
*[http://wordpress.org/extend/plugins/simple-sidebar-navigation/ simple sidebar navigation] plugin
*[http://wordpress.org/extend/plugins/allwebmenus-wordpress-menu-plugin/ allwebmenus wordpress menu] plugin
*[http://green-beast.com/blog/?p=157 this] article

==The theme you are currently using isn't widget-aware==
Q: I can't put any widgets in the theme and keep getting this pop-up "The theme you are currently using isn’t widget-aware, meaning that it has no sidebars that you are able to change. For information on making your theme widget-aware, please follow these instructions."

A:
* Go to the Appearance > Widgets page
* Click the Screen Options tab towards the top-right of the page
* Click the "Disable accessibility mode" link

See also this [http://ithemes.com/forum/index.php?/topic/2056-widgets-not-working/#p9231 Support forum thread]

==How to I remove the space at the top of the page==
Add the following code at the end of your child theme's style.css.

<pre class="brush:css;">
.builder-container-outer-wrapper {
margin-top: 0;
}
</pre>

==The last image in billboard appears below compared with the others==

To fix this, add the following at the end of your theme's style.css:

<pre class="brush:css;">
.ithemes-billboard :last-child {
margin-bottom: 1.5em !important;
}
</pre>

==How do I get notified by email whenever there's a Builder update?==

Updates to [http://ithemes.com/codex/page/Category:Builder/Release_Notes Builder Release Notes] page can be tracked via its RSS feed. We can use a service like [http://www.feedmyinbox.com/ Feed My Inbox] to have this RSS feed delivered to your email inbox automatically.

==array_merge() warning==
When a child theme of Builder is activated, if a warning similar to the one below appears on the site

<pre>Warning: array_merge() [function.array-merge]: Argument #1 is not an array in ..\themes\Builder\lib\layout-engine\sidebars.php on line 264</pre>

the fix is to reset the theme.

Go to My Theme -> Settings. Click ''Reset Options'' button.

==Author link contains spaces==

For description of the problem and the solution, visit [http://ithemes.com/forum/index.php?/topic/9701-author-link-produces-404-page-not-found-error/#p45268 this forum post].

==Make parent navigation item not clickable==

Q: I want to create a menu item in the navigation (page defined nav) that has child pages but this menu item shouldn't be clickable.

A: Check [http://ithemes.com/forum/index.php?/topic/5123-wp-30-creating-a-drop-down-menu-without-the-top-level-item-opening-a-page/ this forum post] or you can use a plugin, such as the [http://wordpress.org/extend/plugins/page-lists-plus/ page lists plus plugin]

== How to remove bullets above tabs in Tabber Widget widgets ==

<gallery widths=200px caption="Before and After">
File:Tabber-bullets-before.png
File:Tabber-bullets-after.png
</gallery>

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

<pre class="brush:css;">
ul.tabber-widget-tabs {
list-style: none;
}
</pre>

==How to show blog posts at site's front page (/) as well as at another Page (/blog)==

# At Settings -> Reading, ensure that Front page is set to display latest posts. This is the default setting in WordPress.
# Create a new Page (or edit an existing one) named say, Blog, ensure that it is blank, set the Template to ''Blog Template'' and publish/update it.
# [Optional] If you would like to apply a layout to front page, go to My Theme -> Layouts, create a layout (or duplicate existing one) for it, go to Configure Views, Add View and add associate Home view with the layout created for front page.
# [Optional] If you would like to apply a layout to Blog page, edit the Page and select your desired layout from Custom Layout meta box.

==How to disable Builders built-in SEO functions==
In your WordPress backend, go to My Theme -> Settings and set 'Would You like to use post tags as META keywords on single posts?' to NO (Yes is the default).

Then add the following code your child theme's functions.php as described.

<pre class="brush:php;">
// Remove Parent themes SEO
function remove_seo() {
remove_action( 'builder_add_meta_data', 'builder_seo_options' );
}

add_action('init', 'remove_seo');
</pre>

See also this [http://ithemes.com/forum/index.php?/topic/1243-seo/#p6094 support forum thread]

==What is the recommended way to edit theme templates like index.php and archive.php?==

See [http://ithemes.com/forum/index.php?/topic/12061-why-is-child-theme-forum-locked/#p56540 this forum post]

==How to change the name of a child theme?==

Follow [http://ithemes.com/forum/index.php?/topic/11935-changed-the-name-of-the-child-theme-and-now-the-site-is-messed-up/#p55943 this] example.

==Where is functions.php?==

One should never make changes in functions.php inside parent Builder directory. functions.php in child theme directory should be the one to make changes in. Some child themes will have functions.php and some don't. If this file is not present in child theme directory, create a new file named functions.php, place opening (<?php) and closing (?>) PHP tags, save and upload it to child theme directory using a FTP client. Alternately cPanel's file manager also lets us create files on the server.

Here is how a sample fresh functions.php file looks like:

<pre class="brush:php;">
<?php

?>
</pre>

Any code that we advise you to add in functions.php must be added before the closing PHP tag.

== Which Builder themes are mobile compatible? ==

With Builder, any of our child themes could be used as mobile themes simply by setting up your layout to be more narrow like the size of the iPhone screen.

Here are a few things to consider with mobile themes though:

Load times are slow, so you will want to use a theme that doesn't have many images to load. Any of the Foundation themes are a good example of this (among others).

None of our existing child themes have any gesturing built in to them, so some of the gestures that are very useful on the iPhone won't exist in child themes.

We do offer the [http://pluginbuddy.com/purchase/mobile/ Mobile plugin], which comes with a set of themes and a simple style manager that will allow you to match the colors of your mobile theme to the colors of your standard theme. You should have access to the Mobile plugin in your member area.

== What are the minimum requirements for running Builder ==

The same as those needed for running WordPress 3.2 namely: at least php 5.2.4 and MySQL 5+.

More info: http://ithemes.com/forum/index.php?/topic/15708-minimum-requirements-for-builder-theme/

== How to setup a server on your computer, develop Builder sites locally and migrate them to another location ==

If you are on Windows:

# Install [http://www.apachefriends.org/en/xampp.html XAMPP].
# Set C:\xampp as the installation folder, now your localhost root will be in "htdocs" folder inside C:\xampp.
# [Optional] Set a password for MySQL.
# Download WordPress, extract the zip file and copy/move 'wordpress' folder inside C:\xampp\htdocs. Rename 'wordpress' folder to whatever is the name of your project.
# Install WP [http://codex.wordpress.org/Installing_WordPress#Famous_5-Minute_Install manually].
# [http://ithemes.com/codex/page/Builder_Documentation#How_to_install_Builder Set up Builder].
# Once it is all ready, use BackupBuddy to do a full backup. The generated zip file should be in wp-content/uploads. Download importbuddy.php.
# To learn how to restore the site to another location, watch the video [http://pluginbuddy.com/purchase/backupbuddy/backupbuddy-training/ here].

If you are on Mac, install free version of [http://www.mamp.info/ MAMP] by following [http://www.youtube.com/watch?v=EJFmogQVG8c this] video. Do from step 4 (the root folder on Mac will differ) onwards listed above. I have set "Sites" inside my user directory as the root.

Screenshot:

[[File:Screen shot 2011-07-23 at 9.24.59 AM.png|800px|thumb|none]]

== Can Builder be used to create a fluid/responsive site? ==

Very soon.

Builder is becoming responsive.

See http://ithemes.com/2012/10/10/responsive-is-coming-to-ithemes-builder/

== I installed my Builder powered WordPress site at site.com/wordpress. How do I move it to site.com? ==

Follow [http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory#Using_a_pre-existing_subdirectory_install this].

[http://ithemes.com/forum/topic/20738-replacing-old-html-site-with-new-wordpress-site/ Forum topic].

== My site is loading slow ==

The extra divs in the markup generated by Builder aren't going to impact site performance. A standard WordPress site with a fresh installation of Builder with no plugins loads just fine without any slowness on a decent host like HostGator. Site slowness, if present is (in 99% of the cases) not coming from Builder, but from other factors like non-optimized images, a lot of scripts added by plugins, hosting setup etc.

Things to check for when your site is loading slow:

# Ensure that images (like the ones in header, sliders, Pages and Posts) are optimized for web.
# Ensure that there are no references/calls to URLs (links within the site) that do not exist.
# Deactivate plugins and see if it makes a difference.
# Try using a caching plugin like W3 Total Cache and/or a CDN.
# Analyze your site in http://gtmetrix.com/

Some useful links:

* http://richwp.com/wordpress-cdn-total-cache-amazon-cloudfront/
* http://wp.tutsplus.com/tutorials/the-ultimate-quickstart-guide-to-speeding-up-your-wordpress-site/
* http://www.noupe.com/how-tos/speeding-up-wordpress.html
* http://wpshout.com/faster-wordpress/
* http://css-tricks.com/video-screencasts/114-lets-do-simple-stuff-to-make-our-websites-faster/

== What are the requirements for using Builder? ==

At a minimum, we have the same requirements as WordPress. As can be seen on the [http://wordpress.org/about/requirements/ WordPress requirements page], the minimum supported version of PHP at the time of writing this is 5.2.4.

Builder will always be updated to handle any issues present in future PHP releases. A few versions back, Builder had some issues with the PHP 5.4.x releases. These issues have since been fixed.

So, as of this very moment, Builder is officially compatible with 5.2.4+.

== Why do you advise me to add CSS code at the end of style.css versus directly modifying within? ==

The safest way to make css modifications is if you copy the code that our support moderators supply literally and add it in the location suggested. If you feel more confident hacking into existing code through changes that might cripple your site, feel free to do so, but we will not advise you to do so.

For example, if the code doesn't work (which is highly unlikely, since we test all code before we suggest it), and it's added at the end of your stylesheet, it will NOT harm anything, and we can review what you did, and suggest on how to fix it (did you forget a { or a ; or another character). If however something went bad halfway your stylesheet, your site could easily be completely messed up and all css following any invalid code (for example a missing { or } ) will be invalid as well.

This is our professional advise, but of course, you are free to choose whichever solution you think is best. Do note that it will frustrate our support efforts if there is an issue, and we have to search through a couple of hundred lines of css code to see what might or might not have been changed, opposed to just scrolling to the end of your stylesheet, and locate all customisations in one spot.

== Layouts do not appear correctly ==

Before:

[[File:Wp1 2013-04-30 10-27-47.png|800px|thumb|none]]

After:

[[File:Wp1 2013-04-30 10-28-06.png|800px|thumb|none]]

If the site does not appear correctly with the container not centered and everything aligned to the left, ensure that permissions of all directories in (including) <code>wp-content/uploads</code> is '''755'''.

Especially these directories in <code>uploads</code> directory:

* it-file-cache
* it-file-cache/builder-core
* it-file-cache/builder-layouts

[[File:Screen Shot 2013-04-30 at 10.24.25 AM.png|304px|thumb|none]]

File:Screen Shot 2013-05-03 at 5.15.49 PM.png

2013-05-03T11:47:41Z

Sridhar:

Plugin related and other generic customizations 2

2013-04-30T07:42:25Z

Sridhar: /* Examples of Using jQuery in Builder */ Added === Easy Accordion jQuery plugin in iThemes Builder ===

'''This is Page 2 of ''Plugin related and other generic customizations in Builder''. [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_in_Builder Here] is Page 1.'''

== How to add social media icons in nav bar ==

This can be done in at least 2 different ways. The primary difference between method 1 and 2 is that in method 2, left margin for first social icon has to be manually adjusted every time a menu item in the nav bar is changed. For this reason, '''method 1 is recommended'''.

=== Method 1 ===

[[File:2012-09-02 12-52-02.png|800px|thumb|none]]

'''1.''' Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.

'''2.''' Instead of a navigation module, use a PHP enabled HTML module having this sample code:

<pre class="brush:php;">
<?php wp_nav_menu( array( 'menu' => 'primary', 'menu_class' => 'builder-module-navigation') ); ?>

<div class="my-social-icons">
<ul>
<li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="http://ithemes.com/builder/misc/social-media-icons/32/facebook.png"></a></li>

<li class="social-icon"><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="http://ithemes.com/builder/misc/social-media-icons/32/twitter.png"></a></li>

<li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on RSS" alt="Follow Us on RSS" src="http://ithemes.com/builder/misc/social-media-icons/32/rss.png"></a></li>

<li class="social-icon"><a target="_blank" rel="nofollow" href="mailto: admin@yoursite.com"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="E-mail Us" alt="E-mail Us" src="http://ithemes.com/builder/misc/social-media-icons/32/email.png"></a></li>
</ul>
</div>
</pre>

Note:

# In the above, change <code>primary</code> to the slug of your custom menu. Ex.: If the name of your custom menu is "Main Menu", it slug will be <code>main-menu</code>.
# It is recommended to use the social icons from your WordPress site. You should download the icons referred to in the above code, upload them to your site and use those links instead.

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

<pre class="brush:css;">
/************************************************************************
For right floating social icons in a HTML module showing nav bar
*************************************************************************/

.builder-module-2 {
background: #FAA51B;
}

.menu-primary-container {
float: left;
}

#menu-primary {
margin-bottom: 0;
}

li.social-icon a, li.social-icon a:hover {
padding: 1px 0 0 8px;
}

li.social-icon a:hover {
opacity: 0.8;
-moz-opacity: 0.8;
background: none;
}

li.social-icon:hover,
li.social-icon:hover a {
background: none;
}

.my-social-icons {
float: right;
margin-right: 10px;
padding-top: 8px;
}

.my-social-icons ul {
list-style: none;
}

.my-social-icons li {
float: left;
}
</pre>

Note: In the above

a) Change the number (2) in <code>.builder-module-2</code> so it is the module number from top in layout.

b) In

<pre class="brush:css;">
.builder-module-2 {
background: #FAA51B;
}
</pre>

replace <code>background: #FAA51B;</code> with child theme's styles set for navigation module or in the case of Thinner, those of <code>.builder-module-navigation ul.menu</code>. i.e.,

<pre class="brush:css;">
.builder-module-2 {
/*background: #FAA51B;*/
overflow: hidden;
background: #F6F6F6;
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F6F6F6));
background: -webkit-linear-gradient(#FFFFFF, #F6F6F6);
background: -moz-linear-gradient(#FFFFFF, #F6F6F6);
background: -ms-linear-gradient(#FFFFFF, #F6F6F6);
background: -o-linear-gradient(#FFFFFF, #F6F6F6);
background: linear-gradient(#FFFFFF, #F6F6F6);
border: 1px solid #FFF;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: #AAAAAA 1px 1px 2px;
-moz-box-shadow: #AAAAAA 1px 1px 2px;
-o-box-shadow: #AAAAAA 1px 1px 2px;
-khtml-box-shadow: #AAAAAA 1px 1px 2px;
box-shadow: #AAAAAA 1px 1px 2px;
}
</pre>

c) <code>primary</code> to the slug of your custom menu. Ex.: If the name of your custom menu is "Main Menu", it slug will be <code>main-menu</code>.

=== Method 2 ===

[[File:Social-icons-navbar.png|800px|thumb|none]]

Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.

'''1.''' Edit your child theme's [http://ithemes.com/codex/page/Builder_Frequently_Asked_Questions#Where_is_functions.php.3F functions.php].

Add the following at the end (before closing PHP tag, if present):

<pre class="brush:php;">
add_filter('wp_nav_menu_main-menu_items','add_images', 10, 2);
function add_images($items, $args) {

$items .= '<li class="social-icon" id="first-social-icon"><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="http://ithemes.com/builder/misc/social-media-icons/32/facebook.png"></a></li>';

$items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="http://ithemes.com/builder/misc/social-media-icons/32/twitter.png"></a></li>';

$items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on RSS" alt="Follow Us on RSS" src="http://ithemes.com/builder/misc/social-media-icons/32/rss.png"></a></li>';

$items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="mailto: admin@yoursite.com"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="E-mail Us" alt="E-mail Us" src="http://ithemes.com/builder/misc/social-media-icons/32/email.png"></a></li>';

return $items;
}
</pre>

<u>Note</u>: In the above code, ''main-menu'' must be replaced with the slug of your custom menu. Ex.: If the name of your custom menu is ''Primary Navigation'', then

<pre class="brush:php;">
add_filter('wp_nav_menu_main-menu_items','add_images', 10, 2);
</pre>

must be changed to

<pre class="brush:php;">
add_filter('wp_nav_menu_primary-navigation_items','add_images', 10, 2);
</pre>

'''2.''' Add the following at the end of child theme's style.css and customize it if necessary:

<pre class="brush:css;">
/* Custom Styles For The Social Media Widget Icons in Navigation */

li#first-social-icon {
margin-left: 355px; /* Adjust this value so the icons are positioned at your desired location. */
}

/* li.social-icon {
height: 36px;
} */ /* Needed only in certain themes like Traverse */

li.social-icon a, li.social-icon a:hover {
padding: 1px 0 0 8px;
}

li.social-icon a:hover {
opacity: 0.8;
-moz-opacity: 0.8;
background: none;
}

li.social-icon:hover,
li.social-icon:hover a {
background: none;
}
</pre>

That's it!

This method is also explained [http://ithemesbuilder.com/how-to-add-a-items-to-builders-navigation-menus/ here].

Sample implementations:

'''1.''' Traverse with round icons:

[[File:2011-11-26 10-27-16.png|800px|thumb|none]]

[http://ithemes.com/forum/index.php?/topic/20491-builder-traverse-theme-navigation-removing-block-behind-icons/#p96994 Forum topic]

== How to display Posts from a specific category on a Page in Magazine Extension style ==

[[File:Page-mag-style.png|800px|thumb|none]]

The instructions below outline how to have all posts from a category named ''Issues'' (ID = 18) appear on a Page titled ''Issues List'' (slug = ''issues-list'').

'''1.''' Ensure that [http://codex.wordpress.org/Using_Permalinks pretty permalinks] are enabled. Create a Page titled ''Issues''. Do not enter any content in the Page. Just enter the title and publish.

'''2.''' Save [http://d.pr/HBZR this] code as page-issues-list.php. (i.e., page-''<<slug>>''.php)

# Set a title for this Page in line 12.
# Edit the category ID in line 21.

Upload this file to child theme directory.

'''3.''' Copy ''lib'' directory from parent Builder/extensions/magazine directory into child theme directory.

'''4.''' Add [http://d.pr/ns9k this] at the end of child theme's style.css.

That's it.

<u>Note</u>: If a layout is applied to this Page, ensure that it (the layout) does not have an extension applied.

== How to use CSS3 PIE ==

[http://css3pie.com/ PIE] stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.

It is used to get CSS3 properties like ''border-radius'' working in IE older than version 9.

'''Follow the steps below to make CSS3 PIE work in Builder''':

'''Update on July 11, 2012''': Builder provides IE browser specific IDs for the html element. These are ie7, ie8 and ie9. It is thus possible to write IE 7, IE 8 and IE 9 specific CSS. [http://ithemes.com/forum/topic/30017-comment-form-text-area-weird-format-in-ie/page__view__findpost__p__139158 This] forum topic provides an example where post comment text area (which already has <code>border-radius</code> set in style.css) can be made to show rounded corners in IE 8 using CSS3 PIE. The alternate method listed below also works.

'''1.''' Download the latest version of CSS3 PIE from [http://css3pie.com/download-latest here].

'''2.''' Extract the zip flle and upload ''PIE.htc'' to any web reachable directory.

Ex.:

public_html/assets/PIE.htc

'''3.''' Add <code>position: relative;</code> style to all those selectors for which you would like to use CSS3 PIE. You will of course be specifying border-radius/box-shadow etc. properties (which are supported by CSS3 PIE).

Ex.:

<pre class="brush:css;">
#text-6 {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
position: relative;
}

#text-6 .widget-title {
-moz-border-radius:10px 10px 0px 0px;
-webkit-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
position: relative;
}
</pre>

The above CSS is written to make a widget whose ID is ''text-6'' rounded.

Screenshot in Firefox:

[[File:Rounded-corners-ff.png]]

[http://sridhar.internal.ithemes.com/ Live Site]

'''4.''' Add the following in your child theme's functions.php:

<pre class="brush:php;">
function my_render_ie_pie() { ?>

<?php
}
add_action('wp_head', 'my_render_ie_pie', 8);
</pre>

In the above, replace

# <code>#your-css-elements-here</code> with CSS selectors for which you have specified CSS 3 properties and for which you would like to use CSS3 PIE.
# http://www.redkitecreative.com/PIE.htc with the URL of PIE.htc on your server.

Ex.:

Code in functions.php:

<pre class="brush:php;">
function my_render_ie_pie() { ?>

<?php
}
add_action('wp_head', 'my_render_ie_pie', 8);
</pre>

Now ''border-radius'' property for ''#text-6'' and ''#text-6 .widget-title'' will work in IE 8 and below.

Screenshot in IE 8:

[[File:Rounded-corners-ie8.png]]

<u>Note</u>:

# This particular example does not render properly in IE 7 probably because of using PIE on an element inside another element. This is the behavior coming from PIE itself and not Builder. [http://ithemes.com/codex/images/6/63/Rounded-corners-ie7.png Screenshot].
# IE 9 supports border-radius natively. So PIE will not be used in IE 9.

That's it!

Source: http://www.position-relative.com/2011/01/using-css3-pie-in-wordpress-custom-themes/

== How to set up Shopp in iThemes Builder ==

[http://shopplugin.net/ Shopp] is an e-commerce plugin that adds a feature-rich online store to your WordPress-powered website or blog.

Shopp works out of the box in Builder without the need to edit any template files.

'''The steps below outline how Shopp can be set up in Builder''':

'''1.''' After Shopp has been installed and activated, it will create four placeholder pages.

[[File:Shopp-placeholder-pages.png|690px|thumb|none]]

Each of these pages include Shopp-specific shortcodes that are replaced with dynamic content generated by Shopp.

'''2.''' Go to Shopp -> Settings, Continue to Shopp Setup...

Go through the various settings and fill them out. Refer to links at the bottom of [http://docs.shopplugin.net/Installation this] page for details on these settings.

'''3.''' Presentation Settings:

Make sure you have saved the settings that have been entered in the previous options thus far, if any, before proceeding further.

a) Click on ''Use Custom Templates'' button.

b) Create a directory in your active theme (Builder child theme) named ''shopp''. You can either use a FTP client or your hosting cPanel file manager for this.

[[File:Creating-shopp-dir-in-child-theme.png]]

c) Reload the Presentation Settings in the WordPress/Shopp admin and click ''Install Theme Templates'' button.

At this point, Shopp will make a copy of the built-in default templates into the newly created shopp directory within your active theme.

d) Tick ''Enable theme templates'' and save changes.

'''4.''' Now you are ready to add products. Go to Shopp -> Products. Click Add New. Enter the details and save the product.

[[File:Products Builder Test Site WordPress 2011-12-03 17-53-00.png|497px|thumb|none]]

Note: After a product image has been added, if its thumbnail does not appear i.e., if it looks like:

[[File:Product-image-missing-thumbnail.png]]

go to Shopp -> Settings -> System and uncheck ''Enable Flash-based uploading'' next to ''Upload System''. Save changes.

You will have to edit the products and add images again.

'''Screenshots'''

<u>Shop page (Products listing page)</u>

[[File:Shop- -Builder-Test-Site-2011-12-03-18-23-09.jpg|744px|thumb|none]]

Live Demo: http://sridhar.internal.ithemes.com/shop/ (Dummy site, do not place orders)

<u>Product page</u>

[[File:Shop-Catalog-Products-Nike-Men-Downshifter-4-MSL-Black-Sports-Shoes- -Builder-Test-Site-2011-12-03-18-35-09.jpg|508px|thumb|none]]

<u>Cart page</u>

[[File:Cart- -Builder-Test-Site-2011-12-03-18-42-53.jpg|776px|thumb|none]]

[http://webdesign.com/web-design-courses/under-the-hood-with-shopp-videos/ Replay videos of Under the Hood with Shopp training webinar]

== How to float a div at any position on top of other elements in the container ==

[[File:Screen Shot 2011-12-19 at 10.37.52 PM.png|800px|thumb|none]]

'''1.''' Add the following in child theme's functions.php:

<pre class="brush:php;">
add_action('builder_layout_engine_render_header', 'add_floating_box', 20 );

function add_floating_box() { ?>
<div id="floating-box-container">
<div id="floating-box">
HTML or PHP code comes here
</div>
</div>
<?php }
</pre>

In the above, place the code needed to display your logo (for example) where "HTML code comes here" is present.

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

<pre class="brush:css;">
#floating-box-container {
width: 1000px; /* set this to container (layout) width */
margin: 0 auto;
position: relative;
z-index: 100;
}

#floating-box {
position: absolute;
top: 50px;
left: 0;
background: yellow;
width: 200px;
height: 100px;
}
</pre>

In the above, you might want to adjust top, left, background, width and height values.

[[File:2011-12-19 22-57-10.png|800px|thumb|none|Screenshot showing the div structure]]

A practical example of implementing this method can be found [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_in_Builder#How_to_add_social_media_icons_floating_at_top_right here].

Source: http://ithemes.com/forum/topic/28189-where-is-body-tag/page__view__findpost__p__130559

== Using Easy Custom Content Types in Builder ==

Easy Content Types, a commercial plugin provides an extremely easy to use and intuitive interface for creating custom post types, taxonomies, and meta boxes.

Here are some general tips on using [http://codecanyon.net/item/easy-custom-content-types-for-wordpress/234182 Easy Custom Content Types for WordPress] in Builder.

'''1.''' Do not use <code>Post name</code> permalink structure. <code>Day and name</code> works fine.

'''2.''' Go to plugin's settings and tick the first two under "Post Type Templates". You might also want to tick the option under "Taxonomy Templates" if you plan on using custom taxonomy archives.

[[File:2012-03-01 10-32-06.png|484px|thumb|none]]

'''3.''' Create your Post Types.

Ex.:

[[File:2012-03-01 10-44-56.png|800px|thumb|none]]

The URL of archive listing of entries from a CPT is: http://yoursite.com/cptslug

Ex.: http://localhost/builder/testimonials/

The URL of single CPT entry is: http://yoursite.com/cptslug/entrytitle

Ex.: http://localhost/builder/testimonials/awesome-service/

'''4.''' Check child theme directory using a FTP client or cPanel file manager. If single-''<cpt>''.php has not been automatically created, copy/upload single.php from parent Builder into the child theme and rename it as single-''<cpt>''.php.

Ex.:

[[File:2012-03-01 10-39-45.png|623px|thumb|none]]

'''5.''' Create any necessary Meta Boxes and Meta Fields.

Ex.:

[[File:2012-03-01 10-58-00.png|800px|thumb|none]]

[[File:2012-03-01 10-58-18.png|800px|thumb|none]]

'''6.''' To display Meta Field in template files like single-''<cpt>''.php, use

<pre class="brush:php;">
<?php
global $post;
echo get_post_meta($post->ID, 'ecpt_clienturl', true);
?>
</pre>

In the above replace "ecpt_clienturl" with the name of your field.

'''7.''' To display a Meta Field in LoopBuddy layout, use "Custom Field" tag and enter the field name in "Meta Key" text input.

[[File:2012-03-01 11-11-28.png|547px|thumb|none]]

'''8.''' If comments area is not appearing in single CPT entry pages on the site, go to My Theme -> Settings -> Comments. Uncheck the CPT, save settings, re-check it and save settings.

== How to show top most (latest) post in full and the others as excerpts ==

Screenshot: http://d.pr/nfl1

Edit child theme's index.php and any other needed template files like archive.php that output a list of posts.

Replace the ''the_content()'' or ''the_excerpt()'' function call with the following:

<pre class="brush:php;">
<?php /* Conditional output flag set after first post */ ?>
<?php if($showexcerpt) : ?>
<?php the_excerpt(); ?>
<?php else: ?>
<?php the_content(); ?>
<?php endif; ?>
<?php $showexcerpt=true; ?>
</pre>

Ex.: In Foundation Blank's index.php,

<pre class="brush:php;">
<?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>
</pre>

should be replaced with

<pre class="brush:php;">
<?php /* Conditional output flag set after first post */ ?>
<?php if($showexcerpt) : ?>
<?php the_excerpt(); ?>
<?php else: ?>
<?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>
<?php endif; ?>
<?php $showexcerpt=true; ?>
</pre>

With the above change, the top most (latest) post will be shown in full unless more quick tag,  is used. If more quick tag is used, "Read More→" will appear at the cut off point.

Source: http://wordpress.org/support/topic/full-article-for-first-post-excerpts-for-the-rest?replies=7#post-1743222

== How to implement Yoast Breadcrumbs in Builder ==

[http://wordpress.org/extend/plugins/breadcrumbs/ Yoast Breadcrumbs on WordPress.org]

Determine where you want the breadcrumbs to appear and edit the appropriate template file(s) in child theme. Use [http://codex.wordpress.org/images/1/18/Template_Hierarchy.png this] image as a reference. If a particular file is not present in the child theme directory, copy it from parent Builder directory.

Generally speaking, these are the files that you will be modifying: page.php (for static Pages), single.php (for single post pages), index.php (for Posts page) and archive.php (for category pages).

Let's consider Kepler child theme as an example and that we want to add breadcrumbs to all Pages.

Edit page.php.

Below

<pre class="brush:php;">
<?php if ( have_posts() ) : ?>
</pre>

add

<pre class="brush:php;">
<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
</pre>

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

<pre class="brush:css;">
#breadcrumbs {
color: #D0ECF3;
margin-top: 0;
}

#breadcrumbs a {
color: #FFFFFF;
}
</pre>

Note: The above CSS code might have to be adjusted depending on the child theme.

This should result in [[File:2012-06-26 21-36-17.png|746px|thumb|none]]

== How to remove hyperlink from tagline in Header module ==

Add the following code to child theme's functions.php (at the end, but before the closing ?> line, if any):

<pre class="brush:php;">
// load our javascript in the footer
add_action('wp_enqueue_scripts', 'add_my_code');
function add_my_code() {
add_action( 'print_footer_scripts', 'my_footer_script' );
}

// Add jQuery to footer
function my_footer_script() { ?>

<script type="text/javascript">
jQuery(document).ready(function($) {
$('.site-tagline a').replaceWith(function() {
return this.innerHTML; });
});

</script>

<?php }
</pre>

[http://ithemes.com/forum/topic/29848-remove-link-from-tagline/page__view__findpost__p__138431 Thanks to Ronald (forum post)]

== How to assign layouts to The Events Calendar pages ==

[http://wordpress.org/extend/plugins/the-events-calendar/ The Events Calendar] plugin enables you to rapidly create and manage events. Features include Google Maps integration as well as default templates such as a calendar grid and event list, widget and so much more.

To assign a layout to all pages generated by this plugin, ex.: <code>http://yoursite.com/events/</code> add the following in child theme's functions.php before closing PHP tag (if present):

<pre class="brush:php;">
function set_custom_layout( $layout_id ) {
if ( tribe_is_month() || tribe_is_upcoming() || tribe_is_past() )
return '4f5363f3cb8e1';

return $layout_id;
}
add_filter( 'builder_filter_current_layout', 'set_custom_layout' );
</pre>

In the above replace <code>4f5363f3cb8e1</code> with the ID of your desired layout.

Source: http://tri.be/tutorial-integrating-the-events-calendar-w-genesis/

It is also possible to set different layouts to different views like

* main calendar page
* calendar category pages
* single events
* single event days
* single venues
* events or venue pages
* events list page

by adding more functions similar to the one above.

The needed if conditionals can be obtained from the source linked above.

== Jetpack and Builder ==

=== Sharing ===

If you would like to use Jetpack's Sharing Buttons in Widget Content widgets, go to

# Settings -> Sharing. Tick <code>Widget Content</code> under "Show buttons on".
# My Theme -> Settings -> Widget Content. Select "Use the the_content filter to format Widget Content entries."

Sample screenshot:

[[File:Screen Shot 2012-12-07 at 5.22.34 PM.png|396px|thumb|none]]

==== How to prevent automatic placement of Jetpack's Share buttons and place them manually ====

Sample scenario:

1) At WP Dashboard -> Settings -> Sharing,

a) Few services have been enabled by dragging them under "Enabled Services" area.

b) <code>Show buttons on</code> is ticked for "Front Page, Archive Pages, and Search Results".

2) Active theme: Builder Child Theme - Acute Purple - 1.1.0

3) 'Teasers Layout - Image Left' Builder extension is applied to the Posts page with [http://ithemes.com/codex/page/Builder_Extensions#How_to_show_Read_More_below_each_excerpt_when_using_.27Teasers_Layout_-_Image_Left.27_extension Read More set to appear for all excerpts].

<gallery widths=178px heights=598px>
File:My iThemes Builder Test Site 2013-01-25 15-38-08.png|Before
File:My iThemes Builder Test Site 2013-01-25 15-39-07.png|After
</gallery>

To prevent automatic placement of Jetpack's Share buttons and place them manually, follow this:

'''1.''' Add the following at end of child theme's <code>functions.php</code>:

<pre class="brush:php;">
// Remove automatically-inserted Jetpack's share buttons
function jptweak_remove_share() {
//remove_filter( 'the_content', 'sharing_display',19 );
remove_filter( 'the_excerpt', 'sharing_display',19 );
}
add_action( 'loop_end', 'jptweak_remove_share' );
</pre>

Source: http://wordpress.org/support/topic/share-buttons-position-above-other-plugins#post-3686704

'''2.''' Wherever you would like to place the Jetpack's Share buttons, edit the [http://codex.wordpress.org/images/1/18/Template_Hierarchy.png appropriate template file] and paste the following:

<pre class="brush:php;">
<?php if (function_exists('sharing_display')) echo sharing_display(); ?>
</pre>

In our sample scenario, the file would be wp-content/themes/BuilderChild-Acute-Purple/extensions/post-teasers-left/functions.php and the above code would be placed below

<pre class="brush:php;">
<?php the_excerpt(); ?>
<p><a href="<?php the_permalink(); ?>" class="more-link">Read More →</a></p>
</pre>

[[File:Screen Shot 2013-01-25 at 8.31.03 PM.png|587px|thumb|none]]

That's it.

=== Jetpack Comments ===

Sample screenshot:

[[File:2012-12-07 17-49-39.png|778px|thumb|none]]

# Edit <code>comments.php</code> in active theme (should be a child theme of Builder). If the file is not present, copy it from parent Builder directory into the child theme directory and edit it.

Delete code similar to

<pre class="brush:php;">
<h3><?php comment_form_title( __( 'Leave a Reply', 'it-l10n-BuilderChild-Ionic' ), __( 'Leave a Reply to %s', 'it-l10n-BuilderChild-Ionic' ) ); ?></h3>

<div class="cancel-comment-reply">
<small><?php cancel_comment_reply_link(); ?></small>
</div>
</pre>

and replace

<pre class="brush:php;">
<form action="<?php echo site_url( '/wp-comments-post.php' ); ?>" method="post" id="commentform">
<?php if ( is_user_logged_in() ) : ?>
<p class="logged-in-as"><?php printf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>', 'it-l10n-BuilderChild-Ionic' ), admin_url( 'profile.php' ), $user_identity, $logout_url ); ?></p>
<?php else : ?>
<p class="comment-form-author">
<input type="text" name="author" id="author" value="<?php echo esc_attr( $commenter['comment_author'] ); ?>" size="22"<?php echo $aria_req; ?> />
<label for="author"><small><?php _e( 'Name', 'it-l10n-BuilderChild-Ionic' ); ?> <?php if ( $req ) _e( "<span class='required'>(required)</span>", 'it-l10n-BuilderChild-Ionic' ); ?></small></label>
</p>

<p class="comment-form-email">
<input type="text" name="email" id="email" value="<?php echo esc_attr( $commenter['comment_author_email'] ); ?>" size="22"<?php echo $aria_req; ?> />
<label for="email"><small><?php _e( 'Mail (will not be published)', 'it-l10n-BuilderChild-Ionic' ); ?> <?php if ( $req ) _e( "<span class='required'>(required)</span>", 'it-l10n-BuilderChild-Ionic' ); ?></small></label>
</p>

<p class="comment-form-url">
<input type="text" name="url" id="url" value="<?php echo esc_attr( $commenter['comment_author_url'] ); ?>" size="22" />
<label for="url"><small><?php _e( 'Website', 'it-l10n-BuilderChild-Ionic' ); ?></small></label>
</p>
<?php endif; ?>


<p><textarea name="comment" id="comment" cols="45" rows="10"></textarea></p>

<p class="comment-submit-wrapper">
<input name="submit" type="submit" id="submit" value="<?php _e( 'Submit Comment →', 'it-l10n-BuilderChild-Ionic' ); ?>" />
<?php comment_id_fields(); ?>
</p>

<?php do_action( 'comment_form', $post->ID ); ?>
</form>
</pre>

with

<pre class="brush:php;">
<?php comment_form(); ?>
</pre>

=== Infinite Scroll ===

Jetpack's Infinite Scroll can either enabled by adding code in child theme's functions.php or simply by just using a plugin.

Details: http://ithemes.com/2012/12/03/builder-jetpack-infinite-scroll/

=== Carousel ===

Beginning [http://ithemes.com/codex/page/Builder/Release_Notes/4.0.15 Builder 4.0.15], [http://jetpack.me/2012/07/13/jetpack-1-5-with-carousel/ Jetpack's Carousel] module works fine in iThemes Builder.

=== Tiled Galleries ===

[http://jetpack.me/support/tiled-galleries/ JetPack's Tiled Galleries] module works in iThemes Builder (v4.0.15 and above) by using a workaround.

Add the following in child theme's <tt>functions.php</tt> file (after the <code><?php</code> line):

function custom_disable_builder_gallery() {
remove_filter( 'post_gallery', 'builder_custom_post_gallery', 10 );
}
add_action( 'builder_theme_features_loaded', 'custom_disable_builder_gallery' );

$content_width = 604;

Note that the <code>$content_width</code> variable has to be set to a value that refers to the pixel width of the area displaying the gallery. The <tt>604</tt> number refers to the total pixel width area of the Default child theme's Content Module without any Layout modifications (960 pixel wide Layout with a 320 pixel wide sidebar). Until a better solution can be found, this variable will have to be manually adjusted so that the gallery properly fills the content area. Fortunately, if you are running a responsive Builder child theme, you can set this value to be larger than required, and it will automatically shrink down (this may work in some non-responsive child themes as well, the results vary).

Set <code>$content_width</code> value to the width of actual content portion (.builder-module-content .builder-module-element) that is available after any padding. Firebug makes it easy to find this.

[[File:2013-01-31 11-10-53.png|800px|thumb|none]]

Source: [http://ithemes.com/codex/page/Builder/Release_Notes/4.0.15 Builder 4.0.15 release notes].

<u>Limitation</u>: When the above code is used, output of standard gallery shortcode, for example, <code>[gallery ids="1072,1070,1062,1050"]</code> will be affected. This is a known issue for the time being.

<gallery>
File:Screen Shot 2013-01-31 at 11.43.35 AM.png|Before
File:Screen Shot 2013-01-31 at 11.44.35 AM.png|After
</gallery>

== How to embed a Gravity Forms form at the bottom of all single posts ==

[[File:2013-02-01 19-34-41.png|308px|thumb|none]]

'''1.''' Go to Forms -> Forms in WP dashboard. Hover mouse on the title of form that you wish to embed and note the number at the end of URL in browser status bar. That would be the form's ID.

'''2.''' Edit child theme's <code>single.php</code>. If the child theme does not have this, copy it from parent Builder directory into the child theme directory.

Below

<pre class="brush: php; gutter: false;">
<?php comments_template(); // include comments template ?>
</pre>

paste

<pre class="brush: php; gutter: false;">
<?php gravity_form(2, true, false, false, '', false); ?>
</pre>

In the above change <code>2</code> to the ID of form you wish to embed.

Source: http://www.gravityhelp.com/documentation/page/Embedding_A_Form

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

<pre class="brush:css; gutter: false;">
#gform_wrapper_2 {
margin-top: 4em;
}
</pre>

In the above change <code>2</code> to the ID of form that's embedded.

== Examples of Using jQuery in Builder ==

=== Disclaimer ===
'''iThemes will not be responsible for any issues that may be the result of your attempts to change your site's functions.php file. You do not HAVE to change it. All code samples are for your information, possibly inspiration, and provided "as is". However, when properly implemented, the code samples are accurate and will work.'''

=== Warning ===
If you do not understand what it is you are doing, if the words "php", "opening tag", "FTP", "functions" and "backup" are not familiar to you proceed with caution. You can blow up your site due to invalid code in the functions.php file. Actually, even if you know or think you know it all, it still happens (it happens to me at least once a week - Ronald).

A single missing } or even a , or a semi-colon is all it takes to take your site down. This can be resolved by undoing the changes, however, this can not be done through the wp-dashboard > Appearance > Editor anymore (since your site is down). You then have to restore the functions.php file either through FTP or your hosting cPanel File Manager.

'''If you think you can not do that, or do not understand what all the above means, I suggest you refrain from editing functions.php.'''

Should anything go wrong, do not blame the code posted here. The code works. It just needs to be inserted a) the right way, and b) in the right place.

For everyone else feeling confident, and having read the Disclaimer and the paragraph on how to add PHP code to a PHP file, DO MAKE A BACKUP, at least of the file you are editing. It is also not recommended to do these changes through the wp-dashboard > Appearance > Editor. Setup a localhost server on your computer, and use a simple PHP Editor (with syntax checking), ensure that your additions do not break the site and only THEN FTP your files to your server.

=== How to add PHP code to a PHP file ===
When adding code to the <code>functions.php</code> file (or any PHP file), make sure it is in PHP format. HTML code is not PHP code, and it '''WILL''' break things when coded inside a block of PHP code.

PHP code can be identified by an opening tag: <code><?php</code>
and a closing tag <code>?></code>

all code between these tags should be PHP code.

Most WordPress themes have the opening <code><?php</code> tag in functions.php, coded all the way at the top of the file. Most (Builder Child theme) <code>functions.php</code> files do not have a closing <code>?></code> tag (ALL THE WAY) at the end of the file, since it is not required.

So if you add code at the end of your <code>functions.php</code> file, and do so before the closing <code>?></code> PHP tag (if any!) you (generally!) are inside a PHP block of code. But this is '''NOT''' guaranteed.

*You can't add html code inside PHP tags.
*You can't add PHP code outside PHP tags.
*You can't add opening PHP tags INSIDE a block of PHP code (nesting <code><?php some php code ?></code> when there is no closing php tag before it).

Before making the final edits and saving and uploading the file to your server, make sure that the syntax of the entire functions.php is valid syntax. You can do so by using a PHP Editor, and there are online tools such as this one: http://www.piliapp.com/php-syntax-check/

====example of correct PHP code====
<pre class="brush: php; gutter: false;">
<?php
PHP code
?>

html code

<?php
some more PHP code
?>
</pre>

====example of incorrect PHP code 1====
<pre class="brush: php; gutter: false;">
<?php
php code

<?php
some more php code
?>

?>
</pre>

====example of incorrect PHP code 2====
<pre class="brush: php; gutter: false;">
<?php
html code
?>
</pre>

====example of incorrect PHP code 3====
<pre class="brush: php; gutter: false;">
<?php
php code
?>

more php code
</pre>

=== Introduction ===

Please note that code shown is for a particular child theme and for a specific version used when writing the articles. It would usually have to be modified to suit your needs. All code samples use certain selector names (for menus, for builder selectors etc.) This is entirely arbitrary, and it is ''highly unlikely'' that your selectors are the same. '''You have to adapt the code accordingly'''.

'''All code samples provided here ASSUME that it will be placed in already existing PHP tags. Therefore, you will not find an opening <?php code at the start, or a closing ?> tag at the end.'''

=== How to assign odd and even classes to menu items in nav bar ===

One typical usage of this would be to set different background colors to alternate menu items.

[[File:2013-02-02 21-15-52.png|567px|thumb|none]]

Add the following at the end of child theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">
// Assign even and odd classes to nav bar menu items

add_action('wp_enqueue_scripts', 'add_my_code_1');

function add_my_code_1() {
add_action( 'print_footer_scripts', 'my_footer_script_1' );
}

function my_footer_script_1() { ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#menu-main-menu > li:nth-child(odd)").addClass("odd");
$("#menu-main-menu > li:nth-child(even)").addClass("even");
});
</script>
<?php }
</pre>

where <code>menu-main-menu</code> is the CSS ID of custom menu shown in the nav bar.

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

<pre class="brush: css; gutter: false;">
.builder-module-navigation li.even a {
background: red;
}

.builder-module-navigation li.odd a {
background: blue;
}

.builder-module-navigation li.even li a,
.builder-module-navigation li.odd li a {
background: #FFF;
}

.builder-module-navigation li a:hover,
.builder-module-navigation li.even li a:hover,
.builder-module-navigation li.odd li a:hover {
background: #333;
color: #FFF;
}

.builder-module-navigation .current_page_item.even a, .builder-module-navigation .current_page_item.odd a
.builder-module-navigation .current-cat.even a, .builder-module-navigation .current-cat.odd a
.builder-module-navigation .current-menu-item.even a, .builder-module-navigation .current-menu-item.odd a {
background: #333;
}

.builder-module-navigation li a,
.builder-module-navigation .current_page_item li a,
.builder-module-navigation .current-cat li a {
color: #FFF;
}

.builder-module-navigation li li a {
color: #333;
}
</pre>

Ex.:

[http://www.wpcon186.info/ Live Demo]. Code used on this site: [http://pastebin.com/Kwr3Q1g7 functions.php], [http://pastebin.com/irx9GtC8 style.css].

=== How to spread/space out menu items equally across the nav bar ===

[[File:Screen Shot 2013-02-02 at 9.43.51 PM.png|800px|thumb|none|Before]]

[[File:Screen Shot 2013-02-02 at 9.39.19 PM.png|800px|thumb|none|After]]

Add the following at the end of child theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">
// =========================================
// = Space out nav bar menu items equally =
// =========================================

// load javascript in the footer
add_action('wp_enqueue_scripts', 'add_my_code_37742');
function add_my_code_37742() {
add_action( 'print_footer_scripts', 'my_footer_script_37742' );
}

// Add Javascript to footer
function my_footer_script_37742() { ?>

<script type="text/javascript">

jQuery(document).ready(function($) {

var menuItems = $("ul#menu-main-menu").children().length;
var menuWidth = $("ul#menu-main-menu").width();
var percentage = (menuWidth / menuItems) / (menuWidth / 100);

$("ul#menu-main-menu").children().each(function() {
$(this).css('width', percentage + '%');
});

});

</script>

<?php }
</pre>

where <code>menu-main-menu</code> is the ID of custom menu shown in the nav bar.

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

<pre class="brush: css; gutter: false;">
/*********************************************
Space out nav bar menu items equally
*********************************************/

.builder-module-navigation ul {
width: 100%;
}

.builder-module-navigation li a, .builder-module-navigation .current_page_item li a, .builder-module-navigation .current-cat li a {
text-align: center;
}
</pre>

Thanks to Ronald. Source: http://ithemes.com/forum/topic/37742-navigation-spread-items-to-length-of-the-nav-bar/#entry173441

=== How to add a slow transition effect for second level menus in nav bar ===

[http://jsfiddle.net/ronald/nBFm3/ Live Demo]

Add the following at the end of child theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">
// =========================================
// = Smoothen transition of 2nd level menu =
// =========================================

// load javascript in footer
add_action('wp_enqueue_scripts', 'add_my_code_2');
function add_my_code_2() {
add_action( 'print_footer_scripts', 'print_my_footer_scripts_2' );
}

// Add required javascript to footer (for delayed opening of subnav)
function print_my_footer_scripts_2() { ?>

<script type='text/javascript'>
jQuery(document).ready(function($) {
$("#menu-main-menu li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});

});
</script>

<?php }
</pre>

where <code>menu-main-menu</code> is the CSS ID of custom menu (usually <code><ul id="menu-main-menu"></code>) shown in the nav bar. This is entirely arbitrary, and it is highly unlikely that your selectors are the same. You need to adapt the code accordingly.

<u>Alternate Method</u>:

Go to My Theme -> Settings -> Analytics and JavaScript Code. Paste the following in the text area under

"List any JavaScript or other code to be manually inserted inside the site's <head> tag in the input below."

<pre class="brush:php; gutter: false;">
<script type='text/javascript'>
jQuery(document).ready(function($) {
$("#menu-main-menu li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});

});
</script>
</pre>

where <code>menu-main-menu</code> is the CSS ID of custom menu shown in the nav bar.

Save settings.

Thanks to Ronald. Source: http://ithemes.com/forum/topic/30998-is-it-possible-to-add-a-slow-transition-effect-to-the-navbar/#entry144025

Another similar forum topic: http://ithemes.com/forum/topic/21002-navigation-with-animated-effect/

=== How to Clear Placeholder Text Upon Focus in Gravity Forms Fields ===

[http://wordpress.org/extend/plugins/gravity-forms-placeholders/ Gravity Forms - Placeholders add-on] plugin can be used to add HTML5 placeholder support to Gravity Forms' fields with a javascript fallback. <code>gplaceholder</code> CSS class should be added to text fields or textareas as needed, or to the form itself to enable this feature to all fields within it.

Ex.:

[[File:2013-02-04 20-35-47.png|513px|thumb|none]]

Now all Gravity Forms' field labels will appear inside the fields as placeholder text.

<gallery>
File:Screen Shot 2013-02-04 at 8.39.24 PM.png|Before
File:Screen Shot 2013-02-04 at 8.39.33 PM.png|After
</gallery>

The placeholder text will continue to appear when clicked or tabbed to inside a field, but will disappear when user starts typing.

If you would like the fields' placeholder text to be cleared when a field gets focus, add the following at the end of child theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">
// =========================================
// = Auto hide placeholder text upon focus =
// =========================================

// load javascript in footer
add_action('wp_enqueue_scripts', 'add_my_code_3');

function add_my_code_3() {
add_action( 'print_footer_scripts', 'my_footer_script_3' );
}

// Add jQuery to footer

function my_footer_script_3() { ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.gform_wrapper').find(':input').each(function() {
$(this).data('saveplaceholder', $(this).attr('placeholder'));

$(this).focusin(function() {
$(this).attr('placeholder', '');
});

$(this).focusout(function() {
$(this).attr('placeholder', $(this).data('saveplaceholder'));
});

})
})
</script>
<?php }
</pre>

Thanks to Ronald for providing this code [http://jsfiddle.net/ronald/KfZTp/ here].

=== Loading Script in Footer on All Pages Except One ===

Ex.:

<pre class="brush: php; gutter: false;">
/* JMAC script load */
// load jquery and prepare javascript in footer
add_action('wp_enqueue_scripts', 'jmac_scripts_method');
function jmac_scripts_method() {
wp_enqueue_script('jquery');
add_action('print_footer_scripts', 'jmac_print_footer_scripts');
}

// Add required javascript to footer
function jmac_print_footer_scripts() { if(!is_page('videoconferencing')) { ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
function toggleVideo(state) {
// if state == 'hide', hide. Else: show video
var div = document.getElementById("popupVid");
var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
div.style.display = state == 'hide' ? 'none' : '';
func = state == 'hide' ? 'pauseVideo' : 'playVideo';
iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
}

});
</script>
<?php
} }
/* JMAC script load end */
</pre>

Note: The focus of this wiki entry is not what the jQuery code does, but rather the if conditional used:

<code>if(!is_page('videoconferencing'))</code>

where "videoconferencing" is the slug of Page in which jQuery code should NOT be loaded.

Forum topic: http://ithemes.com/forum/topic/33305-script-in-footer-on-all-pages-except-one/

=== Loading Script in Footer Only on Site's Front Page ===

Ex.:

<pre class="brush: php; gutter: false;">
// prepare javascript in footer
add_action('wp_enqueue_scripts', 'add_my_script_4');

function add_my_script_4() {
add_action( 'print_footer_scripts', 'home_page_only_script' );
}

// Add javascript to footer
function home_page_only_script() {
if ( is_front_page() ) : ?>
<script type="text/javascript">
//your javascript here...
</script>
<?php endif;
}
</pre>

Thanks to Ronald. Source: http://ithemes.com/forum/topic/33473-adding-javascipt-to-home-page/#entry155302

=== How to Create a "Stay-On-Top" element ===

==== Method 1 ====

Live Demos: [http://ithemes.com/ iThemes.com], [http://webdesign.com/ WebDesign.com]

[[File:Parent page Builder Responsive Test Site.png|800px|thumb|none|Standard nav bar]]

As the user scrolls down..

[[File:2013-02-14 16-52-24.png|800px|thumb|none|As user scrolls below past the standard nav bar, it gets replaced by a nav bar in a fixed position at the top of browser. When user scrolls to top, it goes away]]

'''1.''' Identify the selector of the element that you wish to stay on top. Firebug can be used for this.

Ex.: <code>.builder-module-navigation-background-wrapper</code> in case of a navigation module.

'''2.''' Add the following at the end of child theme's <code>functions.php</code> (before closing PHP tag, if present):

<pre class="brush: php; gutter: false;">
// =========================================
// = "Stay-On-Top" element =
// =========================================

add_action('wp_enqueue_scripts', 'add_my_code');

function add_my_code() {
add_action( 'print_footer_scripts', 'my_footer_script' );
}

function my_footer_script() { ?>

<script type="text/javascript">

jQuery(function($) {

var filter = $('.builder-module-navigation-background-wrapper');

pos = filter.offset();

var filterSpacer = $('<div />', {
"class": "filter-drop-spacer",
"height": filter.outerHeight()
});

var fixed = false;

$(window).scroll(function() {

if($(this).scrollTop() >= pos.top+filter.height() )

{
if( !fixed )
{
fixed = true;

filter.fadeOut('fast', function() {
$(this).addClass('fixed').fadeIn('fast');
// $('.search_in_nav, .my-social-icons').hide();
$(this).before(filterSpacer);
});
}
}

else

{
if( fixed )
{
fixed = false;

filter.fadeOut('fast', function() {
$(this).removeClass('fixed').fadeIn('fast');
// $('.search_in_nav, .my-social-icons').show();
filterSpacer.remove();
});
}
}
});

});

</script>

<?php }
</pre>

In the above, enter the selector from step 1 in the following line:

var filter = $('.builder-module-navigation-background-wrapper');

(Optional) If you would like to hide any children of the element in fixed state, specify their selectors in the line below and remove the comment.

<pre class="brush: php; gutter: false;">
// $('.search_in_nav, .my-social-icons').hide();
</pre>

Remember to do similarly in the line below:

<pre class="brush: php; gutter: false;">
// $('.search_in_nav, .my-social-icons').show();
</pre>

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

<pre class="brush: css; gutter: false;">
.builder-module-navigation-background-wrapper.fixed {
position: fixed;
left: 0;
top: 0;
width: 100%;

-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
box-shadow: 0 0 40px #222;

background: rgba(255, 255, 255, 0.92);
z-index: 100;
}

.admin-bar .builder-module-navigation-background-wrapper.fixed {
top: 28px;
}
</pre>

In the above CSS code, ensure that correct selector is being used.

Source: http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/ and http://ithemes.com/wp-content/themes/iThemes2012/js/ui.js

==== Method 2: Using Sticky jQuery plugin in iThemes Builder ====

Below instructions can be used to make nav bar and a widget as sticky (fixed position and always visible) using the Sticky jQuery plugin.

{{#ev:youtube|Pv8dZcmMr9E|640|none|Watch in 1080p HD and in full screen for best viewing experience}}

Please note that I have tested it only in Builder Default child theme. Numbers in the code and CSS may have to be adjusted for other child themes.

'''1.''' Download [http://stickyjs.com/ Sticky jQuery plugin]. Extract the zip file and upload jquery.sticky.js to /assets/sticky under site root.

'''2.''' Add the following in child theme's <code>functions.php</code> (before closing PHP tag if any):

<pre class="brush: php; gutter: false;">
add_action('wp_enqueue_scripts', 'add_my_code');

function add_my_code() {
wp_enqueue_script( 'jquery-sticky', get_bloginfo('wpurl') . '/assets/sticky/jquery.sticky.js', array('jquery'), '1.0', true );
add_action( 'print_footer_scripts', 'my_footer_script' );
}

function my_footer_script() { ?>

<?php if(is_admin_bar_showing()) : ?>
<script type="text/javascript">
jQuery(function($) {
$(".builder-module-navigation").sticky({topSpacing: 28, getWidthFrom: ".builder-module-navigation-outer-wrapper"});
$("#meta-5").sticky({topSpacing: 64});
});
</script>

<?php else : ?>

<script type="text/javascript">
jQuery(function($) {
$(".builder-module-navigation").sticky({topSpacing: 0, getWidthFrom: ".builder-module-navigation-outer-wrapper"});
$("#meta-5").sticky({topSpacing: 36});
});
</script>

<?php endif;

} ?>
</pre>

In the above,

a) replace <code>meta-5</code> with the ID of widget that you would like to make sticky.

b) replace 36 with height of nav bar

c) replace 64 with height of nav bar + 28

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

<pre class="brush:css; gutter: false;">
.sticky-wrapper.is-sticky .builder-module-navigation {
border-bottom: 1px solid #d6d6d6;
box-shadow: 0px 0px 16px rgba(0,0,0,0.1);
}

.builder-module-content .widget {
background: #DDD;
border-bottom: 3px solid #F1F0F0;
width: 264px !important;
}
</pre>

In the above replace 264 with width of widget w/o left and right padding.

=== How to Style All First Words of Widget Titles Differently ===

[[File:Screen Shot 2013-03-20 at 9.31.42 AM.png|216px|thumb|none]]

'''1.''' Add the following in child theme's <code>functions.php</code> (before closing PHP tag if any):

<pre class="brush: php; gutter: false;">
// ==================================================
// = Assign a Class to First Word of Widget Titles =
// ==================================================

// load javascript in footer

add_action('wp_enqueue_scripts', 'add_my_code');

function add_my_code() {
add_action( 'print_footer_scripts', 'my_footer_script' );
}

// Add jQuery to footer

function my_footer_script() { ?>

<script type="text/javascript">
jQuery(function($) {

$('.builder-module-sidebar h4.widget-title').each(function() {
var h = $(this).html();
var index = h.indexOf(' ');
if(index == -1) {
index = h.length;
}
$(this).html('<span class="widget-title-first-word">' + h.substring(0, index) + '</span>' + h.substring(index, h.length));
});

});
</script>

<?php }
</pre>

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

<pre class="brush: css; gutter: false;">
/****************************************************
Styling First Word of Widget Titles
*****************************************************/

.widget-title-first-word {
color: red;
}
</pre>

Source: http://blog.codez.in/jquery-css-styling-first-word-of-a-text-differently/jquery/2010/08/23

=== How to incorporate jQuery Kwicks Accordion in Builder ===

See [http://ithemes.com/forum/topic/40780-jquery-kwiks/#entry183718 this] forum post.

=== Animated Responsive Image Grid ===

Below is how I implemented a jQuery plugin by [http://tympanus.net/Development/AnimatedResponsiveImageGrid/ codrops] in WordPress for creating a responsive image grid that will switch images using different animations and timings.

[http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ Live Demo]

'''1.''' Downloaded source, extracted zip file and uploaded the <code>AnimatedResponsiveImageGrid</code> folder to <code>/assets</code>

[[File:2013-04-10 14-17-19.png|365px|thumb|none]]

'''2.''' Added the following at the end of child theme's <code>functions.php</code>:

<pre class="brush: php; gutter: false;">

// =========================================
// = My Changes Below =
// =========================================

// load javascript and styles in footer or head

// only on http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/
add_action('wp_enqueue_scripts', 'AnimatedResponsiveImageGrid_code');

function AnimatedResponsiveImageGrid_code() {
if(is_page( '1155' )) {
wp_enqueue_script( 'modernizr', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/js/modernizr.custom.26633.js', '2.6.2', false ); /* in head */
wp_enqueue_script( 'AnimatedResponsiveImageGrid', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/js/jquery.gridrotator.js', array('jquery'), true );

wp_enqueue_style( 'AnimatedResponsiveImageGrid-style', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/css/style.css' );
}
}

add_action('wp_enqueue_scripts', 'add_my_code');

function add_my_code() {

add_action( 'print_footer_scripts', 'my_footer_script' );
}

// Add jQuery to footer

function my_footer_script() { ?>


<?php if(is_page( '1155' )) { ?>
<script type="text/javascript">
jQuery(function($) {
$( '#ri-grid' ).gridrotator( {
w320 : {
rows : 3,
columns : 4
},
w240 : {
rows : 3,
columns : 3
}
} );

$( '#ri-grid-2' ).gridrotator( {
rows : 3,
columns : 15,
animType : 'fadeInOut',
animSpeed : 1000,
interval : 600,
step : 1,
w320 : {
rows : 3,
columns : 4
},
w240 : {
rows : 3,
columns : 4
}
} );
});
</script>
<?php }

}
</pre>

'''3.'''

a) Placed this (in Text view) in "Animated Responsive Image Grid" Page:

<pre class="brush: html; gutter: false;">
<h2>Demo 1: Random animations / 55% container width / 3s between switching</h2>

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
<img class="ri-loading-image" src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/loading.gif"/>
<ul>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/1.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/2.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/3.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/4.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/5.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/6.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/7.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/8.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/9.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/10.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/11.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/12.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/13.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/14.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/15.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/16.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/17.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/18.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/19.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/20.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/21.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/22.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/23.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/24.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/25.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/26.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/27.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/28.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/29.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/30.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/31.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/32.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/33.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/34.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/35.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/36.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/37.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/38.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/39.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/40.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/41.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/42.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/43.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/44.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/45.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/46.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/47.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/48.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/49.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/50.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/51.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/52.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/53.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/54.jpg"/></a></li>
</ul>
</div>
</pre>

b) Placed this in HTML module below the content module in layout used by that Page:

<pre class="brush: html; gutter: false;">
<h2 style="margin-left: 1em; margin-right: 1em;">Demo 2: "fadeInOut" animation / 100% container width / 1 image switch at a time / 600ms between switching</h2>

<div id="ri-grid-2" class="ri-grid ri-grid-size-2">
<img class="ri-loading-image" src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/loading.gif"/>
<ul>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/1.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/2.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/3.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/4.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/5.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/6.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/7.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/8.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/9.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/10.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/11.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/12.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/13.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/14.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/15.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/16.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/17.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/18.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/19.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/20.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/21.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/22.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/23.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/24.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/25.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/26.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/27.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/28.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/29.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/30.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/31.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/32.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/33.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/34.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/35.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/36.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/37.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/38.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/39.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/40.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/41.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/42.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/43.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/44.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/45.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/46.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/47.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/48.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/49.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/50.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/51.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/52.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/53.jpg"/></a></li>
<li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/54.jpg"/></a></li>
</ul>
</div>
</pre>

'''4.''' Added the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):

<pre class="brush: css; gutter: false;">
/* http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ */

.ri-grid-size-1 {
width: 90% !important;
}

.ri-grid ul li,
.ri-grid ul li a {
width: 98px !important;
height: 97px !important;
}

#builder-module-516519f61bcba-outer-wrapper {
max-width: 100% !important;
}

#ri-grid-2 ul li,
#ri-grid-2 ul li a {
width: 94px !important;
height: 94px !important;
}

.page-id-1155 .builder-module-content .builder-module-element {
margin-bottom: 0 !important;
}

.page-id-1155 .hentry {
margin-bottom: 0;
}
</pre>

=== Easy Accordion jQuery plugin in iThemes Builder ===

[http://buildersnippets.com/easy-accordion-test-page/ Live Demo] [Note: Due to differences in CSS properties like font sizes between child themes and other minor customizations, the demo (which uses Air child theme) looks slightly different than the screenshot below, which was taken in Default child theme]

[[File:Easy Accordion Test Page - WordPress Dev Site 2013-04-30 13-03-49.png|441px|thumb|none]]

[http://www.madeincima.it/en/articles/resources-and-tools/easy-accordion-plugin/ Easy Accordion] is a jQuery plugin to create a horizontal accordion and is a free alternative to Slidedeck.

The following steps outline how the [http://www.madeincima.it/download/samples/jquery/easyAccordion/ plugin's demo] can be set up in a WordPress site running iThemes Builder. Once you have the following working, you can then edit the HTML, javascript parameters and CSS to suit your needs.

'''1.''' Download the full sample zip file from [http://www.madeincima.it/en/articles/resources-and-tools/easy-accordion-plugin/ here] under the Conclusion section. Extract the zip file and upload the resulting <code>jQuery-easyAccordion</code> folder to <code>assets</code> directory under your site's root.

'''2.''' Upload all the contents of <code>jQuery-easyAccordion/images</code> folder to active child theme's <code>images</code> directory.

'''3.''' Wherever you want the Easy Accordion to appear (in a Page or Post or HTML module etc), paste the following:

<pre class="brush: html; gutter: false;">
<div class="sample">
<h1>jQuery Easy Accordion Plugin</h1>

<h2>Horizontal Accordion with Autoplay</h2>
<p>Set the '<strong>autoStart</strong>' parameter to '<strong>true</strong>' to get a timed slideshow. You can also define the interval between each slide in milliseconds using the '<strong>slideInterval</strong>' parameter.</p>
<div id="accordion-1">
<dl>
<dt>First slide</dt>
<dd><h2>This is the first slide</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img1.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
<dt>Second slide</dt>
<dd><h2>Here is the second slide</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img2.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
<dt>One more slide</dt>
<dd><h2>One more slide to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img3.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
<dt>Another slide</dt>
<dd><h2>Another slide to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
<dt>Wow one more</dt>
<dd><h2>Unbilievable one more slide here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img5.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
<dt>Last one</dt>
<dd><h2>This is definitely the last one</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img6.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
</dl>
</div>

<h2>Simple Horizontal Accordion</h2>
<p>If you don't specify the '<strong>autoStart</strong>' parameter or if you set it to '<strong>false</strong>' you get a simple slideshow.</p>

<div id="accordion-2">
<dl>
<dt>Slide title</dt>
<dd><h2>First mammoth here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img1.png" alt="Alt text to go here" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd>
<dt>Another slide</dt>
<dd><h2>Over the moon!</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img2.png" alt="Alt text to go here" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd>
<dt>Third slide</dt>
<dd><h2>Another mammoth</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img3.png" alt="Alt text to go here" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd>
<dt>Last slide</dt>
<dd><h2>This is my favourite</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd>
</dl>
</div>

<h2>Set the initial Active Slide</h2>
<p>You can easily set the <strong>initial active slide</strong> by adding the '<strong>active</strong>' class to the respective DT element.
<br />Notice that you could also remove the slide number by setting the '<strong>slideNum</strong>' parameter to '<strong>false</strong>'.</p>
<div id="accordion-3">
<dl>
<dt>Slide title</dt>
<dd><h2>First slide here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img2.png" alt="Alt text to go here" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd>
<dt>Another slide</dt>
<dd><h2>Title to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img4.png" alt="Alt text to go here" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd>
<dt class="active">Third slide</dt>
<dd><h2>Here is the title</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img1.png" alt="Alt text to go here" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd>
<dt>Last slide</dt>
<dd><h2>Last slide title</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img3.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd>
</dl>
</div>

<p><a href="http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/">Go back to the post!</a></p>
</div>
</pre>

In the case of [http://buildersnippets.com/easy-accordion-test-page/ my demo], the above code has been placed in a static Page.

'''4.''' Add the following in child theme's <code>functions.php</code> before closing PHP tag (if any):

<pre class="brush: php; gutter: false;">
// load javascript and styles in footer or header

// only on http://buildersnippets.com/easy-accordion-test-page/
add_action('wp_enqueue_scripts', 'easyAccordion_code');

function easyAccordion_code() {
if(is_page( '127' )) {
wp_enqueue_script( 'easyAccordion', get_bloginfo('wpurl') . '/assets/jQuery-easyAccordion/scripts/jquery.easyAccordion.js', array('jquery'), '0.1', true );

wp_enqueue_style( 'easy-accordion', get_bloginfo('wpurl') . '/assets/jQuery-easyAccordion/css/styles.css' );
}
}

add_action('wp_enqueue_scripts', 'add_my_code_ea');

function add_my_code_ea() {

add_action( 'print_footer_scripts', 'my_footer_script_ea' );
}

// Add jQuery to footer

function my_footer_script_ea() { ?>


<?php if(is_page( '127' )) { ?>
<script type="text/javascript">
var accordion;
jQuery(function($) {
$('#accordion-1').easyAccordion({
autoStart: true,
slideInterval: 3000
});

$('#accordion-2').easyAccordion({
autoStart: false
});

$('#accordion-3').easyAccordion({
autoStart: true,
slideInterval: 5000,
slideNum:false
});

$('#accordion-4').easyAccordion({
autoStart: false,
slideInterval: 5000
});
});
</script>
<?php }

}
</pre>

The <code>if(is_page( '127' ))</code> conditional is in place to ensure that javascript is loaded and called only where needed (in this case, a specific Page vs site-wide). You would need to either change the ID or remove the conditional to suit your needs.

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

<pre class="brush: css; gutter: false;">
/* Easy Accordion Styling */

.sample{border:1px solid #92cdec;background:#d7e7ff;padding:30px}
.easy-accordion h2{margin:0px 0 20px 0;padding:0;font-size:1.6em;}

dd p{line-height:120%}

#accordion-1{width:800px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8}
#accordion-1 dl{width:800px;height:245px}
#accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c}
#accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat}
#accordion-1 dt.hover{color:#68889b;}
#accordion-1 dt.active.hover{color:#fff}
#accordion-1 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold}
#accordion-1 .active .slide-number{color:#fff;}
#accordion-1 a{color:#68889b}
#accordion-1 dd img{float:right;margin:0 0 0 30px;}
#accordion-1 h2{font-size:2.5em;margin-top:10px}
#accordion-1 .more{padding-top:10px;display:block}

#accordion-2{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8}
#accordion-2 h2{font-size:2.5em;margin-top:10px;}
#accordion-2 dl{width:700px;height:195px}
#accordion-2 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c}
#accordion-2 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat}
#accordion-2 dt.hover{color:#68889b;}
#accordion-2 dt.active.hover{color:#fff}
#accordion-2 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordion-2 .slide-number{color:#68889b;left:10px;font-weight:bold}
#accordion-2 .active .slide-number{color:#fff}
#accordion-2 a{color:#68889b}
#accordion-2 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}

#accordion-3{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8}
#accordion-3 h2{font-size:2.5em;margin-top:10px}
#accordion-3 dl{width:700px;height:195px}
#accordion-3 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c}
#accordion-3 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat}
#accordion-3 dt.hover{color:#68889b;}
#accordion-3 dt.active.hover{color:#fff}
#accordion-3 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordion-3 .slide-number{color:#68889b;left:13px;font-weight:bold}
#accordion-3 .active .slide-number{color:#fff}
#accordion-3 a{color:#68889b}
#accordion-3 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}

.sample h1 {
margin-top: 0;
line-height: 1;
}

.hentry .easy-accordion img {
background: none;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
padding: 0;
}

.easy-accordion h2 {
line-height: 1;
margin-top: 0;
}
</pre>

== Using a Shortcode in HTML Module for Custom Header ==

A user in the forum asked the following:

<blockquote>On one of my customer sites (a Builder site), we have many similar, but slightly different layouts. On all of them, we want the same custom header (in a Custom HTML module). I’d like to maintain the HTML for that custom header in one place so that I don’t have to copy and paste the header code into each layout each time I want to make a change.</blockquote>

One of the ways this can be done is by creating a shortcode having the HTML code needed to display the custom header and place this shortcode in HTML module of all the layouts in use. The advantage of doing so is that should you decide later on to make any changes in the HTML, it has to be done only in one place.

'''1.''' Install and activate [http://wordpress.org/extend/plugins/global-content-blocks/ Global Content Blocks] plugin.

'''2.''' Go to Settings -> Global Content Blocks -> Add a New Content Block.

Enter a Name. This is only for your reference and is not used while executing the shortcode.

In the Content editor, enter the HTML code needed to display your custom header image.

Ex.:

<pre class="brush: html; gutter: false;">
<a href="http://localhost/builder3/"><img src="http://localhost/builder-responsive/wp-content/themes/BuilderChild-Default/images/header.jpg" alt="Home" /></a>
</pre>

Click Save.

[[File:Global Content Blocks ‹ iThemes Builder Test Site — WordPress 2013-03-16 15-38-32.png|453px|thumb|none]]

Note the generated shortcode which will be in the form of

[contentblock id=1]

Now add a HTML module wherever you want to the custom header image to appear and paste the shortcode. Save the module and layout.

[[File:2013-03-16 15-43-28.png|657px|thumb|none]]

Output on the webpage:

[[File:Screen Shot 2013-03-16 at 3.48.56 PM.png|799px|thumb|none]]

Depending on the active theme, there could be padding around the image which can be gotten rid of by using CSS like so:

<pre class="brush:css; gutter: false;">
.builder-module-1 .builder-module-element {
padding: 0;
}

.builder-module-1 img {
vertical-align: top;
}
</pre>

to have:

[[File:Screen Shot 2013-03-16 at 3.51.35 PM.png|800px|thumb|none]]

As you may probably be thinking, the output can simply be achieved by using a Image module but then it will not have the advantage of "update in one place – change everywhere".

Instead of using the plugin, we can write code similar to following in child theme's <code>functions.php</code> to create shortcode and use it as above.

<pre class="brush: php; gutter: false;">
//logo in header
add_shortcode('headercontent','getlogo');
function getlogo() {
echo '<div class="headerlogo"><a href="'.get_bloginfo('home').'"><img src="'.get_bloginfo('stylesheet_directory').'/images/company-logo.png" alt="web design" /></a>';
}
</pre>

In the above example, shortcode to be used would be <code>[headercontent]</code>

Thanks to Valerie Cudnik for providing the above code [http://pastebin.com/9kXf71bF here].

== How to fix positioning problem of event pop up trigger bar of All In One Calendar By Timely ==

Applies to plugin version: 1.9

[[File:Screen Shot 2013-02-15 at 9.27.01 AM.png|758px|thumb|none|Before]]

[[File:Screen Shot 2013-02-15 at 9.21.18 AM.png|7586px|thumb|none|After]]

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

<pre class="brush: css; gutter: false;">
a.ai1ec-popup-trigger {
top: 0 !important;
}

.timely .hide.ai1ec-popup + a.ai1ec-popup-trigger {
padding-top: 1em;
}
</pre>

Forum topic: http://ithemes.com/forum/topic/38506-all-in-one-calendar-by-timely-builder-conflict/

== How to get the output of a Header module in a HTML module ==

Using a HTML module gives more control than a Header module in situations like [http://ithemes.com/forum/topic/38496-problem-with-header-module/ this].

[[File:Header Module Settings.png|463px|thumb|none]]

Output of above Header module can be simulated by using a PHP enabled HTML module having the following code:

<pre class="brush: php; gutter: false;">
<?php if (is_front_page()) : ?>
<h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

<h3 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h3>

<?php else : ?>
<h3 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h3>

<h5 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h5>

<?php endif; ?>
</pre>

== LayerSlider WP in Builder ==

[http://codecanyon.net/item/layerslider-wp-the-wordpress-parallax-slider/1362246 LayerSlider WP]

Before:

[[File:2013-02-26 07-11-10.jpg|800px|thumb|none]]

After:

[[File:2013-02-26 07-07-40.jpg|800px|thumb|none]]

To fix LayerSlider from being cut off at the bottom, use the following sample CSS:

<pre class="brush: css; gutter: false;">
#builder-module-512b538d8a958-outer-wrapper, #builder-module-512b538d8a958, #builder-module-512b538d8a958 .widget-wrapper {
overflow: visible !important;
}

.ls-thumbnail-slide img {
height: 100% !important;
}
</pre>

In the above replace <code>builder-module-512b538d8a958</code> with the ID of module (typically, a widget bar) in which LayerSlider is placed.

== How to Set Up a Vertical Custom Menu in a Widget using Uber Menu in iThemes Builder ==

[[File:2013-03-04 18-31-39.png|406px|thumb|none|Vertical menu in iThemes Builder]]

'''1.''' Install and activate [http://wpmegamenu.com/ Uber Menu].

'''2.''' Go to Appearance -> UberMenu.

a) <code>Set Orientation</code> to Vertical. There is no need to enter a value for <code>Vertical Mega Submenu Width</code> (even if entered, it doesn't take effect).

b) Theme Integration -> Easy Integration -> ON.

'''3.''' Go to Appearance -> Menus.

a) Create a custom menu that you would like to show vertically in a widget.

b) Tick <code>UberMenu</code> under 'Activate Uber Menu Locations'. Select your desired menu in 'Theme Locations'.

[[File:Screen Shot 2013-03-04 at 6.42.00 PM.png|758px|thumb|none]]

'''4.''' At Appearance -> Widgets, drag a text widget in whichever sidebar you would like to show the vertical menu and paste:

[uberMenu_easyIntegrate]

Refresh your site and adjust the width of sidebar if necessary.

'''5.''' [Optional] To improve the appearance of the menu, add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

<pre class="brush:css; gutter: false;">
#megaMenu ul.megaMenu {
width: 100%;
}

#megaMenu ul li.ss-nav-menu-mega ul li.ss-nav-menu-item-depth-1 {
padding: 0px 27px !important;
}

#megaMenu ul.megaMenu li li li ul {
margin-left: 1em;
}

/* if the widget is placed in content module's sidebar and if sub menu appears to be cut off */
.builder-module-content .builder-module-sidebar-outer-wrapper {
overflow: visible !important;
}
</pre>

== WooCommerce and iThemes Builder ==

=== How to Assign a Layout to the Main Shop page ===

Add the following at the end of child theme's <code>functions.php</code> (before closing PHP, if any):

<pre class="brush: php; gutter: false;">
// =================================================
// = Assign a layout to WooCommerce main shop page =
// =================================================

function custom_filter_shop_layout( $layout_id ) {
if ( is_shop() )
return '5088b68b45105';

return $layout_id;
}
add_filter( 'builder_filter_current_layout', 'custom_filter_shop_layout' );
</pre>

Change <code>5088b68b45105</code> in the above to ID of layout that you wish to assign to the shop page.

To find the ID for a Layout, go to the Layouts listing, copy the edit link for the desired Layout, paste the link somewhere, and grab the text after the last equal sign. For example, consider the following link:

<pre>http://example.com/wp-admin/admin.php?page=layout-editor&editor_tab=layouts&layout=5088b68b45105</pre>

The Layout's ID for the above is <code>5088b68b45105</code>.

Source: http://docs.woothemes.com/document/conditional-tags/

=== How to Change the Number of Products Per Row and Number of Products Per Page ===

By default, 4 products per row and per page are visible in WooCommerce shop page.

[[File:Screen Shot 2013-03-07 at 10.31.59 AM.png|800px|thumb|none]]

If you would like to show more number of products per page, add the following in child theme's <code>functions.php</code> (before closing PHP tag, if any):

<pre class="brush: php; gutter: false;">
// Display 24 products per page.
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 24;' ), 20 );
</pre>

In the above change 24 to number of products you would like per page.

Source: http://docs.woothemes.com/document/change-number-of-products-displayed-per-page/

[[File:2013-03-07 10-36-24.png|771px|thumb|none]]

To change the number of products shown per row, add the following in child theme's <code>functions.php</code> (before closing PHP tag, if any):

<pre class="brush: php; gutter: false;">
// Change number or products per row to 5
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 5; // 5 products per row
}
}
</pre>

Source: http://docs.woothemes.com/document/change-number-of-products-per-row/#customtheme

That should result in something like

[[File:Screen Shot 2013-03-07 at 10.39.01 AM.png|800px|thumb|none]]

Since the width of each product is set to be 22.05% via CSS, the last 2 products fall down as there is not enough space for them to fit in a single row.

The solution is to add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):

<pre class="brush: css; gutter: false;">
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 16% !important;
}
</pre>

You will need to adjust the number 16 in the above to whatever is required so all the products get fit on a single line.

[[File:Screen Shot 2013-03-07 at 10.44.59 AM.png|800px|thumb|none]]

=== Item 3 ===

== How to Show Featured Image Below Navigation Module on Static Pages ==

<code>builder_module_render_navigation</code> hook can be used to inject content below and/or above all nav bars in Builder.

In this example, the goal is to show featured image attached to Pages below the nav bar as a header. This way each Page can have its own unique header image.

[[File:2013-03-22 13-59-21.png|640px|thumb|none]]

[[File:2013-03-22 13-26-02.png|800px|thumb|none]]

'''1.''' Add the following in child theme's <code>functions.php</code> (before closing PHP tag if present):

<pre class="brush: php; gutter: false;">
add_action( 'builder_module_render_navigation', 'show_featured_image', 20 );

function show_featured_image() {
if (has_post_thumbnail() && is_page()) { ?>
<div class="my-featured-image-header">
<?php the_post_thumbnail(); ?>
</div>
<?php }
}
</pre>

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

<pre class="brush: css; gutter: false;">
.my-featured-image-header img {
margin-top: 0;
margin-bottom: 0;
vertical-align: top;
}

.builder-module-navigation .builder-module-element-outer-wrapper { /* if needed */
margin-bottom: 0;
}
</pre>

If <code>20</code> in

add_action( 'builder_module_render_navigation', 'show_featured_image', 20 );

is changed to <code>0</code>, then the function will be output ABOVE the nav bar(s).

Forum topic: http://ithemes.com/forum/topic/40690-featured-image-on-each-page/

== How to Fix "Missing required fields" warnings in Structured Data Testing Tool ==

[http://www.google.com/webmasters/tools/richsnippets Rich Snippets Testing Tool] can be used to check whether Google can correctly parse your structured data markup and display it in search results.

Before:

[[File:Screen Shot 2013-03-29 at 6.25.24 PM.png|774px|thumb|none]]

After:

[[File:Screen Shot 2013-03-29 at 6.57.00 PM.png|768px|thumb|none]]

The fix is to edit these active theme (ideally, should be a child theme of Builder) template files (at the minimum): index.php, archive.php, single.php, page.php and search.php.

You might have to edit other/more template files depending on your need. See http://codex.wordpress.org/images/1/18/Template_Hierarchy.png

If any of these files are not present in the child theme, copy them from parent Builder directory into the child theme's directory and edit them.

* Title of the post should be marked with class <code>entry-title</code>
* Posting date should be marked with class <code>updated</code>
* Full name of the post author should be marked with class <code>author</code> accomplished by elements from hCard microformat – <code>vcard</code> and <code>fn</code>

Sample generated HTML code should be:

<pre class="brush:html; gutter: false;">
<span class="entry-title">How to fix "missing required fields" warnings in Rich Snippets Testing Tool</span>
<span class="updated">December 24, 2011</span>
<span class="vcard author"><span class="fn">Anton Khitrenovich</span></span>
</pre>

=== To fix <code>Warning: Missing required field "updated"</code> in Builder ===

Locate the <code>date</code> div and add <code>updated</code> class to it.

Ex.:

Change

<pre class="brush:html; gutter: false;">
<div class="entry-meta date">
</pre>

to

<pre class="brush:html; gutter: false;">
<div class="entry-meta date updated">
</pre>

=== To fix <code>Warning: Missing required hCard "author"</code> in Builder ===

Change

<pre class="brush: php; gutter: false;">
<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
</pre>

to

<pre class="brush: php; gutter: false;">
<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>
</pre>

Family name and Given names are taken from values entered for Last Name and First Name respectively in author's profile page.

Example of doing the above changes in Kepler child theme: http://ithemes.com/forum/topic/33858-google-rich-snippet-tool-warning-missing-required-field-entry-title/#entry156972

<pre style="white-space: pre-wrap">
Tip: If a static Page is set to be shown on front page, then page.php would be the main file to edit and do the above changes. As it does not have the code for displaying author and date, the below lines can be added in the loop and CSS display property set to none to not show them on the homepage.
</pre>

Ex.:

<pre class="brush:php; gutter: false;">
<div class="entry-meta date updated">
<?php echo get_the_date(); ?>
</div>

<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>
</pre>

was added above

<pre class="brush:php; gutter: false;">

</pre>

[[File:2013-03-29 19-20-58.png|800px|thumb|none]]

In child theme's style.css:

<pre class="brush:css; gutter: false;">
.home .entry-title,
.page .date,
.page .author {
display: none;
}
</pre>

Source:

http://technotes.khitrenovich.com/fix-missing-required-fields-warnings-rich-snippets-testing-tool/

http://nepallica.com/fix-google-rich-snippets-warning-missing-required-field-wordpress/

== How to Make Entire Text Widgets Clickable ==

[[File:2013-03-31 17-48-29.png|237px|thumb|none]]

When a text link is placed in a text widget, only the text will be clickable as hyperlinks are inline elements.

<code>display: block</code> CSS can be used so the entire widget becomes clickable.

Ex.:

Code in a text widget:

<pre class="brush:html; gutter: false;">
<a href="#" class="my-widget-link">Mold Removal and Remediation</a>
</pre>

CSS:

<pre class="brush:css; gutter: false;">
a.my-widget-link {
display: block;
font-size: 1.65em;
padding: 1em;
}

#builder-module-514372ec66190 .widget {
padding: 0;
}
</pre>

where <code>builder-module-514372ec66190</code> is the ID of widget bar module having the widget.

== How to Enable Comments For Custom Post Types ==

'''1.''' Ensure that support for Comments is enabled in the CPT.

How this is done depends on the method being used to set up the CPTs.

Here's an example when using CustomPress:

[[File:2013-04-02 12-35-15.png|608px|thumb|none]]

'''2.''' Go to My Theme -> Settings -> Comments.

Even though the CPT might be shown as selected, it won't actually work until it is unchecked and checked again. Therefore, untick your CPT under Comments, save settings, tick it and again save settings.

'''3.''' In the CPT add/edit screen, tick <code>Allow comments</code> in Discussion meta box. If Discussion meta box is not visible, pull down Screen Options at the top right of the page and tick <code>Discussion</code>.

== How to Create Mobile Navigation like the new Air Theme ==

There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support.

===Pre-requisites===

* Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive capable themes.
* Responsive needs to be enabled in the child theme (functions.php should contain: <code>add_theme_support( 'builder-responsive' );</code>

===Include the javascript code that enables the Mobile dropdown===

* Copy the <code>js</code> folder and contents from the Air child theme to your child theme.
* Add the following code at the end of your child theme's <code>functions.php</code> file, yet before the closing <code>?></code> (if any):

<pre class="brush:php; gutter: false;">
// Enqueuing and Using Custom Javascript/Jquery
function it_air_load_custom_scripts() {
wp_register_script( 'it_air_jquery_additions', get_stylesheet_directory_uri() . '/js/it_air_jquery_additions.js', array('jquery'), false, true );
wp_enqueue_script('it_air_jquery_additions');
}
add_action( 'wp_enqueue_scripts', 'it_air_load_custom_scripts' );
</pre>

===Enable the Mobile Nav as an Alternative Navigation Module Style===
Following the code added in step 1, add the following code in <code>functions.php</code> (again, before a closing ?>)
<pre class="brush:php; gutter: false;">
// Add Support for Alternate Module Styles
if ( ! function_exists( 'it_builder_loaded' ) ) {
function it_builder_loaded() {
builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' );
}
}
add_action( 'it_libraries_loaded', 'it_builder_loaded' );
</pre>

===Add the css code for the Mobile navigation===
Add the following code at the end of your child themes '''mobile''' stylesheet <code>style-mobile.css</code>:

<pre class="brush:css; gutter: false;">
/*********************************************
Navigation Module (Mobile)
*********************************************/
.builder-module-navigation.mobile {
padding-top: .5em !important;
}

.builder-module-navigation.mobile ul {
margin-top: .5em;
}

.builder-module-navigation.mobile li {
width: 100%;
position: relative;
}

/* second level stuff */
.builder-module-navigation.mobile li ul {
position: relative !important;
left: 0 !important;
border: 0;
width: 100%;
margin: 0;
}

.builder-module-navigation.mobile li a,
.builder-module-navigation.mobile .current_page_item li a,
.builder-module-navigation.mobile .current-cat li a,
.builder-module-navigation.mobile .current-menu-item li a {
margin: 0;
background: transparent;
border-color: transparent;
color: #3B3F42;
border-bottom: 1px solid rgba(0,0,0,0.1);
}

.builder-module-navigation.mobile li a:hover,
.builder-module-navigation.mobile .current_page_item li a:hover,
.builder-module-navigation.mobile .current-cat li a li a:hover,
.builder-module-navigation.mobile .current-menu-item li a:hover {
background: #3B3F42;
color: #ECECEC;
}

.builder-module-navigation.mobile li li {
border: 0;
width: 100%;
}

.builder-module-navigation.mobile li ul ul {
margin: 0;
}

.builder-module-navigation.mobile li li a {
padding: .25em 0 .25em 2em;
line-height: inherit;
border-radius: 2px;
}

.builder-module-navigation.mobile li li li a {
padding-left: 4em;
}

.builder-module-navigation.mobile-nav .menu.hidden {
display: none;
}
#it-mobile-menu {
background: #3B3F42;
color: #ECECEC;
padding: .25em .75em;
display: block;
cursor: pointer;
border-radius: 2px;
-webkit-font-smoothing: antialiased;
}

.builder-module-navigation.mobile.borderless {
border: 0;
}
</pre>

===Make sure the Mobile navigation only shows when in Mobile mode (style-mobile.css is active)===

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

<pre class="brush:css; gutter: false;">
/*********************************************
Mobile Navigation Menu (Alternate Module Style - hidden above 500px wide)
*********************************************/

#it-mobile-menu {
display: none;
}
</pre>

===Activate the Mobile Navigation===
Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.

== How to set up a responsive Full Width slideshow in iThemes Builder ==

In this tutorial, we are going to use [http://ithemes.com/purchase/slideshow/ iThemes Slideshow] plugin to set up a responsive full width slideshow in Builder.

[[File:WordPress-Dev-Site-2013-04-24-11-34-20.jpg|800px|thumb|none]]

'''1.''' Install and activate [http://ithemes.com/purchase/slideshow/ Slideshow] plugin. Add a new group named say, <code>Homepage Slider</code>. Edit the group and set dimensions to 1500px by 430px.
Note that these are just recommended dimensions and are not set in stone and you are free to experiment and change them as you see them fit for your needs.

Under <code>Render Mode</code>, select <code>Responsive</code>. Save settings.

Upload the images you wish to appear in the slide group.

[[File:Slideshow ‹ WordPress Dev Site — WordPress 2013-04-24 12-03-05.png|362px|thumb|none]]

'''2.''' Add the following in child theme's <code>functions.php</code> before closing PHP tag (if any):

<pre class="brush: php; gutter: false;">
add_theme_support( 'builder-full-width-modules' );

if ( ! function_exists( 'it_builder_loaded' ) ) {
function it_builder_loaded() {
builder_register_module_style( 'widget-bar', 'Full Width Slider', 'widget-bar-full-width-slider' );
}
add_action( 'it_libraries_loaded', 'it_builder_loaded' );
}
</pre>

Note: If the first line in above, i.e., for adding full width modules support is already present, do not add it again.

'''3.''' Edit your layout and add a Widget Bar module with 1 column wherever you want the Slideshow to appear.

Select <code>Full Width Slider</code> from Style dropdown.

You might want to name the module <code>Slider</code> for easy identification.

[[File:Screen Shot 2013-04-24 at 11.49.50 AM.png|668px|thumb|none]]

'''4.''' Go to Appearance -> Widgets page for this layout and drag iThemes Slideshow widget into the Widget bar module's sidebar and ensure that your full width slider group is the selected one.

[[File:Screen Shot 2013-04-24 at 11.51.54 AM.png|299px|thumb|none]]

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

<pre class="brush:css; gutter: false;">
/* For full width slideshow */

.widget-bar-full-width-slider-background-wrapper {
padding: 0;
margin-bottom: 0;
}

.widget-bar-full-width-slider-outer-wrapper {
max-width: 100% !important;
}
</pre>

'''6.''' Add the following in <code>style-mobile.css</code> (create this file if it is not existing):

<pre class="brush:css; gutter: false;">
/* For full width slideshow */

#pb_slideshow_rslider-1 .nivo-prevNav {
margin-left: 0 !important;
}

#pb_slideshow_rslider-1 .nivo-nextNav {
margin-right: 0 !important;
}
</pre>

'''7.''' Create a new file named <code>style-responsive.css</code> in the child theme and paste the following in it:

<pre class="brush:css; gutter: false;">
/* For full width slideshow */

.widget-bar-full-width-slider-background-wrapper {
padding: 0;
}
</pre>

File:Easy Accordion Test Page - WordPress Dev Site 2013-04-30 13-03-49.png

2013-04-30T07:35:51Z

Sridhar:

Builder Frequently Asked Questions

2013-04-30T05:01:42Z

Sridhar: /* Less Frequently Asked Questions */ Added == Layouts do not appear correctly ==

=Most Frequently Asked Questions=

==Where can I learn about the basics of how Builder works?==

Please start here: http://ithemes.com/builder-basics-training/

==What are child themes? Should I use a child theme?==

It is a good idea to use a child theme (of Builder) as your active theme and not Builder directly. This will protect any modifications and customizations you might have done from being erased when you upgrade Builder.

To learn how to do this, go to:
[http://ithemes.com/ithemes-and-child-themes-introduction/ Child Themes Introduction]
[http://ithemes.com/ithemes-and-child-themes-a-quick-tutorial-1/ Child Themes Tutorial]

Screenshots of the [[Builder Child Themes|available child themes]] for Builder

==Activated a child theme. How come my site does not look like the demo site?==

To get a Builder site with a child theme active to look like the child theme's demo site, it has to be built by way of arranging layouts, modules, widgets and in some cases, editing style.css.

When a child theme is activated, the site will NOT look like the demo site out of the box.

When we create the demo sites, we make no adjustments to any .php or .css files within the theme. The only adjustments we make are within the WordPress dashboard. Like with all themes and child themes (both iThemes and other companies), every site need a little set up. For example, one will need to add some pages, write some posts, create menus, etc. In other words, every site need content. There is no way any theme can do all of these things for customers.

For Thinner child theme (as an example), if one writes some posts, sets a [http://codex.wordpress.org/Post_Thumbnails#Setting_a_Post_Thumbnail post thumbnail] for seven or more of those posts, and selects the slider extension in his/her layout (My Theme > Layouts & Views) that points to his/her main blog, he/she will find a comparable layout as the Thinner home page.

As one can see, there is no way we can provide content for a customer. However, if one takes the time to set up WordPress and add default WordPress items, he/she will see that our child theme demos do represent what a child theme would look like when on a site with content.

If time permits, we will provide instructions on how to create a layout similar to the demo.

Example: [http://ithemes.com/codex/page/Americana#How_to_set_up_Americana_to_look_like_the_demo_site This link] has instructions on how a Builder site with Americana child theme can be made to look like its demo site.

==Use a static page as front page==

Q: I want to have a static page as front page (i.e., at www.mysite.com) and the blog posts to appear at another page, say www.mysite.com/blog. How do I do this?
*Go to Settings -> Permalinks and set the permalink structure to something like /%postname%/
*Create two empty pages (with no content in them) titled '''Home''' and '''Blog'''.
*Go to Settings -> Reading. Under ''Front page displays'', select "A static page (select below)", choose '''Home''' for Front page and '''Blog''' for Posts page. Save changes.

==Apply a layout to the Posts page==

Q:I have created a layout for my Posts page. How do I apply this layout to the Posts page?

A: Go to My Theme -> Layouts and Views. Click on Views tab, then Add View and associate '''Blog''' view with the layout you have created for the Posts page.

==All the pages are getting re-directed to front(home) page==

# Ensure that the default layout has a content module. It is a common occurrence to construct site's home/front page layout with just widget bars, HTML modules etc. and leave it as default. The layout used for Pages, posts, archives, search, category pages etc. must have a content module or else, there will be no place for the content to show up in. Therefore, it is highly recommended that default layout has content module.
# If you using some sort of Redirection plugin, check its settings/deactivate it (for troubleshooting)

==Is it possible to have a 100% full width modules in Builder?==
It is possible to have 100% fluid modules using by editing theme's functions.php. Click [http://ithemes.com/codex/page/Builder_Tips_and_Tricks#Use_a_100.25_width_background_for_one_or_more_modules here] for details.

When using the above method, to specify 100% width to more than 1 module see [http://ithemes.com/forum/index.php?/topic/8624-how-to-get-100-background-for-specific-modules/ this forum thread] and [http://ithemes.com/forum/index.php?/topic/10676-styling-the-content-area-from-builder-274-how-to/#p50101 this].

You might also want to check out http://vanweerd.com/how-to-add-full-width-header-and-footer-to-the-builder-theme/

==How do I display post excerpts as opposed to the full posts in my Posts page?==

Edit your active theme's (should be a child theme of Builder) ''index.php''. (Note: for the Acute theme, edit ''content.php'').

Replace a line similar to

<pre class="brush:php;">
<?php the_content( __( 'Read More→', 'it-l10n-Builder' ) ); ?>
</pre>

with

<pre class="brush:php;">
<?php the_excerpt(); ?>
</pre>

Note: To do the same for other views like category pages, edit the appropriate template file - archive.php, in this case. See http://codex.wordpress.org/images/1/18/Template_Hierarchy.png

If you would like to control the number of characters to appear in excerpts and change the cut-off character from "..." to something else, you might want to use [http://wordpress.org/extend/plugins/the-excerpt-re-reloaded/ The Excerpt re-reloaded] or [http://wordpress.org/extend/plugins/excerpts-deluxe/ Excerpts Deluxe] or [http://wordpress.org/extend/plugins/advanced-excerpt/ Advanced Excerpt].

Also see http://codex.wordpress.org/Function_Reference/the_excerpt

==How do I display full posts as opposed to post excerpts in my Posts page?==

Edit your active theme's '''index.php'''. (Note: for the Acute theme, edit ''content.php'').

Replace

<pre class="brush:php;">
<?php the_excerpt(); ?>
</pre>

with

<pre class="brush:php;">
<?php the_content('Read more...'); ?>
</pre>

== How to place nav bar to the right of logo ==

Follow http://ithemes.com/codex/page/BuilderChild-Default#How_to_place_nav_bar_to_the_right_of_logo

==How do I edit the footer?==

=== Method 1 ===

Make a copy of ''footer.php'' from parent Builder directory, edit it and place in your child theme's (active theme) directory.

[http://ithemes.com/builder-tip-how-to-edit-footer/ Video and detailed instructions]

Examples of customized footer.php: [http://d.pr/MwxJ 1]

'''If you would like to have a footer.php that looks like the screenshot below as starting point to use as is or further customize''', download [http://cl.ly/0z1C1X32243A30462F1q this] zip file, extract it and upload footer.php to your child theme directory.

[[File:Custom-footer.png|800px|thumb|none|Screenshot showing customized footer - Click to enlarge]]

This is the code in footer.php just in case the download link does not work:

<pre class="brush:php;">
<?php

function render_footer() {
?>

<div class="alignmiddle">
<p><a href="<?php bloginfo('url'); ?>">Home</a> | <a href="<?php bloginfo('url'); ?>/privacy-policy/">Privacy Policy</a> | <a href="<?php bloginfo('url'); ?>/terms-conditions/">Terms & Conditions</a></p>
<p><?php echo date( 'Y' ); ?> - Copyright © All Rights Reserved</p>
</div>


<?php wp_footer(); ?>
<?php

}

add_action( 'builder_layout_engine_render_footer', 'render_footer' );

?>
</pre>

In the above replace & with '''& a m p ;''' without spaces and © with '''& c o p y ;''' without the spaces.

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

<pre class="brush:css;">
.alignmiddle {
text-align: center;
}
</pre>

=== Method 2 ===

To remove the credit to iThemes Builder (but leave the standard copyright notice, powered by WordPress etc.) you could also include this function in your child theme's functions.php:

<pre class="brush:php;">
add_filter( 'builder_footer_credit', 'custom_builder_footer_credit' );

function custom_builder_footer_credit( $footer_credit ) {
$footer_credit = 'Powered by <a href="http://wordpress.org">WordPress</a><br />Customized by <a href="http://me.com/">Myself!</a>';

return $footer_credit;
}
</pre>

Ensure that line numbers are not present in the code in functions.php.

See http://www.screencast.com/t/R2hJBzCRk and http://www.screencast.com/t/ZajvGiQGo

Source: http://ithemes.com/forum/index.php?/topic/12687-edit-footer/#p59955

== How to backup and restore a WordPress site that uses Builder ==

=== Manually ===

The standard method of backing up database, editing the resulting .sql file to do a find and replace of source and destination URLs, importing the modified .sql to the new server and then uploading the files will not work in case of Builder sites.

The reason for this is that simple find and replace can not handle [http://wpgarage.com/tips/data-portability-and-data-serialization-in-wordpress/ serialized data]. A solution that handles serialized data must be used. We have tested [http://wordpress.org/extend/plugins/wp-migrate-db/ WP Migrate DB] successfully to manually copy a Builder site with no loss of data (layouts incl their IDs, Style Manager Styles, widgets etc.) from one location to another.

=== Automated (simpler and faster) ===

[http://pluginbuddy.com/purchase/backupbuddy/ BackupBuddy] is the only solution that lets you completely backup and restore a Builder site. For a discussion on the reason behind this, see post #8 at [http://ithemes.com/forum/index.php?/topic/7451-how-do-i-restore-a-site-to-a-different-host-wo-losing-layouts-and-wo-using-backupbuddy/ this] forum thread.

==How to add a custom favicon==

# go to using wp-dashboard > My Theme > Settings, click Favicon and select an icon, or upload your own
# alternatively (but not recommended) you can upload favicon.ico file to your child theme's images directory. Ex.: wp-content/themes/BuilderChild-Foundation/images

Tip: There are services like [http://www.htmlkit.com/services/favicon/ this] and [http://tools.dynamicdrive.com/favicon/ this] which lets you upload a regular image (jpg, png, gif etc.) and convert them to a .ico file.

==How to upgrade Builder?==

See [[Builder_Documentation#How_to_upgrade_Builder|How to upgrade Builder]]

==How to fix "Fatal Error: Class 'ITStorage2' not found"==

This happens because of upgrading Builder without first updating the associated plugins like Style Manager and SEO plugin.

This could have been avoided by following the instructions we provided on how to upgrade Builder [[Builder_Documentation#How_to_upgrade_Builder|here]].

To fix the issue,

# Connect to your web server using either the file manager in cPanel of your hosting account or a FTP client.
# Download the latest versions of Style Manager (if you are using this plugin) and Builder SEO plugin (if you are using this plugin) zip files from your [http://ithemes.com/member/member.php Member Panel].
# Extract the contents of these plugins (whichever is being used i.e., present at wp-content/plugins) and upload them to the corresponding directories in wp-content/plugins overwriting the existing ones.

==How to upgrade Builder when a child theme isn't being used?==

It is always good to use a child theme of Builder as the active theme and not Builder directly. This will avoid custom changes to the theme files from being overwritten by the upgrade.

If you were not aware of this and have been directly using Builder as the active theme and would like to now upgrade to the latest version, follow this approach:

# Take a full backup of your site using [http://pluginbuddy.com/purchase/backupbuddy/ BackupBuddy]. If purchasing BackupBuddy is not an option, take a backup of wp-content/themes/Builder directory and WordPress database (using phpMyAdmin or otherwise) at the least.
# Make a note of all file changes (modifications and new additions) inside Builder directory. Usually modifications will be done to templates like index.php, single.php, archive.php and style.css.
# Upload the latest default child theme to wp-content/themes. It can be downloaded from [http://ithemes.com/member/member.php member panel].
# Apply all changes that were noted in step 2 in wp-content/themes/BuilderChild-Default
# Upgrade Builder to the latest version by following the steps in http://ithemes.com/codex/page/Builder_Documentation#How_to_upgrade_Builder
# Activate the child theme.
# Check your site and fix anything that is amiss. If there are any links whose URLs point to files inside Builder directory, they may have to be changed to point to the child theme directory.

==How do I add search at the right side of my nav bar?==

=== Method 1 ===
Pre-requisite: WordPress 3+, Builder 2.4.10+

Rather than using the navigation module, add an HTML module where you want the navigation to appear
*add the following content to the textbox (assuming your menu is called "menu1", change of course if needed):

<pre class="brush:php;">
<div id="nav_container">
<?php wp_nav_menu( array( 'menu' => 'menu1', 'menu_class' => 'builder-module-navigation') ); ?>

<div class="search_in_nav">
<?php get_search_form(); ?>
</div>

</div>
</pre>
*save the html module, select <tt>no sidebars</tt>, and <tt>enable PHP</tt>,
*save the Builder layout
*add the following code to your stylesheet:
<pre class="brush:css;">
#nav_container {
height: 34px;
display: block;
width: 100%;
background: #FFFFFF url('images/nav_bg.png') repeat top left;
}

.search_in_nav {
float: right;
display: block;
width: 250px;
height: 24px;
padding: 0px 5px;
margin: 0px;
}
</pre>
*play around a bit with the margins and paddings, heights and widths.

'''Note: This method can also be applied to place a image or RSS feed or any HTML in the nav bar.'''

[http://ithemes.com/forum/index.php?/topic/5151-dps-solutions-builder/#p23629 this topic on the forum]

[http://vanweerd.com/how-to-replace-text-links-with-icon-links-in-wp-3-navigation-menus/ Additional Resource 1], [http://ithemes.com/forum/index.php?/topic/10290-adding-social-media-icons-to-the-main-menu-nav/ Additional Resource 2]

=== Method 2 ===

http://ithemes.com/codex/page/Builder_Tips_and_Tricks#How_to_add_a_search_form_at_the_right_side_in_a_nav_bar

==At Appearance -> Editor, templates like footer.php do not appear==

See [http://ithemes.com/forum/index.php?/topic/12061-why-is-child-theme-forum-locked/#p56540 this] and [http://wordpress.org/support/topic/child-themes-in-31-rc2?replies=8 this].

==PCLZIP_ERR_BAD_FORMAT==

When Builder is being installed, if the following appears

<blockquote>
Installing Theme from uploaded file: Builder.zip

Unpacking the package…

Incompatible Archive. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature
</blockquote>

it means that the zip file is corrupt. Try re-downloading it using another browser.

From our observation, this is happening only on Macs. So if you have a spare Windows computer, try downloading Builder again from PC.

==How to center my navigation menu==

http://ithemes.com/codex/page/Builder_CSS_Guide#To_center_the_content_of_nav_bar

== How to assign a layout to all posts belonging to a specific category ==

No view exists which can be used for all single post pages belonging to a particular category.

There are design questions that need to be addressed before implementing such a view. What will happen if a post belongs to multiple categories? In such case suppose the user sets a view associating all posts from Category A and another one for all posts from Category B, and if a post belongs to both the categories there will be conflicting views which leads to the question: which layout should be applied for that post's single page?

The only way currently is to edit each post and set the layout manually.

Forum topic on this: http://ithemes.com/forum/topic/17616-layout-for-single-post-page-of-only-one-post-category/

===Update: There now is a fairly straightforward solution for this===
Chris has come up with a code snippet that needs to be placed in child theme's <code>functions.php</code> which allows you to specify a specific layout using specific conditions.

<pre class="brush:php;">
function custom_filter_category_layouts( $layout_id ) {
if ( is_single() && in_category( 'news' ) )
return '4e5f997043d8e';

return $layout_id;
}
add_filter( 'builder_filter_current_layout', 'custom_filter_category_layouts' );
</pre>

The builder_filter_current_layout filter runs after the Layout selection process has finished and allows custom code to have the final say on what Layout is used. The example code will force the current Layout to be the one with an ID of "4e5f997043d8e" if the site is currently showing an individual post that is in the "news" category. If this condition isn't met, it returns the current Layout ID so that it doesn't change any of the other portions of the site. This can be modified to use any category and any Layout ID.

To find the ID for a Layout, go to the Layouts listing, copy the edit link for the desired Layout, paste the link somewhere, and grab the text after the last equal sign. For example, consider the following link:

<pre>http://example.com/wp-admin/admin.php?page=layout-editor&editor_tab=layouts&layout=4e5f997043849</pre>

The Layout's ID is 4e5f997043849.

To use the code, simply add it to your child theme's functions.php file."

See also: http://ithemes.com/forum/topic/22220-assigning-a-layout-for-post-page-by-category

==Does WordPress 3.0 menu system work in Builder?==

Oh yes! Even before the WordPress 3.0 menu system's final version got released. Then what about this message "Your theme supports 0 menus. Select which menu appears in each location."?, you may be asking. Well, just ignore it. Go ahead and create your menu at Appearance -> Menus, then edit your layout and in the navigation module's settings, select "Custom Menu - ''name''".

You might want to watch [http://ithemes.com/wordpress-3-0-menus-demo-video-on-ithemes-builder/ WordPress 3.0 Menus Demo Video on iThemes Builder].

== How to use a custom font in Builder? ==

See [http://ithemes.com/forum/topic/29969-how-to-add-custom-menu-fonts-to-builder/page__view__findpost__p__138928 this] forum post for an example.

== Builder and BuddyPress ==

Builder's child theme [http://ithemes.com/codex/page/Builder_Child_Themes#Yukon Yukon] has built-in support for BuddyPress. It is designed specifically to work with BuddyPress, and does not require the template pack.

To install BuddyPress while using Builder Yukon as a child theme, follow these steps:

# Install WordPress
# Upload the [http://wordpress.org/extend/plugins/buddypress/ BuddyPress plugin] (from WP repository)
# Activate and follow the BuddyPress installation five-step walkthrough (during step #4 choose to use the included BuddyPress theme, and then finish the installation)
# Upload Builder Theme (Core)
# Upload the Builder child Yukon theme and activate. With Builder and BuddyPress now setup, begin customization.

For all other Builder child themes, BuddyPress need to be installed like it will be installed for any other WordPress theme. Those will require the BuddyPress template pack plugin. On using the template pack: http://wordpress.org/extend/plugins/bp-template-pack/

More [http://ithemes.com/2012/03/14/our-first-builder-child-theme-for-buddypress-yukon/ here] and a follow up post [http://ithemes.com/forum/topic/25458-when-to-activate-buddypress-template-packmembership/ here].

= Less Frequently Asked Questions =

== How do I disable comments on all Pages? ==

Use the [http://wordpress.org/extend/plugins/no-comments-on-pages/ no comments on pages] plugin

==I want to get rid of the text "Comments are closed" at the bottom of the content==

Add the following to your theme's style.css:

<pre class="brush:css;">
.nocomments {
display: none;
}
</pre>

==Uploaded images do not appear==

'''1.''' Ensure that the image is saved in the right format (extension). For example, if a png file is incorrectly saved as .jpg, then it won't work. Two ways of checking this is opening the image in a) Photoshop b) Irfanview.

'''2.''' WordPress 3.5 has taken away the option to manually change the path through WordPress settings, but one can follow [http://www.wpbeginner.com/wp-tutorials/how-to-change-the-default-media-upload-location-in-wordpress-3-5/ these] instructions, and set it to

<pre class="brush: php; gutter: false;">
define( 'UPLOADS', 'wp-content/'.'uploads' );
</pre>

In your WP dashboard go to Settings -> Media. Tick the option to organize uploads in year and month based folders.

'''3.''' Check to see if GD image library support is enabled in your hosting. This can be checked by saving the following as a php file, say phpinfo.php and accessing it from the URL like yoursite.com/phpinfo.php.

<pre>
<?php phpinfo();?>
</pre>

Tip: While uploading an image in image module if you want a fully wide image (i.e., no sidebar) ensure that image width is the same as that of layout. Also specify the exact image height in the module's settings. This will avoid the image from getting stretched disproportionately.

==I am unable to drag and drop widgets onto the sidebar==

*Deactivate all your plugins and try.
*See also this [http://ithemes.com/forum/index.php?/topic/619-widget-problem-no-sidebars-defined/#p2769 support forum thread]

==Add Module shows a blank window==
Q: When I go into My Theme, Layout, Create Layout then choose Add Module, a blank window comes up and just seems to hang there.

A: Deactivate FCKEditor plugin.

B. Deactivate White Label CMS plugin

==Is it possible to have vertical navigation?==
See [http://ithemes.com/forum/index.php?/topic/4697-vertical-navigation/#p23709 this video], the content of interest starts at 07:38 in the video

Pages and/or Categories widget can be used in the sidebar of any widget.

Other solutions:
*[http://wordpress.org/extend/plugins/page-tree/ page tree] plugin
*[http://wordpress.org/extend/plugins/flexi-pages-widget/ flexi pages widget] plugin
*[http://wordpress.org/extend/plugins/simple-sidebar-navigation/ simple sidebar navigation] plugin
*[http://wordpress.org/extend/plugins/allwebmenus-wordpress-menu-plugin/ allwebmenus wordpress menu] plugin
*[http://green-beast.com/blog/?p=157 this] article

==The theme you are currently using isn't widget-aware==
Q: I can't put any widgets in the theme and keep getting this pop-up "The theme you are currently using isn’t widget-aware, meaning that it has no sidebars that you are able to change. For information on making your theme widget-aware, please follow these instructions."

A:
* Go to the Appearance > Widgets page
* Click the Screen Options tab towards the top-right of the page
* Click the "Disable accessibility mode" link

See also this [http://ithemes.com/forum/index.php?/topic/2056-widgets-not-working/#p9231 Support forum thread]

==How to I remove the space at the top of the page==
Add the following code at the end of your child theme's style.css.

<pre class="brush:css;">
.builder-container-outer-wrapper {
margin-top: 0;
}
</pre>

==The last image in billboard appears below compared with the others==

To fix this, add the following at the end of your theme's style.css:

<pre class="brush:css;">
.ithemes-billboard :last-child {
margin-bottom: 1.5em !important;
}
</pre>

==How do I get notified by email whenever there's a Builder update?==

Updates to [http://ithemes.com/codex/page/Category:Builder/Release_Notes Builder Release Notes] page can be tracked via its RSS feed. We can use a service like [http://www.feedmyinbox.com/ Feed My Inbox] to have this RSS feed delivered to your email inbox automatically.

==array_merge() warning==
When a child theme of Builder is activated, if a warning similar to the one below appears on the site

<pre>Warning: array_merge() [function.array-merge]: Argument #1 is not an array in ..\themes\Builder\lib\layout-engine\sidebars.php on line 264</pre>

the fix is to reset the theme.

Go to My Theme -> Settings. Click ''Reset Options'' button.

==Author link contains spaces==

For description of the problem and the solution, visit [http://ithemes.com/forum/index.php?/topic/9701-author-link-produces-404-page-not-found-error/#p45268 this forum post].

==Make parent navigation item not clickable==

Q: I want to create a menu item in the navigation (page defined nav) that has child pages but this menu item shouldn't be clickable.

A: Check [http://ithemes.com/forum/index.php?/topic/5123-wp-30-creating-a-drop-down-menu-without-the-top-level-item-opening-a-page/ this forum post] or you can use a plugin, such as the [http://wordpress.org/extend/plugins/page-lists-plus/ page lists plus plugin]

== How to remove bullets above tabs in Tabber Widget widgets ==

<gallery widths=200px caption="Before and After">
File:Tabber-bullets-before.png
File:Tabber-bullets-after.png
</gallery>

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

<pre class="brush:css;">
ul.tabber-widget-tabs {
list-style: none;
}
</pre>

==How to show blog posts at site's front page (/) as well as at another Page (/blog)==

# At Settings -> Reading, ensure that Front page is set to display latest posts. This is the default setting in WordPress.
# Create a new Page (or edit an existing one) named say, Blog, ensure that it is blank, set the Template to ''Blog Template'' and publish/update it.
# [Optional] If you would like to apply a layout to front page, go to My Theme -> Layouts, create a layout (or duplicate existing one) for it, go to Configure Views, Add View and add associate Home view with the layout created for front page.
# [Optional] If you would like to apply a layout to Blog page, edit the Page and select your desired layout from Custom Layout meta box.

==How to disable Builders built-in SEO functions==
In your WordPress backend, go to My Theme -> Settings and set 'Would You like to use post tags as META keywords on single posts?' to NO (Yes is the default).

Then add the following code your child theme's functions.php as described.

<pre class="brush:php;">
// Remove Parent themes SEO
function remove_seo() {
remove_action( 'builder_add_meta_data', 'builder_seo_options' );
}

add_action('init', 'remove_seo');
</pre>

See also this [http://ithemes.com/forum/index.php?/topic/1243-seo/#p6094 support forum thread]

==What is the recommended way to edit theme templates like index.php and archive.php?==

See [http://ithemes.com/forum/index.php?/topic/12061-why-is-child-theme-forum-locked/#p56540 this forum post]

==How to change the name of a child theme?==

Follow [http://ithemes.com/forum/index.php?/topic/11935-changed-the-name-of-the-child-theme-and-now-the-site-is-messed-up/#p55943 this] example.

==Where is functions.php?==

One should never make changes in functions.php inside parent Builder directory. functions.php in child theme directory should be the one to make changes in. Some child themes will have functions.php and some don't. If this file is not present in child theme directory, create a new file named functions.php, place opening (<?php) and closing (?>) PHP tags, save and upload it to child theme directory using a FTP client. Alternately cPanel's file manager also lets us create files on the server.

Here is how a sample fresh functions.php file looks like:

<pre class="brush:php;">
<?php

?>
</pre>

Any code that we advise you to add in functions.php must be added before the closing PHP tag.

== Which Builder themes are mobile compatible? ==

With Builder, any of our child themes could be used as mobile themes simply by setting up your layout to be more narrow like the size of the iPhone screen.

Here are a few things to consider with mobile themes though:

Load times are slow, so you will want to use a theme that doesn't have many images to load. Any of the Foundation themes are a good example of this (among others).

None of our existing child themes have any gesturing built in to them, so some of the gestures that are very useful on the iPhone won't exist in child themes.

We do offer the [http://pluginbuddy.com/purchase/mobile/ Mobile plugin], which comes with a set of themes and a simple style manager that will allow you to match the colors of your mobile theme to the colors of your standard theme. You should have access to the Mobile plugin in your member area.

== What are the minimum requirements for running Builder ==

The same as those needed for running WordPress 3.2 namely: at least php 5.2.4 and MySQL 5+.

More info: http://ithemes.com/forum/index.php?/topic/15708-minimum-requirements-for-builder-theme/

== How to setup a server on your computer, develop Builder sites locally and migrate them to another location ==

If you are on Windows:

# Install [http://www.apachefriends.org/en/xampp.html XAMPP].
# Set C:\xampp as the installation folder, now your localhost root will be in "htdocs" folder inside C:\xampp.
# [Optional] Set a password for MySQL.
# Download WordPress, extract the zip file and copy/move 'wordpress' folder inside C:\xampp\htdocs. Rename 'wordpress' folder to whatever is the name of your project.
# Install WP [http://codex.wordpress.org/Installing_WordPress#Famous_5-Minute_Install manually].
# [http://ithemes.com/codex/page/Builder_Documentation#How_to_install_Builder Set up Builder].
# Once it is all ready, use BackupBuddy to do a full backup. The generated zip file should be in wp-content/uploads. Download importbuddy.php.
# To learn how to restore the site to another location, watch the video [http://pluginbuddy.com/purchase/backupbuddy/backupbuddy-training/ here].

If you are on Mac, install free version of [http://www.mamp.info/ MAMP] by following [http://www.youtube.com/watch?v=EJFmogQVG8c this] video. Do from step 4 (the root folder on Mac will differ) onwards listed above. I have set "Sites" inside my user directory as the root.

Screenshot:

[[File:Screen shot 2011-07-23 at 9.24.59 AM.png|800px|thumb|none]]

== Can Builder be used to create a fluid/responsive site? ==

Very soon.

Builder is becoming responsive.

See http://ithemes.com/2012/10/10/responsive-is-coming-to-ithemes-builder/

== I installed my Builder powered WordPress site at site.com/wordpress. How do I move it to site.com? ==

Follow [http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory#Using_a_pre-existing_subdirectory_install this].

[http://ithemes.com/forum/topic/20738-replacing-old-html-site-with-new-wordpress-site/ Forum topic].

== My site is loading slow ==

The extra divs in the markup generated by Builder aren't going to impact site performance. A standard WordPress site with a fresh installation of Builder with no plugins loads just fine without any slowness on a decent host like HostGator. Site slowness, if present is (in 99% of the cases) not coming from Builder, but from other factors like non-optimized images, a lot of scripts added by plugins, hosting setup etc.

Things to check for when your site is loading slow:

# Ensure that images (like the ones in header, sliders, Pages and Posts) are optimized for web.
# Ensure that there are no references/calls to URLs (links within the site) that do not exist.
# Deactivate plugins and see if it makes a difference.
# Try using a caching plugin like W3 Total Cache and/or a CDN.
# Analyze your site in http://gtmetrix.com/

Some useful links:

* http://richwp.com/wordpress-cdn-total-cache-amazon-cloudfront/
* http://wp.tutsplus.com/tutorials/the-ultimate-quickstart-guide-to-speeding-up-your-wordpress-site/
* http://www.noupe.com/how-tos/speeding-up-wordpress.html
* http://wpshout.com/faster-wordpress/
* http://css-tricks.com/video-screencasts/114-lets-do-simple-stuff-to-make-our-websites-faster/

== What are the requirements for using Builder? ==

At a minimum, we have the same requirements as WordPress. As can be seen on the [http://wordpress.org/about/requirements/ WordPress requirements page], the minimum supported version of PHP at the time of writing this is 5.2.4.

Builder will always be updated to handle any issues present in future PHP releases. A few versions back, Builder had some issues with the PHP 5.4.x releases. These issues have since been fixed.

So, as of this very moment, Builder is officially compatible with 5.2.4+.

== Why do you advise me to add CSS code at the end of style.css versus directly modifying within? ==

The safest way to make css modifications is if you copy the code that our support moderators supply literally and add it in the location suggested. If you feel more confident hacking into existing code through changes that might cripple your site, feel free to do so, but we will not advise you to do so.

For example, if the code doesn't work (which is highly unlikely, since we test all code before we suggest it), and it's added at the end of your stylesheet, it will NOT harm anything, and we can review what you did, and suggest on how to fix it (did you forget a { or a ; or another character). If however something went bad halfway your stylesheet, your site could easily be completely messed up and all css following any invalid code (for example a missing { or } ) will be invalid as well.

This is our professional advise, but of course, you are free to choose whichever solution you think is best. Do note that it will frustrate our support efforts if there is an issue, and we have to search through a couple of hundred lines of css code to see what might or might not have been changed, opposed to just scrolling to the end of your stylesheet, and locate all customisations in one spot.

== Layouts do not appear correctly ==

Before:

[[File:Wp1 2013-04-30 10-27-47.png|800px|thumb|none]]

After:

[[File:Wp1 2013-04-30 10-28-06.png|800px|thumb|none]]

If the site does not appear correctly with the container not centered and everything aligned to the left, ensure that permissions of all directories in (including) <code>wp-content/uploads</code> is '''755'''.

Especially these directories in <code>uploads</code> directory:

* it-file-cache
* it-file-cache/builder-core
* it-file-cache/builder-layouts

[[File:Screen Shot 2013-04-30 at 10.24.25 AM.png|304px|thumb|none]]

File:Screen Shot 2013-04-30 at 10.24.25 AM.png

2013-04-30T05:00:43Z

Sridhar:

File:Wp1 2013-04-30 10-28-06.png

2013-04-30T04:59:27Z

Sridhar:

File:Wp1 2013-04-30 10-27-47.png

2013-04-30T04:58:42Z

Sridhar:

Builder Child Themes

2013-04-30T03:38:57Z

Sridhar: /* Essence Silver */ (Corrected screenshot, earlier it was that of classic Essence Silver)

=Introduction=

In version 2.7, child themes have been introduced in WordPress. Using Child themes, you can modify (override) all aspects of a Parent theme (e.g. the stylesheet, page templates, functions) without risking to lose any modifications when upgrading the parent theme.

See [http://ithemes.com/ithemes-and-child-themes-introduction/ iThemes and Child Themes – introduction] and [http://ithemes.com/ithemes-and-child-themes-a-quick-tutorial-1/ Child Themes, a quick tutorial].

Child Theme Graphics can also be seen [http://ithemes.com/builder-store/ here] and [http://affiliates.ithemes.com/banners-graphics/ithemes/child-theme-graphics/ here].

Listed below are the child themes of Builder that can be downloaded from the [http://ithemes.com/member/member.php member's area] (latest at the top):

= List of child themes =

== Air ==

Builder Child Air is a new foundational or starter child theme for iThemes Builder. Whether you’re using the Builder Style Manager or writing your own CSS, we hope Air will be a great new place to start when creating your custom responsive-ready Builder child themes.

Builder child Air includes several convenient built-in features to help lay the groundwork for custom child theme creation. A few of Air's theme highlights include:

* Built-in Mobile-Ready Menu Style
* Fully Optimized for Style Manager
* New Inset Module Styles
* Full Window Image Style

[[File:Air 2013-04-12 09-33-58.png|291px|thumb|none]]

[http://demos.ithemes.com/air/ Live Demo]

[http://ithemes.com/2013/04/04/introducing-air-a-new-foundation-child-theme-for-builder/ Blog entry announcing the release of Air]

== Noise ==

12 March 2013

Today we’re pumped to release Noise, a responsive-ready Builder child theme with a brand new plugin for iThemes Builder, Builder Audio Block. Designed with musicians and bands in mind, Builder now makes it easy to create a WordPress band website with a “built-in” audio player, a way to display albums or discographies, a list of upcoming shows and support for music downloads/purchases with Easy Digital Downloads.

Builder Child Noise features several new-to-Builder design and functionality elements that you’ve requested, including:

* New Full Window and No Spacing Image Module Styles: Noise features new alternate module styles for images, including Full Window (or full width) and No Spacing. These new module styles for images can be added anywhere in your Builder Layouts.

* Post Formats Styles: Ever wanted to post a quick status update or just a link? Noise includes new post format styles that add a Tumblr-like feel for your blog. From the Add New Post Page, you’ll see a new option to apply a format to the post, including standard, status, video, link or image.

* Events Block Styling: To make it easy to include upcoming shows, Noise includes matching styles for Builder Events Block.

[[File:Noise 2013-04-12 09-41-21.png|409px|thumb|none]]

[http://demos.ithemes.com/noise/ Live Demo]

[http://ithemes.com/2013/03/11/just-released-noise-a-new-builder-child-theme-new-builder-audio-block/ Blog entry announcing the release of Noise]

[http://ithemes.com/codex/page/BuilderChild-Noise Noise codex page]

== RedBud ==

With a soft, feminine style, RedBud is perfect for bloggers, event planners, photography sites or vintage boutiques. RedBud features hand-drawn details, several alternate widget styles, a unique Google font pairing and theme-matching styling for Gravity Forms.

[[File:RedBud 2013-02-05 21-57-03.png|404px|thumb|none]]

[http://demos.ithemes.com/redbud/ Live Demo]

[http://ithemes.com/2013/02/05/redbud-a-new-builder-child-theme-with-hand-drawn-details/ Blog entry announcing the release of Threads]

[http://demos.ithemes.com/redbud/2013/02/03/free-social-media-icons-download/ Free social media icons to match RedBud Builder child theme]

== Threads ==

Need to build an online t-shirt shop on WordPress? We released a new feature-rich responsive-ready Builder Child Theme, Threads.

Threads is designed to integrate exclusively with Shopp, our favorite ecommerce plugin for WordPress. Threads includes 15+ Shopp-specific styled templates so you'll have one consistent look across the theme and ecommerce portions of the site, plus custom styles for product views, cart-in-navigation settings and much more.

[[File:Threads 2013-01-21 20-04-40.png|429px|thumb|none]]

[http://demos.ithemes.com/threads/ Live Demo]

[http://ithemes.com/2013/01/11/threads-a-new-builder-child-theme-for-t-shirt-shops-available-now/ Blog entry announcing the release of Threads]

== Icebox ==

We're celebrating Builder's birthday today (December 17, 2012) with a free Builder child theme download for all Builder users! Icebox is a new responsive-ready child theme.

[http://f.cl.ly/items/0e1E3w0F0n0N0i2b3K1h/Icebox%202012-12-18%2009-22-15.png Screenshot]

[http://demos.ithemes.com/icebox/ Live Demo]

[http://ithemes.com/2012/12/18/free-builder-child-theme-download-icebox/ Blog entry announcing the release of Icebox]

== Thrifty ==

Thrifty is a responsive ecommerce child theme for Builder. With a simple, minimalist design, Thrifty perfectly showcases your products by combining the usefulness of three popular ecommerce plugins with Builder's powerful layout engine.

'''Support for Three Ecommerce Plugins'''

Each of the following plugins provides its own set of ecommerce features and we've worked to highlight the functionalities of each in Thrifty:

* Shopp (our recommended solution)
* Easy Digital Downloads
* WooCommerce

Just choose your plugin, upload and activate and Thrifty goes to work providing the styling for your online store.

<u>Note</u>: Thrifty (or any other Builder child theme) does not influence the functionality of the e-commerce plugin, but has styling and tweaked template files that enhance the presentation of the ecommerce plugin's output.

[[File:Thrifty - Shopp 2012-12-21 09-25-35.png|199px|thumb|none]]

[http://demos.ithemes.com/thrifty/ Live Demo]

[http://ithemes.com/2012/11/26/just-released-thrifty-a-new-ecommerce-child-theme-for-builder/ Blog entry announcing the release of Thrifty (has more details)]

[http://ithemes.com/codex/page/BuilderChild-Thrifty Thrifty codex page]

== Avail ==

With a clean, modern design, Avail is great for business or corporate websites. Paired with iThemes Builder 4.0, Avail automatically responds for mobile, tablet and desktop viewing.

[[File:Avail 2013-01-31 23-17-11.png|467px|thumb|none]]

[http://demos.ithemes.com/avail Live Demo]

[http://ithemes.com/2012/11/15/avail-a-new-responsive-ready-builder-child-theme/ Blog entry announcing the release of Avail]

[http://ithemes.tv/november-20-2012/ Overview Video by Benjamin Bradley on iThemesTV - Nov 20, 2012] - Time frame: 02:48 to 13:53

[http://ithemes.com/purchase/avail/ Purchase page]

== Essence Silver ==

Essence Silver is ported from one of our most popular classic themes (the very first iThemes theme to be exact) by the same name.

[[File:Demosithemescombuilderessencesilver-full.png|652px|thumb|none]]

[http://demos.ithemes.com/builder-essence-silver/ Live Demo]

[http://ithemes.com/2012/09/27/classic-theme-essence-silver-now-available-as-a-builder-child-theme/ Blog entry announcing the release of Essence Silver]

== Resume ==

Résumé child theme has been designed for building a WordPress résumé website.

Résumé features 3 color versions: Résumé, Résumé Blue and Résumé Dark.

[[File:Résumé 2012-09-12 11-09-03.png|800px|thumb|none]]

[http://demos.ithemes.com/resume/ Live Demo]

[http://ithemes.com/2012/09/11/just-released-new-builder-child-theme-resume-in-3-color-variations/ Blog entry announcing the release of Resume]

Résumé Blue:

[[File:Résumé - Blue 2012-09-12 11-13-16.png|800px|thumb|none]]

Résumé Dark:

[[File:Résumé - Dark 2012-09-12 11-14-36.png|800px|thumb|none]]

== Remark ==

Remark is a fun, simple child theme designed with bloggers in mind and a perfect match for those that may want to set up a small Etsy-type shop.

[[File:Remark 2012-07-20 20-52-12.png|351px|thumb|none]]

[http://demos.ithemes.com/remark/ Live Demo]

[http://ithemes.com/2012/07/20/just-released-new-child-theme-remark/ Blog entry announcing the release of Remark]

== Book Nook ==

Designed with authors in mind, the latest child theme for iThemes Builder will showcase your work perfectly.

[[File:Book-Nook-2012-06-23-12-16-59.jpg|565px|none]]

[http://demos.ithemes.com/book-nook/ Live Demo]

[http://ithemes.com/2012/06/22/new-child-theme-preview-book-nook/ Blog entry announcing the release of Book Nook]

== Gallery Church ==

You'll have everything you need for building a WordPress church website with our latest Builder child theme release: Gallery Church — featuring integrations with both Builder Church Block and the newly-released Builder Events Block.

With a bold and modern style, this theme is perfect for church sites that are both welcoming with a fresh, direct message and easy to navigate for visitors.

[[File:Gallery-Church-2012-06-23-12-24-04.jpg|501px|none]]

[http://demos.ithemes.com/gallery-church/ Live Demo]

[http://ithemes.com/2012/05/23/new-child-theme-gallery-church-with-church-and-events-block-integration/ Blog entry announcing the release of Gallery Church]

== Arrival ==

Arrival features simple styling in either blue or pink for creating a baby announcement site to share with family and friends.

[[File:Arrival-2012-06-23-12-43-18.jpg|406px|none]]

[http://demos.ithemes.com/arrival/ Live Demo]

[http://ithemes.com/2012/04/27/due-next-week-new-child-theme-arrival/ Blog entry announcing the release of Arrival]

'''Arrival Blue''':

[[File:Arrival-2012-06-23-12-48-47.jpg|406px|none]]

== Yukon ==

Yukon is iThemes first Builder child theme for BuddyPress.

Yukon styles BuddyPress features for member profiles, network activity/updates, groups, and forums to create the perfect BuddyPress + Builder social networking site.

[[File:2012-03-15 08-20-50.png|800px|none]]

[http://demos.ithemes.com/buddypress/yukon/ Live Demo]

[http://ithemes.com/2012/03/14/our-first-builder-child-theme-for-buddypress-yukon/ Blog entry announcing the release of Yukon]

== Vow ==

Perfect for wedding websites, Vow features a bright, clean-lined design with a ribbon menu, framing wedding details in classic style. Chronicle wedding plans with Vow’s blog styling, add wedding details like ceremony location or registry information, or add a photo gallery with engagement photos.

[[File:Vow-2012-02-09-10-25-00.jpg|374px|none]]

[http://demos.ithemes.com/vow/ Live Demo]

[http://ithemes.com/2012/02/08/introducing-vow-a-wedding-child-theme-for-builder/ Blog entry announcing the release of Vow]

[http://demos.ithemes.com/vow-red Vow Red]

[http://demos.ithemes.com/vow-yellow Vow Yellow]

[http://demos.ithemes.com/vow-blue Vow Blue]

[http://ithemes.com/2012/02/23/just-released-three-new-color-variations-of-vow/ Blog entry announcing the release of Vow color variants]

== Market ==

Like Depot, Market features integration with three different WordPress eCommerce plugins: Shopp, Cart66 and WP-Ecommerce.

With simple lines, cool colors, and bold contrast styling for widget areas, Market is the perfect store-front for your WordPress eCommerce site.

[[File:Market 2012-02-05 09-34-05.png|541px|none]]

[http://demos.ithemes.com/market/ Live Demo]

[http://ithemes.com/2012/02/02/just-released-market-an-ecommerce-child-theme-for-builder/ Blog entry announcing the release of Market]

== Kepler Light ==

Kepler Light is the "lighter" version of the original Kepler. Kepler Light features the same great photography-focused styling, great for showcasing your creative work.

Kepler Light includes several specific post styles to focus on featured images, all with a unique custom date stamp to add interest to your blog. With Kepler Light and Builder, you'll have the perfect foundation for creating awesome WordPress photography sites.

[[File:Kepler-2012-01-27-21-17-02.jpg|269px|none]]

[http://demos.ithemes.com/kepler-light Live Demo]

[http://ithemes.com/2012/01/26/introducing-kepler-lite/ Blog entry announcing the release of Kepler Light]

== Adept ==

Percfect for small businesses or professional bloggers, Adept features a sleek design to pair with Builder’s great flexibility and functionality for easily building WordPress websites.

Some of the key features include:

* simple navigation with great button styling and secondary dropdown styles
* alternate module styles for navigation and widget modules to configure your site exactly to your specifications
* styling for Gravity Forms to match the theme’s overall look and feel
* and custom-styled search bar style

[[File:Adept-613x1024.jpg|613px|none]]

[http://demos.ithemes.com/adept/ Live Demo]

[http://ithemes.com/2012/01/13/just-released-adept-a-child-theme-for-builder/ Blog entry announcing the release of Adept]

== Depot ==

Depot is the first e-commerce Builder Child Theme. Depot features full integration and optimization of three different WordPress Ecommerce plugins: Shopp, Cart66 and WP-Ecommerce. Operating on iThemes Builder's powerful layout engine and paired with one of these eCommerce plugins, Depot is the perfect store-front for your WordPress-powered website or blog.

[http://demos.ithemes.com/depot/ Live Demo]

[[File:Depot-shopp.jpg|451px|thumb|none]]

[http://ithemes.com/2011/12/22/just-released-depot-an-ecommerce-child-theme-for-builder/ Blog entry announcing the release of Depot]

[http://ithemes.com/builder-store/depot/ Purchase page]

== Expansion ==

Expansion, the latest child theme for iThemes Builder, boasts a high-contrast design with strong, simple, and clean edges. Besides the remarkable layout flexibility of all iThemes Builder child themes, Expansion also features several theme-specific details. It is a great child theme for small and large businesses. Featuring 3 alternate widget styles and a beautiful date stamp on each blog post, Expansion is the perfect choice for your next theme.

[[File:Builder-Child---Expansion-Demo-2011-12-02-14-51-14.jpg|800px|thumb|none]]

[http://demos.ithemes.com/expansion/ Live Demo]

[http://ithemes.com/2011/12/01/just-released-expansion-the-latest-child-theme-for-builder/ Blog entry announcing the release of Expansion]

[http://ithemes.com/builder-store/expansion/ Purchase page]

'''Expansion Red'''

[[File:Expansion-red.png|800px|thumb|none]]

'''Expansion Blue'''

[[File:Expansion-blue.png|800px|thumb|none]]

[http://ithemes.com/2011/12/15/just-released-two-new-color-options-for-expansion/ Blog entry announcing Expansion Red and Expansion Blue]

== Patterned ==

A handcrafted look and feel – perfect for any special project or site. You'll love the Google Web Font (Rancho) that gives titles a special flair and draws people in to your site. From the stay-at-home blogging mom to the business looking for a softer, more subtle design, Patterned is a great choice for your next Builder child theme!

[[File:Ithemes-builder-childtheme-patterned.jpg|800px|thumb|none]]

[http://demos.ithemes.com/patterned/ Live Demo]

[http://ithemes.com/2011/11/08/ithemes-builder-releases-51st-child-theme-patterned/ Blog entry announcing the release of Patterned]

== Traverse ==

Traverse features a high contrast design and bold styling intended to showcase content for travel blogs. Stories and photos from your adventures will be framed perfectly by Traverse.

[[File:Traverse-ithemes-builder-childtheme.png|800px|thumb|none]]

[http://demos.ithemes.com/traverse/ Live Demo]

[http://ithemes.com/2011/10/26/get-ready-to-travel-with-traverse/ Blog entry announcing the release of Traverse]

== Architect ==

[[File:IThemes-builder-Architect.png|800px|thumb|none]]

[http://demos.ithemes.com/architect-builder/ Live Demo]

[http://ithemes.com/2011/09/20/architect-child-theme-for-ithemes-builder/ Blog entry announcing the release of Architect]

== Acute ==

Acute is a clean business theme, perfect for giving your site a professional, polished look. Currently it is in gray and blue, there will be 4 more color options released soon.

With Acute you will find custom styled (default) widgets; integrated support for Slideshow and Accordion (2 plugins from the DisplayBuddy suite); image grid, portfolio and magazine extensions; plus a new custom portfolio extension – only available with Acute.

[[File:IThemes-builder-Acute.png|800px|thumb|none]]

[http://demos.ithemes.com/acute/ Live Demo]

[http://ithemes.com/2011/09/20/acute-is-the-45th-child-theme-for-ithemes-builder/ Blog entry announcing the release of Acute]

=== Acute Blue ===

[[File:Acute-blue.png|800px|thumb|none|Acute Blue]]

=== Acute Green ===

[[File:Acute-Green.png|800px|thumb|none|Acute Green]]

=== Acute Red ===

[[File:Acute-Red.png|800px|thumb|none|Acute Red]]

=== Acute Violet ===

[[File:Acute-Violet.png|800px|thumb|none|Acute Violet]]

=== Acute Orange ===

[[File:Acute-Orange.png|800px|thumb|none|Acute Orange]]

== Kepler ==

Kepler is a portfolio style theme - perfect for showcasing photography, graphic design, and art. It is characterized by simple, easy to read typography, and a focus on images.

[[File:Ithemes-builder-child-kepler.png|800px|thumb|none]]

[http://demos.ithemes.com/kepler/ Live Demo]

[http://ithemes.com/2011/08/30/kepler-child-theme-walkthroughwebinar/ Quick video showing you how Kepler looks and works (Kepler Child Theme Walkthrough/Webinar)]

[http://ithemes.com/2011/09/06/how-to-work-with-kepler-child-theme-video/ How to Work With Kepler Child Theme (video)]

== Singular ==

[[File:Builder-child-singular.png|800px|thumb|none]]

Singular - the simple, clean theme with all the flexibility inherent in iThemes Builder.

Release Date: August 9, 2011

[http://demos.ithemes.com/singular/ Live Demo]

==City Church==

[[File:CityChurch.jpg|573px|thumb|none]]

[http://ithemes.com/2011/07/19/city-church-preview-an-upcoming-child-theme-for-builder/ Preview]

The theme developers [http://ithemes.com/2011/07/27/preview-of-new-photo-child-theme-for-builder/ described] the unique features of the theme on iThemes.tv. You can watch the specific segment here:

{{#ev:youtube|4YObZwIoYok|560}}

Release Date: August 3, 2011

[http://demos.ithemes.com/city-church/ Live Demo]

[http://ithemes.com/2011/08/03/how-to-launch-your-churchs-website-with-wordpress-and-builder/ Blog entry announcing the release of City Church]

==Thinner==

[[File:Builder-Child–Thinner.jpg|800px|thumb|none|Screenshot of Thinner, 41st child theme of iThemes Builder]]

[http://demos.ithemes.com/thinner/ Live Demo]

[http://ithemes.com/2011/07/15/thinner-the-41st-child-theme-for-ithemes-builder/ Blog entry announcing the release of Thinner]

==Keen==

[[File:Builder-Child–Keen.png|800px|thumb|none|Screenshot of Keen, 40th child theme of iThemes Builder]]

[http://demos.ithemes.com/keen/ Live Demo]

[http://ithemes.com/2011/07/11/builder-child-40-keen/ Blog entry announcing the release of Keen]

==Dockside==

[[File:Builder Child – Dockside Demo 1309411970077.png|800px|none]]

[http://demos.ithemes.com/dockside/ Live Demo]

Features:

* beautifully designed blockquotes with dropcap styling to give that extra flare and distinction.
* fresh, new category and comment icons to make your meta data stand out.
* featured image usage on blog layout
* great typography, including the "Brawler" Google font for the headlines

[http://ithemes.com/2011/06/29/dockside-child-theme-39-for-ithemes-builder/ Blog entry announcing the release of Dockside]

==Revised==

[[File:Builder Child – Revised Demo 2011-06-15 22-37-21.png|800px|none]]

[http://demos.ithemes.com/revised/ Live Demo]

Features:

* Simple Blogroll Layout
* Feature Image Usage
* Unique Styled Archives
* Two Alternate Widget Styles

[http://ithemes.com/2011/06/13/builder-child-themes-number-37-and-38/ Blog entry announcing the release of Revised]

==Heat Wave==

[[File:Builder-child-heat-wave.png|800px|none]]

[http://demos.ithemes.com/heat-wave/ Live Demo]

Features:

* Uniquely Styled Comment Section
* Default WordPress Gallery Colorbox Pop Up
* Hot, Summery Colors
* and Built In Gravity Forms Styles

[http://ithemes.com/2011/06/06/sneak-peak-at-our-35th-builder-child-theme-heat-wave/ Blog entry announcing the release of Heat Wave]

==Encased Light==

[[File:builder-child-encased-light.png|800px|none]]

[http://demos.ithemes.com/encased-light/ Live Demo]

[http://ithemes.com/new-ithemes-builder-child-theme-encased-light/ Blog entry announcing the release of Encased Light]

==Drafted==

[[File:Builder-child-drafted.png|800px|none]]

[http://demos.ithemesbuilder.com/drafted/ Live Demo]

==Cubed==

[[File:Builder-child-cubed.png|800px|none]]

[http://demos.ithemesbuilder.com/cubed/ Live Demo]

==Rainey Day==

[[File:Builder-childtheme-rainey-day.png|800px|none]]

[http://demos.ithemesbuilder.com/rainey-day/ Live Demo]

A light and subtle, yet dramatic theme.

* unique fonts and font styling on the nav bar and headlines tags
* multi-shaded lavender color scheme
* ribbon graphics for added flair and elegance
* styling of the author meta data
* other stylish graphics being used throughout the theme

[http://ithemes.com/rainey-day-child-theme/ Blog entry announcing the release of Rainey Day]

==Scooter==

[[File:Builder-childtheme-scooter.png|800px|none]]

[http://demos.ithemesbuilder.com/scooter/ Live Demo]

* Retro Styled Theme – making Retro the new Contemporary.
* 'Dancing Script' Google Font, providing a super-easy way to have a unique titles and headlines without slowing your site down with heavy graphics.
* Magazine Layout Builder Extension – so you can take advantage of the ease of using Builder with the visual sophistication of a magazine layout.
* ContactBuddy and GravityForms Styles (Extensions) built in – so once you install the specific plugins, you will have access to the advanced styling without having to touch any code.
* Alternate HTML modules – so you can have different looking HTML modules without having to change the css code.

{{#ev:youtube|IQlnrb9sfiY}}

[http://ithemes.com/scooter-a-retro-style-child-theme-for-ithemes-builder/ Blog entry announcing the release of Scooter]

==Covert==

[[File:Covert-builder-childtheme.png|800px|none]]

[http://demos.ithemesbuilder.com/covert/ Live Demo]

A quite stunning in its bold-yet-minimalist style. Similar to its related (sister?) theme Covell, Covert uses a minimalist, monochromatic style, but one that allows photographers and artists to display their work in a more dramatic and darker style.

Covert also includes 2 distinct navigation styles, making it easy to portray just the amount of "minimalism" you want, as well as the custom projects post type, making project organization and display a snap.

[http://ithemes.com/covert-30th-child-theme-for-ithemes-builder-just-released/ Blog entry announcing the release of Covert]

==Encased==

[[File:Encased-builder-child-theme.png|800px|none]]

[http://demos.ithemesbuilder.com/encased/ Live Demo]

Some of the other features that make this theme special:

* Unique Navigation Styles – Fixed Left and Top Navigation
* Encased Content Module – Content Module is ‘encased’ within the layout making it stand out from the other modules.

[http://ithemes.com/new-ithemes-builder-child-theme-encased/ Blog entry announcing the release of Encased]

==Lucky 7==

[[File:Lucky7-builder-child-theme.png|800px|none]]

[http://demos.ithemesbuilder.com/lucky7/ Live Demo]

Some of the special features included in Lucky 7:

* 7 awesome color palettes – which can be further customized using the Style Manager plugin – giving you a professional look with virtually no effort
* The ability to select a different color for individual modules – making it easy to super-customize each portion of the page
* Beautiful meta blocks for author info – making your site (and your authors) stand out from the crowd
* Inset widgets and navigation for a unique, professional look
* Additional custom theme settings, such as a simple setting to change the “read more” text, giving your site a special touch without having to know anything about code
* Built-in iPhone-ready mobile theme
* and popular rounded corners

[http://ithemes.com/lucky-7-new-ithemes-builder-child-theme-released/ Blog entry announcing the release of Lucky 7]

==Covell==

[[File:Ithemes-builder-child-covell.png|800px|none]]

[http://demos.ithemesbuilder.com/covell/ Live Demo]

[http://ithemes.com/covell-the-newest-child-theme-for-ithemes-builder/ Blog entry announcing the release of Covell]

==Classen==

[[File:Classen-ss-blog.png]]

[http://demos.ithemesbuilder.com/classen Live Demo]

[http://ithemes.com/new-builder-child-theme-released-classen/ Blog entry announcing the release of Classen]

==Blueprint==

[[File:Blueprint-builder-childtheme.png|537px]]

[http://demos.ithemesbuilder.com/blueprint/ Live Demo]

[http://ithemes.com/new-builder-child-theme-released-blueprint/ Blog entry announcing the release of Blueprint]

==Ionic==

'''Ionic – Sky'''

[[File:Ionic-sky.png|537px]]

[http://demos.ithemesbuilder.com/ionic-sky Live Demo]

'''Ionic – Green'''

[[File:Ionic-green.png|537px]]

[http://demos.ithemesbuilder.com/ionic-green Live Demo]

[http://ithemes.com/new-builder-child-themes-released/ Blog entry announcing the release of Ionic Sky and Ionic Green]

'''Ionic'''

[[File:Ionic-builder-child-theme.png|537px]]

[http://demos.ithemesbuilder.com/ionic Live Demo]

[http://ithemes.com/ionic-new-builder-child-theme-released/ Blog entry announcing the release of Ionic theme]

==Americana==

'''Americana'''

[[File:Americana-builder-child-theme.png|537px]]

[http://ithemes.com/americana-new-builder-child-theme-released/ Blog entry announcing the release of Americana theme]

[http://demos.ithemesbuilder.com/americana/ Live Demo]

[http://ithemes.com/codex/page/Americana Instructions for setting up Americana to look like the demo site]

'''Americana - Mojave''' (Release Date: January 21, 2011)

[[File:Americana-mojave.png|537px]]

[http://ithemes.com/new-builder-child-themes-released/ Blog entry announcing the release of this theme]

[http://demos.ithemesbuilder.com/americana-mojave Live Demo]

'''Americana - Libertas''' (Release Date: January 21, 2011)

[[File:Americana-libertas.png|537px]]

[http://ithemes.com/new-builder-child-themes-released/ Blog entry announcing the release of this theme]

[http://demos.ithemesbuilder.com/americana-libertas Live Demo]

'''Americana - Interstate''' (Release Date: January 21, 2011)

[[File:Americana-interstate.png|537px]]

[http://ithemes.com/new-builder-child-themes-released/ Blog entry announcing the release of this theme]

[http://demos.ithemesbuilder.com/americana-interstate Live Demo]

==4 more themes in Foundation series==

[[File:Foundation_tropic.jpg]]

[[File:Foundation_bonsai.jpg]]

[[File:Foundation_glacier.jpg]]

[[File:Foundation_blank.jpg]]

[http://ithemes.com/4-new-ithemes-builder-themes-released/ Blog entry announcing these]

==Foundation - WordPress theme for Churches and Ministries==

[[File:Foundation.jpg]]

[http://ithemes.com/foundation-church-wordpress-theme-released/ Blog entry announcing the release of Foundation theme]

[http://demos.ithemesbuilder.com/foundation/ Live Demo]

==Entree Pub==

[[File:EntreePub.png|700px]]

This is another theme in the restaurant series, with a little bit of a pub twist.

[http://ithemes.com/new-builder-child-theme-released-entree-pub/ Blog entry announcing the release of Entree Pub theme]

[http://demos.ithemesbuilder.com/entree-pub Live Demo]

==Entree==

[[File:Builder-child-enree.png|500px]]

This is a child theme associated with Restaurant Block.

[http://demos.ithemesbuilder.com/entree/ Live Demo]

[http://ithemes.com/restaurant-builder-block-and-child-theme-released/ Blog Post]

==Anchor==

[[File:Anchor_ChildTheme.png]]

[http://ithemes.com/new-builder-child-theme-anchor-released/ Blog entry announcing the release of Anchor theme]

[http://demos.ithemesbuilder.com/anchor Live Demo]

[http://ithemes.com/forum/index.php?/topic/4955-question-about-anchor-theme/#p23068 Instructions on how to set up Anchor so it looks like the demo site]

==Slate==

[[File:Slate_ChildTheme.png]]

[http://ithemes.com/new-builder-child-theme-slate/ Blog entry announcing the release of Slate theme]

[http://demos.ithemesbuilder.com/slate/ Live Demo]

==Astro==

[[File:Astro__ChildTheme.jpg]]

[http://ithemes.com/forum/index.php?/topic/2530-astro-child-theme-version-2-released/ Version 2 Release Announcement forum thread]

[http://ithemes.com/new-builder-child-theme-astro-released/ Blog entry announcing the release of Astro theme]

==Default==

[[File:Default__ChildTheme.png]]

==Retro==

[[File:Retro__ChildTheme.png]]

==Vintage==

[[File:Vintage_ChildTheme.png]]

==Coffee==

[[File:Coffee_ChildTheme.png]]

==Fire==

[[File:Fire_ChildTheme.png]]

[http://ithemes.com/more-builder-goodness-coming-your-way/ Blog entry announcing the release of Retro, Vintage, Coffee and Fire themes]

= How to rename a child theme =

'''1.''' Edit Theme Name in child theme's style.css.

Ex.: Change

<code>Theme Name: Builder Child Theme - Default</code>

to

<code>Theme Name: My Awesome Theme</code>

You can also change other values like Theme URI, Description, Author etc.

DO NOT delete or change <code>Template: Builder</code>

'''2.''' Change the name of child theme directory to your liking.

Ex.: Change

<code>BuilderChild-Default </code>

to

<code>MyAwesomeTheme</code>

Ensure that there are no spaces in the name of child theme directory.

= How to update a child theme =

It is generally not recommended to update a child theme after it has been extensively customized.

However, if you would like to, follow these steps:

# Take a full backup of your site using BackupBuddy
# Make a list of changes and addition/deletions done to files and foldes in the current child theme directory
# Download the latest version of child theme, edit its style.css, change the theme name in the comments section at the top, change the theme folder name to something else. For details, see the above section on ''How to rename a child theme''
# Re-apply the changes noted in step 2 to this theme
# Zip it up, install and activate this new theme
# Check the site and ensure that everything is alright. You can use a plugin like [http://wordpress.org/extend/plugins/theme-test-drive/ Theme Test Drive] to see the site in older version of this child theme in another tab/browser

File:Demosithemescombuilderessencesilver-full.png

2013-04-30T03:38:09Z

Sridhar:

Builder CSS Guide

2013-04-29T03:33:12Z

Sridhar: /* Image Module */ Added === How to center image in Image Module ===

==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. [http://getfirebug.com/ 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 [http://ithemes.com/forum/index.php?/topic/925-builder-theme-advanced-css-free-training-videos/ here].'''

Here are few recommended resources for CSS:

*[http://www.brainjar.com/css/using/ BrainJar]
*[http://www.sitepoint.com/videos/videocss1/ The CSS Video Crash Course - SitePoint Videos]
*[http://www.w3schools.com/css/ 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. [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.

=== 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===

<pre class="brush:css;">
.builder-container-outer-wrapper {
margin-top: 0;
}
</pre>

<gallery widths=200px caption="Before and After">
File:Top-margin-container-before.png
File:Top-margin-container-after.png
</gallery>

=== To remove gap between each module ===

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

<pre class="brush:css; gutter: false;">
.builder-module-background-wrapper {
margin-bottom: 0;
}
</pre>

<gallery widths=320px heights=199px>
File:Holistic Nutrition By Lisa 2013-01-25 09-16-09.png|Before
File:Holistic Nutrition By Lisa 2013-01-25 09-15-19.png|After
</gallery>

<u>Note</u>: This only applies to Default child theme.

===To remove the top and bottom borders for all modules===

<u>Note</u>: This only applies to Default child theme.

<pre class="brush:css;">
.builder-module {
border-top: none;
border-bottom: none;
}
</pre>

<gallery widths=200px caption="Before and After">
File:borders-for-modules-before.png
File:borders-for-modules-after.png
</gallery>

===To target a specific module===

<pre class="brush:css;">
#builder-module-4d396c72bbb6b {
}
</pre>

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

[[Image:a-specific-module.png|200px|none]]

===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,

<pre class="brush:css;">
.builder-module-1 {
background: transparent;
}
</pre>

To set all sidebars in first module transparent,

<pre class="brush:css;">
.builder-module-1 .builder-module-sidebar {
background: transparent;
}
</pre>

===To set the height of a specific module===

<pre class="brush:css;">
#builder-module-4d396c72bbb6e {
height: 200px;
}
</pre>

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

<gallery widths=200px caption="Before and After">
File:identifying-a-module.png
File:setting-module-height-after.png
</gallery>

===To remove padding around a specific widget===

<pre class="brush:css;">
#text-3 {
padding: 0;
}
</pre>

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

[[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==

===To target all nav bars===

<pre class="brush:css;">
.builder-module-navigation {
}
</pre>

===To target a specific nav bar===

<pre class="brush:css;">
#builder-module-4d396c72bbb6b {
}
</pre>

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

[[Image:a-specific-module.png|200px|none]]

===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;">
.menu-mainmenu-container {
display: table;
margin: 0 auto;
}
</pre>

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

==== 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,

<pre class="brush:css;">
.builder-module-navigation .builder-module-navigation-menu-wrapper {
display: table;
margin: 0 auto;
}
</pre>

==== For all other types of navigation module ====

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

<pre class="brush:css;">
.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

=== 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==

=== How to center image in Image Module ===

Before:

[[File:WordPress Dev Site - before.png|800px|thumb|none]]

After:

[[File:WordPress Dev Site.png|800px|thumb|none]]

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

<pre class="brush:css; gutter: false;">
.builder-module-1 .builder-module-element img {
margin: 0 auto;
}
</pre>

Change 1 in <code>.builder-module-1</code> to the position of your Image module from the top in layout.

==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==

===Targeting the full widget bar===

To target all widget bars:

<pre class="brush:css;">
.builder-module-widget-bar {
}
</pre>

To target a specific widget bar:

<pre class="brush:css;">
#builder-module-4d3956642cc05 {
}
</pre>

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.

[[Image:Specific-widget-bar-module.png|200px|none]]

===Targeting all the individual widgets globally===

To target all individual widgets of all widget bars:

<pre class="brush:css;">
.builder-module-widget-bar .widget {
}
</pre>

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

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget {
}
</pre>

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===

<pre class="brush:css;">
#text-3 {
}
</pre>

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.

[[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===

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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''right widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''middle widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .middle .widget {
}
</pre>

To target any widget in the '''right widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''second widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-2 .widget {
}
</pre>

To target any widget in the '''third widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-3 .widget {
}
</pre>

To target any widget in the '''right most widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

===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:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .left .widget {
}
</pre>

To target any widget in the '''second widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-2 .widget {
}
</pre>

To target any widget in the '''third widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-3 .widget {
}
</pre>

To target any widget in the '''fourth widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .widget-wrapper-4 .widget {
}
</pre>

To target any widget in the '''right most widget''' area:

<pre class="brush:css;">
#builder-module-4d3956642cc05 .right .widget {
}
</pre>

==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===

<gallery widths=200px caption="Before and After">
File:2-adjacent-sidebars-before.png
File:2-adjacent-sidebars-after.png
</gallery>

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

<pre class="brush:css;">
.builder-module-content .widget-outer-wrapper-top, .builder-module-content .widget-outer-wrapper-bottom {
display: none;
}
</pre>

==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==

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 <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===

==== 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'''====

<pre class="brush:css;">
.page-id-2 {
background-color: #333333;
}
</pre>

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

<gallery widths=200px caption="Before and After">
File:page-background-before.png
File:page-background-after.png
</gallery>

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

*Examining the body element using Firebug
[[Image:id-from-firebug.png|200px|none]]
*Placing cursor on the Page/post title in edit screen and observing the number in the browser status bar
[[Image:id-in-status-bar.png|200px|none]]

===='''To set a background color to mutiple pages'''====

<pre class="brush:css;">
.page-id-2, .page-id-4 {
background-color: #333333;
}
</pre>

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>

=== 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!

File:WordPress Dev Site.png

2013-04-29T03:31:35Z

Sridhar:

File:WordPress Dev Site - before.png

2013-04-29T03:30:46Z

Sridhar:

BuilderChild-Air

2013-04-29T03:18:05Z

Sridhar: Created Air page

Builder

2013-04-29T03:15:19Z

Sridhar: /* Child theme specific documentation */

= Introduction to Builder =

We are very glad that you want to know more about or have purchased our blockbuster WordPress design tool, [http://ithemes.com/purchase/builder-theme/ Builder].

Unlike other premium WordPress themes, Builder stretches the possibilities of WordPress — allowing you to quickly and easily build beautiful custom websites and blogs in minutes.

= Installing Builder =

==== [[Installing Builder|How to Install Builder]] ====
* [[Installing Builder#Videos|Videos]]

= Updating Builder =

==== [[Updating Builder|How to Update Builder]] ====

= Using Builder =

==== [[Using Builder#Getting Started|Getting Started]] ====
* [http://ithemes.com/publishing/getting-started-with-builder/ PDF e-book]
==== [[Using Builder#Builder Basics Videos|Builder Basics Videos]] ====
==== [[Using Builder#Builder Settings|Settings]] (video) ====
==== [[Layouts and Views]] ====
* [[Layouts and Views#Layout Manager|Layout Manager]] [[Layouts and Views#Layout Manager#Videos|[Videos]]]
* [[Layouts and Views#Views|Views]] [[Layouts and Views#Layout Manager#Video|[Video]]]
==== [[Builder Extensions|Extensions]] ====
* [[Builder Extensions|Video]]
==== [[Using Builder#Differences between Views, Layouts and Extensions|Differences between Views, Layouts and Extensions]] ====
==== [[Features]] ====
* [[Builder Features#Responsive|Responsive]] [[Builder Features#Videos|[Videos]]]
* [[Builder Features#Widget Content|Widget Content]]
* [[Builder Features#Custom Module Styles|Custom Module Styles]]
* [[Builder Features#Duplicate Sidebar|Duplicate Sidebar]]
* [[Builder Features#IMPORT/EXPORT|IMPORT/EXPORT]]
* and [[Builder Features|more]]
==== [[Builder Frequently Asked Questions|Frequently Asked Questions (FAQ)]] ====
==== [[Builder Blocks]] ====
* [[Restaurant|Builder Restaurant Block]]
* [[Builder Church Block]]
* [[Builder Events Block]]
* [http://ithemes.com/codex/page/BuilderChild-Noise Builder Audio Block] - Note: As Audio Block is designed to be used in conjunction with Noise child theme, we do not have a separate page just for Audio block. The documentation for Noise child theme and Audio block is clubbed together.

==== [[Builder SEO Plugin]] ====

= Customizing Builder =

==== [[Style Manager|Builder Style Manager]] ====
==== [[Builder CSS Guide|CSS Guide]] ====
* [[Builder CSS Guide#Videos|Videos]]

= Extending Builder =

==== Plugin related and other generic customizations in Builder ====
* [[Plugin related and other generic customizations in Builder|Page 1]]
* [[Plugin related and other generic customizations 2|Page 2]]
==== [[Builder Tips and Tricks|Tips and Tricks]] ====
==== [[Builder Hooks|Hooks]] ====

= Builder Child Themes =

==== [[Builder Child Themes|List of child themes]] ====
==== Child theme specific documentation ====
# [[BuilderChild-Acute|Acute]]
## [[BuilderChild-Acute-Blue|Acute Blue]]
# [[BuilderChild-Adept|Adept]]
# [[BuilderChild-Air|Air]]
# [[Americana]]
# [[BuilderChild-Anchor|Anchor]]
# [[BuilderChild-Architect|Architect]]
# [[BuilderChild-Arrival|Arrival]]
# [[BuilderChild-Avail|Avail]]
# [[BuilderChild-Blueprint|Blueprint]]
# [[BuilderChild-Book-Nook|Book Nook]]
# [[BuilderChild-City-Church|City Church]]
# [[BuilderChild-Classen|Classen]]
# [[BuilderChild-Cool-Breeze|Cool Breeze]]
# [[BuilderChild-Covell|Covell]]
# [[BuilderChild-Covert|Covert]]
# [[BuilderChild-Cubed|Cubed]]
# [[BuilderChild-Default|Default]]
# [[BuilderChild-Depot|Depot]]
# [[BuilderChild-Dockside|Dockside]]
# [[BuilderChild-Encased|Encased]]
# [[Entree]]
# [[BuilderChild-Essence|Essence]]
# [[BuilderChild-Expansion|Expansion]]
# [[BuilderChild-Fire|Fire]]
# [[BuilderChild-Foundation|Foundation]]
##[[BuilderChild-Foundation-Blank|Foundation-Blank]]
##[[BuilderChild-Foundation-Glacier|Foundation-Glacier]]
# [[BuilderChild-Gallery-Church|Gallery Church]]
# [[BuilderChild-Heat-Wave|Heat Wave]]
# [[Ionic]]
# [[BuilderChild-Kepler|Kepler]]
# [[BuilderChild-Lucky7|Lucky 7]]
# [[BuilderChild-Market|Market]]
# [[BuilderChild-Noise|Noise]]
# [[BuilderChild-Patterned|Patterned]]
# [[BuilderChild-Rainey-Day|Rainey Day]]
# [[BuilderChild-Remark|Remark]]
# [[BuilderChild-Resume|Resume]]
# [[BuilderChild-Revised|Revised]]
# [[BuilderChild-Scooter|Scooter]]
# [[BuilderChild-Singular|Singular]]
# [[BuilderChild-Thinner|Thinner]]
# [[BuilderChild-Thrifty|Thrifty]]
# [[BuilderChild-Threads|Threads]]
# [[BuilderChild-Traverse|Traverse]]
# [[BuilderChild-Vow|Vow]]
# [[BuilderChild-Yukon|Yukon]]

= Miscelleneous =

==== [[:Category:Builder/Release Notes|Release Notes]] ====
==== [http://ithemes.com/forum/topic/25652-plugins-that-conflict-with-builder/ Plugins that conflict with Builder] ====

Builder

2013-04-28T06:15:42Z

Sridhar: /* Builder Blocks */

= Introduction to Builder =

We are very glad that you want to know more about or have purchased our blockbuster WordPress design tool, [http://ithemes.com/purchase/builder-theme/ Builder].

Unlike other premium WordPress themes, Builder stretches the possibilities of WordPress — allowing you to quickly and easily build beautiful custom websites and blogs in minutes.

= Installing Builder =

==== [[Installing Builder|How to Install Builder]] ====
* [[Installing Builder#Videos|Videos]]

= Updating Builder =

==== [[Updating Builder|How to Update Builder]] ====

= Using Builder =

==== [[Using Builder#Getting Started|Getting Started]] ====
* [http://ithemes.com/publishing/getting-started-with-builder/ PDF e-book]
==== [[Using Builder#Builder Basics Videos|Builder Basics Videos]] ====
==== [[Using Builder#Builder Settings|Settings]] (video) ====
==== [[Layouts and Views]] ====
* [[Layouts and Views#Layout Manager|Layout Manager]] [[Layouts and Views#Layout Manager#Videos|[Videos]]]
* [[Layouts and Views#Views|Views]] [[Layouts and Views#Layout Manager#Video|[Video]]]
==== [[Builder Extensions|Extensions]] ====
* [[Builder Extensions|Video]]
==== [[Using Builder#Differences between Views, Layouts and Extensions|Differences between Views, Layouts and Extensions]] ====
==== [[Features]] ====
* [[Builder Features#Responsive|Responsive]] [[Builder Features#Videos|[Videos]]]
* [[Builder Features#Widget Content|Widget Content]]
* [[Builder Features#Custom Module Styles|Custom Module Styles]]
* [[Builder Features#Duplicate Sidebar|Duplicate Sidebar]]
* [[Builder Features#IMPORT/EXPORT|IMPORT/EXPORT]]
* and [[Builder Features|more]]
==== [[Builder Frequently Asked Questions|Frequently Asked Questions (FAQ)]] ====
==== [[Builder Blocks]] ====
* [[Restaurant|Builder Restaurant Block]]
* [[Builder Church Block]]
* [[Builder Events Block]]
* [http://ithemes.com/codex/page/BuilderChild-Noise Builder Audio Block] - Note: As Audio Block is designed to be used in conjunction with Noise child theme, we do not have a separate page just for Audio block. The documentation for Noise child theme and Audio block is clubbed together.

==== [[Builder SEO Plugin]] ====

= Customizing Builder =

==== [[Style Manager|Builder Style Manager]] ====
==== [[Builder CSS Guide|CSS Guide]] ====
* [[Builder CSS Guide#Videos|Videos]]

= Extending Builder =

==== Plugin related and other generic customizations in Builder ====
* [[Plugin related and other generic customizations in Builder|Page 1]]
* [[Plugin related and other generic customizations 2|Page 2]]
==== [[Builder Tips and Tricks|Tips and Tricks]] ====
==== [[Builder Hooks|Hooks]] ====

= Builder Child Themes =

==== [[Builder Child Themes|List of child themes]] ====
==== Child theme specific documentation ====
# [[BuilderChild-Acute|Acute]]
## [[BuilderChild-Acute-Blue|Acute Blue]]
# [[BuilderChild-Adept|Adept]]
# [[Americana]]
# [[BuilderChild-Anchor|Anchor]]
# [[BuilderChild-Architect|Architect]]
# [[BuilderChild-Arrival|Arrival]]
# [[BuilderChild-Avail|Avail]]
# [[BuilderChild-Blueprint|Blueprint]]
# [[BuilderChild-Book-Nook|Book Nook]]
# [[BuilderChild-City-Church|City Church]]
# [[BuilderChild-Classen|Classen]]
# [[BuilderChild-Cool-Breeze|Cool Breeze]]
# [[BuilderChild-Covell|Covell]]
# [[BuilderChild-Covert|Covert]]
# [[BuilderChild-Cubed|Cubed]]
# [[BuilderChild-Default|Default]]
# [[BuilderChild-Depot|Depot]]
# [[BuilderChild-Dockside|Dockside]]
# [[BuilderChild-Encased|Encased]]
# [[Entree]]
# [[BuilderChild-Essence|Essence]]
# [[BuilderChild-Expansion|Expansion]]
# [[BuilderChild-Fire|Fire]]
# [[BuilderChild-Foundation|Foundation]]
##[[BuilderChild-Foundation-Blank|Foundation-Blank]]
##[[BuilderChild-Foundation-Glacier|Foundation-Glacier]]
# [[BuilderChild-Gallery-Church|Gallery Church]]
# [[BuilderChild-Heat-Wave|Heat Wave]]
# [[Ionic]]
# [[BuilderChild-Kepler|Kepler]]
# [[BuilderChild-Lucky7|Lucky 7]]
# [[BuilderChild-Market|Market]]
# [[BuilderChild-Noise|Noise]]
# [[BuilderChild-Patterned|Patterned]]
# [[BuilderChild-Rainey-Day|Rainey Day]]
# [[BuilderChild-Remark|Remark]]
# [[BuilderChild-Resume|Resume]]
# [[BuilderChild-Revised|Revised]]
# [[BuilderChild-Scooter|Scooter]]
# [[BuilderChild-Singular|Singular]]
# [[BuilderChild-Thinner|Thinner]]
# [[BuilderChild-Thrifty|Thrifty]]
# [[BuilderChild-Threads|Threads]]
# [[BuilderChild-Traverse|Traverse]]
# [[BuilderChild-Vow|Vow]]
# [[BuilderChild-Yukon|Yukon]]

= Miscelleneous =

==== [[:Category:Builder/Release Notes|Release Notes]] ====
==== [http://ithemes.com/forum/topic/25652-plugins-that-conflict-with-builder/ Plugins that conflict with Builder] ====

Builder Extensions

2013-04-25T05:28:53Z

Sridhar: /* Examples of customizing Extensions */ Added == How to add a widgetized sidebar under Magazine extension's content area ==

= Introduction =

An extension extends or overrides the structure and/or style of a child theme. This is done via functions.php (to alter the structure) and style.css (to alter the style). An extension is nothing but a directory which typically has functions.php (optional), style.css plus optionally a corresponding images directory.

By default, Builder ships with 6 extensions which are '''designed to be used for displaying a listing of entries''' like Posts page or a category page or a archive. The default extensions reside in ''extensions'' directory under parent Builder directory. If you would like to make any changes to the extension files, copy the extension directory from parent Builder into child theme under a directory named ''extensions''.

An extension is applied to either a layout or a view.

For the sake of documentation, let us consider this site: http://localhost/builder3/

There is a category in this site named ''Issues'' and the URL of this category page is http://localhost/builder3/category/issues/

Screenshot: http://d.pr/cUJa

The reason why this category page is not using the default layout (''Right Sidebar'' in this example) is because a view is present that associates Archives view with ''Full Width'' layout by default in Builder.

= Video =

{{#ev:vimeo|59948118|640}}

= How to apply (use) an extension =

== Example 1 ==

Scenario:

Front page shows a static page.

Page titled "Blog" is set as Posts page.

The above two can be set in WP dashboard at Settings -> Reading.

'''How to apply "Teasers Layout - left" extension to the Posts page''':

=== Case A ===

You have created a layout named "Blog Layout" to be used for your site's Posts page, i.e., for sitename.com/blog

'''1.''' Go to My Theme -> Layouts & Views -> Views. Add a <code>Blog</code> view to specify that Posts page uses "Blog Layout" layout. More info on this [http://ithemes.com/codex/page/Builder_Frequently_Asked_Questions#Apply_a_layout_to_the_Posts_page here] and [http://ithemes.com/codex/page/Builder_Documentation#Apply_Layouts_to_Specific_Views here].

'''2.''' Edit "Blog Layout", select "Teasers Layout - left" from the Extension dropdown and save the layout.

=== Case B ===

Note: Applying extensions via Views does not work in the recent versions of Builder. This note will be removed when this is fixed.

You do not want to use a separate layout for the Posts page.

Go to My Theme -> Layouts & Views. Add a view as shown in the image below.

[[F 12-46-23.png|494px|thumb|none]]

<u>Note</u>: If the default layout uses an extension, that extension will take precedence over the one created in the above view. In such cases, create a separate layout for the Posts page and use it as explained in Case A above.

= List of extensions that Builder comes with =

== Featured Image Grid & Showcase ==

To apply Featured Image Grid & Showcase extension to ''Issues'' category page, we should add a view like so:

[[File:Extn-1.png]]

Screenshot of the category page on site:

[[File:Featured-image-grid-showcase.png|800px|thumb|none]]

<u>Note</u>:

# The images that appear on the page are featured images added in the posts.
# The output will not show any post that does not have a featured image.

== Featured Image Slider ==

Displays Featured Image & Post Title of first 6 posts in a custom slider and the Featured Image, Post Title & Excerpt for the remaining posts.

[[File:Featured-image-slider-1.png]]

Page Not Found message appears below the slider because there are only 3 posts. If we add 1 more,

[[File:Featured-image-slider-2.png|780px|thumb|none]]

== Magazine Layout ==

[[File:Magaine-extn.png|800px|thumb|none]]

== Portfolio Layout ==

[[File:Portfolio-extn.png|800px|thumb|none]]

== Teasers Layout - Image Left ==

[[File:Teasers-images-left.png|800px|thumb|none]]

== Teasers Layout - Image Right ==

[[File:Teasers-images-right.png|800px|thumb|none]]

= Miscellaneous =

* It is not possible to override the parent or child theme's template files like index.php, archive.php, single.php, page.php. If any such files are present in an extension, they will simply be ignored.
* When an extension has functions.php, it will be executed (for the page using that extension) after the theme's functions.php has been executed.

= Examples of customizing Extensions =

== Styling ContactBuddy ==

http://ithemes.com/styling-contactbuddy-using-ithemes-builder-extensions/

== Showing posts from a category on a separate Page and applying an extension ==

Every category in WordPress by default will have a auto-generated page visible at a URL like http://yoursite.com/category/category-a (where ''category-a'' is the slug for a category titled ''Category A''). We call this category page. It is straight forward to use a extension on this page by going to My Theme -> Layouts and Views, then Views tab, and adding a view to set a layout for our desired category page.

For example,

[[File:Setting-layout-category-page.png]]

applies "Full Width" layout to http://localhost/builder3/category/issues/ (http://localhost/builder3 is just for example, it can very well be www.yoursite.com) and uses Magazine layout for the display of posts.

The result is:

[[File:Magazine-extn-category-page.png|536px|thumb|none]]

Let's say we want to have all posts from ''Issues'' category appear on a Page titled ''Issues List'' and use Magazine extension, follow the steps below. i.e., the objective is to have http://localhost/builder3/issues-list/ appear like the above screenshot.

'''1.''' Copy the extension that you would like to be use from parent directory into child directory

Ex.: from wp-content/themes/Builder/extensions/magazine to wp-content/themes/BuilderChild-Thinner/extensions/magazine

Note: If the child theme directory does not contain ''extensions'' directory, create it.

'''2.'''

'''a.''' Rename the extension.

'''b.''' Edit functions.php to remove the <code>if ( ! is_singular() ) ...</code> limitation. Add query_posts() call just above the loop to restrict the posts from your desired category.

Ex.:

'''a.''' Rename wp-content/themes/BuilderChild-Thinner/extensions/magazine to wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues

Edit wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues/style.css.

Change

<pre class="brush:css;">
Name: Magazine Layout
</pre>

to

<pre class="brush:css;">
Name: Magazine Layout for Issues List Page
</pre>

'''b.''' Edit wp-content/themes/BuilderChild-Thinner/extensions/magazine-issues/functions.php.

Change

<pre class="brush:php;">
// Calling only if not on a singular
if ( ! is_singular() ) {
add_action( 'builder_layout_engine_render', array( &$this, 'change_render_content' ), 0 );
}
</pre>

to

<pre class="brush:php;">
// Calling only if not on a singular
//if ( ! is_singular() ) {
add_action( 'builder_layout_engine_render', array( &$this, 'change_render_content' ), 0 );
//}
</pre>

Add

<pre class="brush:php;">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=18&paged=$paged"); ?> 
</pre>

immediately above

<pre class="brush:php;">
<?php while ( have_posts() ) : // the loop ?>
</pre>

[[File:2012-02-27 12-51-10.png|800px|thumb|none]]

'''3.''' Create a layout and apply the extension from the previous step.

Ex.:

[[File:Step3.png]]

'''4.''' Create a Page in which you would like to have the posts from the specific category appear and set the layout to the one created in above step.

Ex.:

[[File:Step4.png|628px|thumb|none]]

That's it!

If you would like to show posts from another category similarly on another Page, repeat the above process to create a new extension while remembering to specify the category ID and apply it to the Page.

=== Update ===

One extra step has to be done in addition to the above to apply the above method in the case of '''Featured Image Grid & Showcase'''.

Change

<pre class="brush:php;">
global $post, $wp_query;

$args = array(
'ignore_sticky_posts' => true,
'posts_per_page' => 9,
'meta_key' => '_thumbnail_id',
'paged' => get_query_var( 'paged' ),
);

$args = wp_parse_args( $args, $wp_query->query );

query_posts( $args ); // Query only posts with a feature image set.
</pre>

to

<pre class="brush:php;">
global $post/*, $wp_query;

$args = array(
'ignore_sticky_posts' => true,
'posts_per_page' => 9,
'meta_key' => '_thumbnail_id',
'paged' => get_query_var( 'paged' ),
);

$args = wp_parse_args( $args, $wp_query->query );

query_posts( $args );*/ // Query only posts with a feature image set.
</pre>

== Modifying Portfolio extension so that 2 images appear per row rather than 3 ==

Before: [[File:Portfolio-3-images-per-row.png|800px|thumb|none]]

After: [[File:Portfolio-2-images-per-row.png|800px|thumb|none]]

<u>Note</u>:

# The width and height values used in the steps below are to be taken only as an example and are not to be treated absolute. They may have to be changed depending on child theme you are using and the layout width.
# We are going to edit the extension in parent theme directly. When Builder is updated, our custom edits will be erased. Therefore you have to either take a backup of the extension before updating and re-apply the changes or duplicate the extension, place it in child theme while making sure function names are changed.

Child theme: BuilderChild-Acute

Layout width: 980px

'''1.''' Edit wp-content/themes/Builder/extensions/portfolio/lib/image-size.php

Change

<pre class="brush:php;">
add_image_size( 'it-portfolio-thumb', 350, 150, true );
</pre>

to

<pre class="brush:php;">
//add_image_size( 'it-portfolio-thumb', 350, 150, true );
add_image_size( 'it-portfolio-thumb', 450, 193, true );
</pre>

'''2.''' Edit wp-content/themes/Builder/extensions/portfolio/style.css

Change

<pre class="brush:css;">
.portfolio-post-wrap {
display: inline-block;
width: 32.8%;
vertical-align: top;
}
</pre>

to

<pre class="brush:css;">
.portfolio-post-wrap {
display: inline-block;
/* width: 32.8%; */
width: 49%;
vertical-align: top;
}
</pre>

and

<pre class="brush:css;">
.portfolio-post img {
width: 100%;
max-width: 350px;
height: auto;
margin: 0;
}
</pre>

to

<pre class="brush:css;">
.portfolio-post img {
/*width: 100%;
max-width: 350px;*/
max-width: 450px;
height: auto;
margin: 0;
}
</pre>

'''3.''' Refresh the page on the front-end for which Portfolio extension is being applied. If the new sized thumbnails do not appear, install and run [http://wordpress.org/extend/plugins/regenerate-thumbnails/ Regenerate Thumbnails] plugin.

== Displaying archive/category title above the output of Portfolio extension ==

[[File:2012-06-22 10-03-56.png|727px|thumb|none]]

'''1.''' Copy the extension from parent Builder directory into the child theme under extensions directory so that wp-content/themes/''BuilderChild-themename''/extensions/portfolio is present.

'''2.''' Edit wp-content/themes/''BuilderChild-themename''/extensions/portfolio/functions.php.

Above

<pre class="brush:php;">
<div class="loop-content">
</pre>

paste

<pre class="brush:php;">
<div class="loop-header">
<h4 class="loop-title">
<?php
the_post();

if ( is_category() ) { // Category Archive
$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), single_cat_title( '', false ) );
}
else if ( is_tag() ) { // Tag Archive
$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), single_tag_title( '', false ) );
}
else if ( is_tax() ) { // Tag Archive
$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), builder_get_tax_term_title() );
}
else if ( is_day() || is_time() ) { // Day-Specific Archive
$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), get_the_time() );
}
else if ( is_month() ) { // Month-Specific Archive
$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), get_the_time( 'F Y' ) );
}
else if ( is_year() ) { // Year-Specific Archive
$title = sprintf( __( 'Archive for %s', 'it-l10n-Builder' ), get_the_time( 'Y' ) );
}
else if ( is_author() ) { // Author Archive
$title = sprintf( __( 'Author Archive for %s', 'it-l10n-Builder' ), get_the_author() );
}
else if ( function_exists( 'is_post_type_archive' ) && is_post_type_archive() && function_exists( 'post_type_archive_title' ) ) { // Post Type Archive
$title = post_type_archive_title( '', false );
}
else { // Default catchall just in case
$title = __( 'Archive', 'it-l10n-Builder' );
}

if ( is_paged() )
printf( '%s – Page %d', $title, get_query_var( 'paged' ) );
else
echo $title;

rewind_posts();
?>
</h4>
</div>
</pre>

== How to change number of posts when using Featured Image Grid & Showcase extension ==

Copy the extension to your child theme and edit its functions.php.

Ex.: Copy <code>wp-content/themes/Builder/extensions/image-grid</code> to <code>wp-content/themes/BuilderChild-Default/extensions/image-grid</code> (create extensions directory in child theme directory if doesn't exist) and edit <code>wp-content/themes/BuilderChild-Default/extensions/image-grid/functions.php</code>.

Set your desired number of posts in the following line:

<pre class="brush:php;">
'posts_per_page' => 6,
</pre>

== Showing products from a specific WP e-Commerce category in Slider extension ==

[[File:2012-07-24 20-41-37.png|800px|thumb|none]]

When Slider extension is applied to a layout or view and that layout is used in a listing page (Ex.: Posts page, archives), the sliding images will be featured images attached to the blog posts. When you have WP e-Commerce plugin activated and would like to show images attached to products belonging to a specific WPEC category in the Slider, follow this:

Copy the extension to your child theme and edit its functions.php.

Ex.: Copy <code>wp-content/themes/Builder/extensions/slider</code> to <code>wp-content/themes/BuilderChild-Depot/extensions/slider</code> (create extensions directory in child theme directory if doesn't exist) and edit <code>wp-content/themes/BuilderChild-Depot/extensions/slider/functions.php</code>.

Change

<pre class="brush:php;">
$args = array(
'posts_per_page' => 6,
'order' => 'date',
'meta_key' => '_thumbnail_id'
);
</pre>

to

<pre class="brush:php;">
$args = array(
'posts_per_page' => 6,
'order' => 'date',
'meta_key' => '_thumbnail_id',
'post_type' => 'wpsc-product',
'wpsc_product_category' => 'product-category'
);
</pre>

In the above replace <code>product-category</code> with the slug of WP e-Commerce category from which you would like Product Thumbnails to be shown in the slider.

If you would like to know how to replace the standard blog posts that appear below the slider with products added in WP e-Commerce (screenshot below), see [http://ithemes.com/forum/topic/30464-builder-child-depot-change-slider-to-products-category/page__view__findpost__p__141706 this] forum topic.

[[File:My Test Site 2012-07-24 21-26-07.png|344px|thumb|none]]

== Displaying Slideshow at the top of Magazine layout ==

[[File:2012-08-08 10-16-27.png|545px|thumb|none]]

If you would like to display PluginBuddy Slideshow above the posts when using Magazine extension, follow this:

Copy the extension to your child theme and edit its functions.php.

Ex.: Copy <code>wp-content/themes/Builder/extensions/magazine</code> to <code>wp-content/themes/BuilderChild-Expansion-Blue/extensions/magazine</code> (create extensions directory in child theme directory if doesn't exist) and edit <code>wp-content/themes/BuilderChild-Expansion-Blue/extensions/magazine/functions.php</code>.

Above

<pre class="brush:php;">
<?php if ( have_posts() ) : ?>
</pre>

add

<pre class="brush:php;">
<div id="my-slideshow-container"><?php echo do_shortcode('[pb_slideshow group="0"] '); ?></div>
</pre>

In the above replace <code>0</code> with the ID of Slideshow group that you would like to be shown.

The following has been added at the end of child theme's style.css (WP dashboard -> Appearance -> Editor) in this particular example:

<pre class="brush:css;">
#my-slideshow-container {
margin-bottom: 4em;
}

.magazine-post-wrap {
width: 43% !important;
}
</pre>

== How to show Read More below each excerpt when using 'Teasers Layout - Image Left' extension ==

<gallery widths=192px heights=598px>
File:Builder Responsive Test Site 2013-01-25 15-19-06.png|Before
File:Builder Responsive Test Site 2013-01-25 15-19-45.png|After
</gallery>

When 'Teasers Layout - Image Left' extension is applied to a listing page 'Read More' link appears only if the post has more than 60 words. If you would like to show Read More at the bottom of every excerpt regardless of the number of words in the post, follow this:

'''1.''' Copy the extension to your child theme under <code>extensions</code> directory and edit its <code>functions.php</code>.

Ex.: Copy <code>wp-content/themes/Builder/extensions/post-teasers-left</code> to <code>wp-content/themes/BuilderChild-Acute-Purple/extensions/post-teasers-left</code> (create extensions directory in child theme directory, it doesn't exist by default) and edit <code>wp-content/themes/BuilderChild-Acute-Purple/extensions/post-teasers-left/functions.php</code>.

'''2.''' Below

<pre class="brush:php;">
<?php the_excerpt(); ?>
</pre>

paste

<pre class="brush:php;">
<p><a href="<?php the_permalink(); ?>" class="more-link">Read More →</a></p>
</pre>

'''3.''' Change

<pre class="brush:php;">
function excerpt_more( $more ) {
global $post;
return '...<p><a href="'. get_permalink( $post->ID ) . '" class="more-link">Read More→</a></p>';
}
</pre>

to

<pre class="brush:php;">
function excerpt_more( $more ) {
global $post;
return '';
}
</pre>

== How to right align "Read More" box and move it up a bit when using 'Teasers Layout - Image Left' extension ==

In this example, Builder Child Theme - Adept is the active theme.

[[File:Screen Shot 2013-01-27 at 11.59.02 AM.png|774px|thumb|none|Before]]

[[File:Screen Shot 2013-01-27 at 10.18.35 AM.png|795px|thumb|none|After]]

'''1.''' Copy the extension to your child theme under <code>extensions</code> directory and edit its <code>functions.php</code>.

Ex.: Copy <code>wp-content/themes/Builder/extensions/post-teasers-left</code> to <code>wp-content/themes/BuilderChild-Adept/extensions/post-teasers-left</code> (create extensions directory in child theme directory, it doesn't exist by default) and edit <code>wp-content/themes/BuilderChild-Adept/extensions/post-teasers-left/functions.php</code>.

'''2.''' Change

<pre class="brush:php;">
return '...<p><a href="'. get_permalink( $post->ID ) . '" class="more-link">Read More→</a></p>';
</pre>

to

<pre class="brush:php;">
return '...<p class="more-link-para"><a href="'. get_permalink( $post->ID ) . '" class="more-link">Read More→</a></p>';
</pre>

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

<pre class="brush:css;">
.more-link-para {
margin-top: 0;
float: right;
}
</pre>

== How to show comments count below post titles when using Portfolio extension ==

[[File:Builder Responsive Test Site 2013-02-01 20-42-21.png|800px|thumb|none]]

'''1.''' Copy the extension to your child theme under <code>extensions</code> directory (create extensions directory in child theme directory, it doesn't exist by default) and edit its <code>functions.php</code>.

Ex.: Copy <code>wp-content/themes/Builder/extensions/portfolio</code> to <code>wp-content/themes/BuilderChild-Covell/extensions/portfolio</code> and edit <code>wp-content/themes/BuilderChild-Covell/extensions/portfolio/functions.php</code>.

'''2.''' Below

<pre class="brush: php; gutter: false;">
<span class="portfolio-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
</pre>

paste

<pre class="brush: php; gutter: false;">
<?php do_action( 'builder_comments_popup_link', '<div class="entry-meta"><span class="comments">', '</span></div>', __( '%s', 'it-l10n-Builder' ), __( '', 'it-l10n-Builder' ), __( '(1 Comment)', 'it-l10n-Builder' ), __( '(% Comments)', 'it-l10n-Builder' ) ); ?>
</pre>

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

<pre class="brush: css; gutter: false;">
.portfolio-post-wrap .entry-meta {
text-align: center;
}

.portfolio-post-wrap .entry-meta .comments a {
color: #cfab8e;
font-size: 0.9em;
}
</pre>

== How to show a certain number of posts for a particular category page while showing another number of posts for other pages when using Magazine extension ==

See #1 in [http://ithemes.com/forum/topic/37954-patterned-background-image-and-pagination/#entry173712 this] forum post.

== jQuery Masonry Extension for Pinterest-Like Posts Display ==

[http://masonry.desandro.com/ jQuery Masonry] comes included in WordPress core library beginning 3.5.

I (Sridhar) have modified a copy of iThemes Builder's magazine extension into <code>masonry</code> extension with some help from Ronald.

When this extension is applied to a layout and this layout applied to any webpage in the site that has a list of posts, the posts will automatically appear in boxes in a Pinterest-style display. Included in the extension is [http://www.infinite-scroll.com/ Infinite Scroll] jQuery script which automatically loads next set of posts as the user scrolls down.

[[File:2013-02-18 15-50-34.png|407px|thumb|none]]

[[File:2013-02-18 15-55-30.png|407px|thumb|none|Next Page link disappears as the user scrolls down and next set of posts will auto load]]

[http://websitesetuppro.com/ Live Demo] (with few modifications on top of the extension)

'''1.''' Go [https://github.com/srikat/Masonry-Extension here] and click on ZIP button to download the extension. Extract the downloaded zip file and rename the resulting folder to <code>masonry</code>.

'''2.''' Using a FTP client or cPanel file manager, navigate to wp-content/themes and inside your active theme (should ideally be a child theme of Builder).

'''3.''' Create a directory named <code>extensions</code> if one doesn't already exist.

'''4.''' Upload the <code>masonry</code> folder from step 1 into the above <code>extensions</code> folder.

[[File:Screen Shot 2013-02-18 at 4.03.46 PM.png|484px|thumb|none|Example]]

'''5.''' In WordPress dashboard, go to My Theme -> Layouts & Views and edit the layout that is being used for your Posts (blog) page or archive page. If there is currently no such layout, create (either from scratch or by duplicating an existing one) layout(s) that you wish to be applied to your site's Posts (blog) page and/or archives.

From Extension dropdown, select <code>Masonry Layout</code>.

[[File:2013-02-18 16-09-03.png|693px|thumb|none|Example]]

Save the layout.

'''6.''' Now visit the page that uses above layout to see extension in action.

<u>Note</u>:

<pre style="white-space: pre-wrap">
The extension is set to show posts in 3 columns by default in a 960px wide layout.

Therefore you might want to ensure that content module does not have any sidebar.</pre>

<pre style="white-space: pre-wrap">
Also depending on which child theme is being used, only 2 columns might be appearing. This can be fixed by adjusting the width of ".builder-module-content .hentry" as noted in the extension's style.css.
</pre>

<pre style="white-space: pre-wrap">
Width of each post block can be changed in extension's style.css. Note the CSS and comments for ".builder-module-content .hentry"
</pre>

<pre style="white-space: pre-wrap">
This should be considered as unofficial extension and support is not guaranteed.
</pre>

== How to remove date when using Teasers Layout - Image Left extension ==

Before:

[[File:Screen Shot 2013-04-23 at 11.39.26 AM.png|576px|thumb|none]]

After:

[[File:Screen Shot 2013-04-23 at 11.39.00 AM.png|589px|thumb|none]]

'''1.''' Copy the extension to your child theme under <code>extensions</code> directory (create "extensions" directory in child theme directory, it doesn't exist by default) and edit its <code>functions.php</code>.

Ex.: Copy <code>wp-content/themes/Builder/extensions/post-teasers-left</code> to <code>wp-content/themes/BuilderChild-Default/extensions/post-teasers-left</code> and edit <code>wp-content/themes/BuilderChild-Default/extensions/post-teasers-left/functions.php</code>.

'''2.''' Change

<pre class="brush: php; gutter: false;">
<?php printf( __( 'Posted on %s', 'it-l10n-Builder' ), '<span class="the_date">' . get_the_date() . '</span>' ); ?>
</pre>

to

<pre class="brush: php; gutter: false;">
<?php //printf( __( 'Posted on %s', 'it-l10n-Builder' ), '<span class="the_date">' . get_the_date() . '</span>' ); ?>
</pre>

== How to add a widgetized sidebar under Magazine extension's content area ==

If content module does not have a sidebar and if you would like to add a 3-column sidebar below it, it is pretty straight forward to add a widget bar module below the content module.

However, when content module has a sidebar and you would like to add a multiple widget columns below the content area then the following method can be used.

[[File:WordPress Dev Site 2013-04-25 10-46-12.png|425px|thumb|none]]

'''1.''' Add the following in child theme's <code>functions.php</code> before closing PHP tag, if any:

<pre class="brush: php; gutter: false;">
// register our sidebar
add_action('widgets_init', 'register_my_content_sidebar');
function register_my_content_sidebar() {

$sidebar = array(
'id' => 'my_content_sidebar',
'name' => __('Content Sidebar'),
'description' => __( 'This widget section ...' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>'
);

register_sidebar($sidebar);
}
</pre>

'''2.''' Copy the extension from parent Builder directory into the child theme under extensions directory so that (for example,) wp-content/themes/BuilderChild-Default/extensions/magazine is present.

Edit wp-content/themes/BuilderChild-Default/extensions/magazine/functions.php.

Above

<pre class="brush: php; gutter: false;">
<?php else : // do not delete ?>
</pre>

add

<pre class="brush: php; gutter: false;">
<?php // add the sidebar
if ( is_active_sidebar( 'my_content_sidebar' ) ) {
echo '<div class="my-content-sidebar">';
dynamic_sidebar( 'my_content_sidebar' );
echo '</div>';
}
?>
</pre>

[[File:2013-04-25 10-53-10.png|800px|thumb|none]]

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

<pre class="brush: css; gutter: false;">
.my-content-sidebar {
float: left;
padding-left: 1em;
padding-right: 1em;
}

.my-content-sidebar .widget {
width: 32%;
float: left;
overflow: hidden;
margin-right: 1em;
}

.my-content-sidebar .widget:last-child {
margin-right: 0;
}
</pre>

Thanks to Ronald for providing the base code [http://ithemes.com/forum/topic/42546-is-there-a-way-to-put-a-widget-under-the-content-block/#entry188701 here].

File:2013-04-25 10-53-10.png

2013-04-25T05:23:41Z

Sridhar:

File:WordPress Dev Site 2013-04-25 10-46-12.png

2013-04-25T05:17:07Z

Sridhar:

Plugin related and other generic customizations in Builder

2013-04-24T09:44:21Z

Sridhar: /* How to automatically add a sub menu indicator to 1st level menu items in nav bar */

'''This is Page 1 of ''Plugin related and other generic customizations in Builder''. [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2 Here] is Page 2.'''

'''WARNING''': All the entries here are only for the purpose of documenting (mostly) my (Sridhar Katakam's) findings and discoveries of using plugins and doing other customizations in Builder which in general are beyond the scope of our support. As such there is no guaranteed support on implementing the methods listed on this page and other pages (Page 2, Page 3 etc.).

= How to add a wordpress.org style pagination =

<gallery widths=200px caption="Before and After">
File:Custom-pagination-before.png
File:Custom-pagination-after.png
</gallery>

'''1.''' Install and activate [http://wordpress.org/extend/plugins/wp-paginate/installation/ WP-Paginate] plugin. While on the plugins page in WP admin, click on Settings link for the plugin.

Set

a) Pagination Label: ''blank''

b) Previous Page: <code>&laquo; Previous</code>

c) Next Page: <code>Next &raquo;</code>

[[Image:Wp-paginate-settings.png|600px|none]]

Save Changes.

'''2.''' Edit all those theme template files (of Builder child theme that's currently active) in which you would like to replace the default Builder navigation links with your custom ones powered by WP-Paginate plugin.

The main one would be index.php. The others are archive.php, page.php, page_sitemap.php, search.php and single.php. Note: Not all these files might be present in your child theme. If you wish to make changes to a file that is not present in the child theme, then you should copy it from the parent Builder directory into child theme directory and make changes.

Replace

<pre class="brush:php;">

<div class="loop-utility clearfix">
<div class="alignleft"><?php previous_posts_link( __( '« Previous Page', 'it-l10n-Builder' ) ); ?></div>
<div class="alignright"><?php next_posts_link( __( 'Next Page »', 'it-l10n-Builder' ) ); ?></div>
</div>
</pre>

with

<pre class="brush:php;">

<?php if(function_exists('wp_paginate')) {
wp_paginate();
} ?>
</pre>

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

<pre class="brush:css;">
.wp-paginate {
font-family: "Lucida Grande",Verdana,"Bitstream Vera Sans",Arial,sans-serif !important;
}

.wp-paginate a {
background: #FFFFFF !important;
border: 1px solid #ccc !important;
color: #21759B !important;
margin-right: 3px !important;
padding: 2px 4px !important;
font-size: 10px !important;
line-height: 22px !important;
}

.wp-paginate a:hover, .wp-paginate a:active {
color: #D54E21 !important;
}

.wp-paginate .current {
background-color: #328AB2 !important;
border: 1px solid #328AB2 !important;
color: #FFFFFF !important;
font-weight: bold !important;
font-size: 10px !important;
}

.wp-paginate .prev, .wp-paginate .next {
border: none !important;
color: #2583AD !important;
padding: 0 !important;
}

.wp-paginate .next:hover {
border-bottom: 1px solid #D54E21 !important;
}
</pre>

<ins>Note:</ins>

'''1.''' If you would like to display WP-Paginate navigation at the top of Posts page as well, paste

<pre class="brush:php;">

<div class="paging-top clearfix">
<?php if(function_exists('wp_paginate')) {
wp_paginate();
} ?>
</div>
</pre>

immediately above

<pre class="brush:php;">
<?php if ( have_posts() ) : ?>
</pre>

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

<pre class="brush:css;">
.paging-top {
margin-bottom: 1em;
}
</pre>

[http://ithemes.com/forum/topic/36134-issue-with-next-pagnation/#entry166917 Forum topic on using this plugin in Avail child theme.]

= How to hide the display of Sexy Bookmarks in widget content =

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

<pre class="brush:css;">
.widget-content .shr-bookmarks {
display: none !important;
}
</pre>

Forum thread: http://ithemes.com/forum/index.php?/topic/11466-sexy-bookmarks-and-builder/

<u>Update</u>: One of our users reported:

<blockquote>there is extra padding under each widget content area as though it's making room for SB but not displaying it</blockquote>

The solution is to change in Sexy Bookmarks options: "animate-expand multi-lined bookmarks" to NO

Source: http://ithemes.com/forum/index.php?/topic/14363-deleting-social-sharing-icons-from-widget-content-areas/#p66932

'''Update''' (January 18, 2012): [http://ithemes.com/forum/topic/22371-widgets-display-unwanted-related-posts-content/page__view__findpost__p__105841 Here] is our developer's explanation on the cause of this problem. It's not just Sexy Bookmarks, but other plugins like Yet Another Related Posts Plugin also does this.

= Vertical menu with sub menus expanding on mouse hover =

Demo: http://screenr.com/sLb

'''1.''' Install [http://wordpress.org/extend/plugins/pixopoint-menu/ Pixopoint Menu Plugin].

'''2.''' Drag the items (usually Categories or Pages) that you would like to show in the vertical menu at the plugin's settings page under "Main menu items". If none of the menu items children should be visible by default, i.e. the menu should be collapsed initially, expand the item and tick "Single dropdown?".

[[Image:Pixopoint1.png|200px|none]]

'''3.''' Go to Settings tab and disable stylesheet. Enable arrow mark-up.

'''4.''' Install [http://wordpress.org/extend/plugins/php-widgetify/ PHP Widgetify] plugin.

'''5.''' Go to Appearance -> Widgets. Drag the PHP Widgetify widget into widget area where you want the vertical menu to appear and paste the following:

<pre class="brush:php;">
<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} ?>
</pre>

= How to show n number of posts on front page only =

If you would like to have a certain number of posts shown on the front page while keeping the number of posts shown in other views like categories and archives to the number defined for "Blog pages show at most" at Settings -> Reading, follow this:

'''1.''' Make a copy of child theme's index.php as name it as home.php. If the child theme does not contain index.php, copy it from parent Builder directory.

'''2.''' Edit home.php

Add

<pre class="brush:php;">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("posts_per_page=3&paged=$paged"); ?>
</pre>

[This code is set to show 3 posts (the most recent ones). Change the value of ''posts_per_page'' from 3 to the number of your choice]

above

<pre class="brush:php;">
<?php if ( have_posts() ) : ?>
</pre>

= How to show posts from a specific category on front page only =

If you would like to restrict posts from a specific category on the front page while not affecting the posts shown in other views like categories and archives, follow this:

'''1.''' Make a copy of child theme's index.php as name it as home.php. If the child theme does not contain index.php, copy it from parent Builder directory.

'''2.''' Edit home.php

Add

<pre class="brush:php;">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=3&paged=$paged"); ?>
</pre>

[This code is set to show all posts from category 3. Change the value of ''cat'' from 3 to ID of your desired category]

above

<pre class="brush:php;">
<?php if ( have_posts() ) : ?>
</pre>

= How to show posts from certain category on a separate Page =

The instructions below outline how to have all posts from a category named ''Movies'' (ID = 92 ) on a Page titled ''Movies Page'' (slug = ''movies-page'').

'''1.''' Ensure that [http://codex.wordpress.org/Using_Permalinks pretty permalinks] are enabled. Create a Page titled ''Movies Page''. Do not enter any content in the Page. Just enter the title and publish.

'''2.''' Create a copy of '''index.php''' present in your child theme directory and rename it as page-''movies-page''.php. If index.php is not present in the child theme, copy it from parent Builder directory. page-movies-page.php is the custom template which will automatically be used for display of the Page titled ''Movies Page'' ([http://codex.wordpress.org/File:Template_Hierarchy.png Reference]).

'''3.''' Edit page-movies-page.php.

Add

<pre class="brush:php;">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=92&paged=$paged"); ?>
<?php // set $more to 0 in order to only get the first part of the post
global $more;
$more = 0; ?>
</pre>

[This code is set to show all posts from category 92. Change the value of ''cat'' from 92 to ID of your desired category]

above

<pre class="brush:php;">
<?php while ( have_posts() ) : // The Loop ?>

</pre>

'''Update'''

If you would like to just show linked post titles on the Page, follow this:

[[File:Linked-post-titles.png|800px|thumb|none]]

Edit page-movies-page.php.

Delete

<pre class="brush:php;">

<div class="entry-content clearfix">
<?php the_content(); ?>
</div>
</pre>

Change

<pre class="brush:php;">
<h1 class="entry-title"><?php the_title(); ?></h1>
</pre>

to

<pre class="brush:php;">
<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
</pre>

= Builder and Gravity Forms =

To ensure that Gravity Forms plugin's styling gets applied in Builder (or any other WordPress theme), ensure that "Output CSS" is set to Yes in the plugin's settings.

Source: http://ithemes.com/forum/index.php?/topic/12965-builder-gravity-forms-css-conflict-for-validation-messages/

= How to let visitors control font size =

There's a plugin called WP-chgFontSize which does not seem to be supported any more. It allows users to dynamically change the font size. Unfortunately it does not seem to work in our testing (see [http://ithemes.com/forum/index.php?/topic/12873-text-resizing-recommendation/ this]).

A working alternative is using the method provided [http://www.niss.fr/custos/gestion-de-la-taille-de-police/ here].

[[Image:Font-size.png|800px|none]]

Follow these steps (Note: tested only on Default child theme)

'''1.''' Paste [http://d.pr/c41T this] code in a text file and save it as textsize.js. Upload this file to "js" directory (create one, if it doesn't exist) under the child theme.

'''2.''' Add the following before closing PHP tag in child theme's functions.php:

<pre class="brush:php;">
function my_theme_scripts() {

if ( !is_admin() ) { // instruction to only load if it is not the admin area
// register your script location, dependencies and version

wp_register_script('custom_script',
get_bloginfo('stylesheet_directory') . '/js/textsize.js');
// enqueue the script
wp_enqueue_script('custom_script');
}
}

add_action('init', 'my_theme_scripts');
</pre>

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

<pre class="brush:css;">
#textsize {
opacity: 0.4;
float: right;
margin-right: 0;
margin-top: 3px;
padding: 0;
width: 155px;
}

#textsize:hover {
opacity: 1;
}

#textsize a {
text-decoration: none;
}
</pre>

'''4.''' Paste the following HTML wherever (for example: in a text widget or HTML module's text area) you want it to appear on the site:

<pre class="brush:html;">
<p id="textsize">
Font size: <a href="index.php" onclick="changeFontSize(1);return false;" title="Increase font size">A+</a> <a href="index.php" onclick="changeFontSize(-1);return false;" title="Decrease font size">A-</a> <a href="index.php" onclick="resetFontSize(); return false;" title="Default font size">A</a>
</pre>

= How to add a string of text at the top of Posts page? =

[[Image:Blog-page-title.png|800px|none]]

Edit the PHP file that's being used by the Posts page. This is usually child theme's index.php. If the layout used by the Posts page has an extension applied, it could be functions.php or index.php inside the extension's directory.

Add the following immediately above <code><?php if ( have_posts() ) : ?></code>

<pre class="brush:php;">
<?php if(is_home()) { ?>
<div class="blog-title">This is my blog page</div>
<?php } ?>
</pre>

then add the following at the end of your theme's style.css (as an example):

<pre class="brush:css;">
.blog-title {
font-family: 'Yanone Kaffeesatz', 'Trebuchet MS', arial, sans-serif;
clear: both;
color: #2C445E;
font-weight: normal;
font-size: 2.3em;
line-height: 1em;
text-shadow: 1px 2px 0px #CDCA71;
margin-bottom: 1em;
text-align: center;
}
</pre>

Update: This can also be done using hooks. See [http://ithemes.com/forum/topic/29810-what-is-a-right-builder-hook-to-place-script-before-a-content-module/ this forum] post for an example.

=How to add category nicenames in body class=

[[Image:Category-body-class.png|800px|none]]

In Builder (and in many other themes) by default the body class of a single post page does not contain the categories under which the post has been categorized.

If you would like to apply a specific background to all single post pages that belong to say, "Recipes" category then by using the following code "recipes" will be one of the classes that gets applied to body class. Therefore we can target any element on a single post page belonging to "Recipes" category by prepending the CSS selector with "body.recipes".

Add the following before closing PHP tag in child theme's functions.php:

<pre class="brush:php;">
// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}

add_filter('body_class', 'category_id_class');
</pre>

Source: http://codex.wordpress.org/Function_Reference/body_class#Adding_More_Classes

Note: In Builder, category/categories are present for post class by default.

=How to delete comment author link in Builder=

Before: [[Image:Comment-author-link-before-2.png]]

After: [[Image:Comment-author-link-after.png]]

'''1.''' Copy comments.php from parent Builder theme directory into the child theme directory. Edit this file.

Replace

<pre class="brush:php;">
<?php wp_list_comments(); ?>
</pre>

with

<pre class="brush:php;">
<?php wp_list_comments( array( 'callback' => 'builder_comment' ) ); ?>
</pre>

'''2.''' Edit child theme's functions.php. If the child theme does not have functions.php, create a new file having opening and closing PHP tags, name it as functions.php and upload it to child theme directory.

Add the following before closing PHP tag:

<pre class="brush:php;">
if ( ! function_exists( 'builder_comment' ) ) :
/**
* Template for comments and pingbacks.
*
* Used as a callback by wp_list_comments() for displaying the comments. *
*
*/
function builder_comment( $comment, $args, $depth ) {
$GLOBALS['comment'] = $comment;
switch ( $comment->comment_type ) :
case '' :
?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
<div id="comment-<?php comment_ID(); ?>">
<div class="comment-author vcard">
<?php echo get_avatar( $comment, 32 ); ?>
<?php printf( __( '%s <span class="says">says:</span>', 'builder' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author() ) ); ?>
</div>
<?php if ( $comment->comment_approved == '0' ) : ?>
<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'builder' ); ?></em>
<br />
<?php endif; ?>

<div class="comment-meta commentmetadata"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
<?php
/* translators: 1: date, 2: time */
printf( __( '%1$s at %2$s', 'builder' ), get_comment_date(), get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)', 'builder' ), ' ' );
?>
</div>

<div class="comment-body"><?php comment_text(); ?></div>

<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div>
</div>

<?php
break;
case 'pingback' :
case 'trackback' :
?>
<li class="post pingback">
<p><?php _e( 'Pingback:', 'builder' ); ?> <?php comment_author(); ?><?php edit_comment_link( __( '(Edit)', 'builder' ), ' ' ); ?></p>
<?php
break;
endswitch;
}
endif;
</pre>

Source: Twenty Ten theme

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

<pre class="brush:css;">
li.comment p {
margin-bottom: 1.5em;
}
</pre>

= How to make a div always stick to the bottom of screen =

The steps below outline how [http://ryanfait.com/sticky-footer/ this] method can be applied in Builder to have a div always stick to the bottom of screen.

[[Image:Sticky-footer.png|800px|none]]

'''1.''' Add the following before closing PHP tag in your child theme's functions.php:

<pre class="brush:php;">
add_action('builder_finish', 'add_custom_footer', 0 );
function add_custom_footer() { ?>

<div class="footer">
<p>Copyright © 2011</p>
</div>

<?php }
</pre>

Replace <pre class="brush:html;"><p>Copyright © 2011</p></pre> with HTML/PHP code to show whatever you want to display in the ''sticky footer''.

'''2.''' Edit your site's layout(s) and add a new HTML module at the end (as the last layout). Paste the following in module's text area:

<pre class="brush:html;">
<div class="push"></div>
</pre>

Set "Remove Wrapper DIVs" to Yes.

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

<pre class="brush:css;">
/* To make a div always stick to the bottom of screen */

* {
margin: 0;
}

html, body {
height: 100%;
}

.builder-container-outer-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}

.footer, .push {
height: 142px;
}

.footer {
background: url("http://ryanfait.com/sticky-footer/footer.jpg") no-repeat 0 0;
margin: 0 auto;
position: relative;
width: 700px;
}

.footer p {
margin-top: 0;
margin-bottom: 0;
}
</pre>

Change background and width of .footer in the above to your desired values.

= How to show comment form and comments list on Posts page =

<gallery widths=200px caption="Before and After">
File:Show-comments-in-index-before.png
File:Show-comments-in-index-after.png
</gallery>

'''1.''' Edit your child theme's index.php. If it is not present, copy index.php from parent Builder directory into the child theme directory and edit it.

'''2.''' Replace

<pre class="brush:php;">
<?php comments_template(); // include comments template ?>
</pre>

with

<pre class="brush:php;">
<?php global $withcomments; $withcomments = true; comments_template(); // include comments template ?>
</pre>

'''3.''' [Optional] Delete the lines that display text similar to "Comments (0)". These would be:

<pre class="brush:php;">
<?php do_action( 'builder_comments_popup_link', '<span class="meta-comments">· ', '</span>', __( 'Comments %s', 'it-l10n-Builder' ), __( '(0)', 'it-l10n-Builder' ), __( '(1)', 'it-l10n-Builder' ), __( '(%)', 'it-l10n-Builder' ) ); ?>
</pre>

and

<pre class="brush:php;">
<?php do_action( 'builder_comments_popup_link', '<div class="alignright"><span class="comments">', '</span></div>', __( 'Comments %s', 'it-l10n-Builder' ), __( '(0)', 'it-l10n-Builder' ), __( '(1)', 'it-l10n-Builder' ), __( '(%)', 'it-l10n-Builder' ) ); ?>
</pre>

[http://wordpress.org/support/topic/showing-comments-on-homepage-with-withcomments-not-working-for-me?replies=3#post-2069599 Source].

= How to place banner/google ad on top of Rotating Images =

'''Screenshot'''

[[Image:Ad-on-top-of-rotating-images.png|800px|none]]

'''Steps'''

'''1.''' Add a widget bar module having widget width of 100% in layout.

[[File:RI-wbm.png]]

Save the module's settings.

'''2.''' Below that add a HTML module with your ad code wrapped in <pre class="brush:html;"><div id="google-ad"></pre> and <pre class="brush:html;"></div></pre>.

Ex.:

<pre class="brush:html;">
<div id="google-ad"><script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
</pre>

WARNING: It might be against Google's TOS to place ads on top of static image/rotating images. Please get this clarified before you proceed further with the rest of this article if you are planning to use Google's ads.

Set Remove Wrapper DIVs to Yes.

[[Image:Mms-html-module-ad.png|600px|none]]

Save the module's settings.

Save the layout.

'''3.''' At Appearance -> Widgets, drag Rotating Images widget into the widget area of widget bar module added in step 1.

[[File:Dragging-widget-into-widgetarea.png]]

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

<pre class="brush:css;">
.builder-module-1 .widget, .builder-module-1 .builder-module-sidebar {
padding: 0;
}

#google-ad {
position: absolute;
right: 0;
top: 50px;
margin-right: 1em;
}

.builder-container {
position: relative;
}
</pre>

Note: Change "1" in .builder-module-1 to the position of widget bar module in which Rotating Images has been placed.

= How to create a widget bar section having more than 5 sidebars =

See http://ithemes.com/forum/index.php?/topic/12248-ionic-green-add-and-extra-widget-to-5-multi-widget/#p57377

= How to add hover effects for images like in Ionic =

Visit [http://demos.ithemes.com/ionic/ Ionic demo site] to observe the hover effect.

'''1.''' Add the following before closing PHP tag in child theme's [http://ithemes.com/codex/page/Builder_Frequently_Asked_Questions#Where_is_functions.php.3F functions.php]:

<pre class="brush:php;">
wp_enqueue_script( 'jquery' );
</pre>

'''2.''' Go to My Theme -> Settings.

Click on Analytics and JavaScript Code.

Paste the following in the text area under ''List any JavaScript or other code to be manually inserted in the site's footer just above the </body> tag in the input below.'':

<pre class="brush:html;">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("img").hover(
function () {
jQuery(this).stop().fadeTo("fast", 0.7);
},
function () {
jQuery(this).stop().fadeTo("fast", 1);
}
);
});
</script>
</pre>

Save Settings.

'''Update on May 29, 2012'''

[http://ithemes.com/forum/topic/28164-image-flicker-on-hover/page__view__findpost__p__130337 An alternative CSS3 solution (forum topic)]

= How to show excerpt of a Page with title and its featured image in a widget =

[[Image:2011-06-26 08-37-59.png|800px|none]]

While it is possible to use [http://justintadlock.com/archives/2009/03/15/query-posts-widget-wordpress-plugin Query Posts Widget] plugin, it will not give us complete control like the code method below.

'''1.''' Install and activate [http://wordpress.org/extend/plugins/php-widgetify/ PHP Widgetify] plugin.

'''2.''' Go to Appearance -> Widgets. Drag a PHP Widgetify widget into the widget area. Paste the following:

<pre class="brush:php;">
<?php if ( have_posts() ) : ?>
<?php query_posts( 'pagename=why-custom-framing' ); ?>
<?php while ( have_posts() ) : // The Loop ?>
<?php the_post(); ?>
<div class="widget-post">
<?php /*the_author_posts_link();*/ ?>
<?php /*the_time(__('l, F j, Y', 'Builder'));*/ ?>

<h4 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>

<?php if (has_post_thumbnail()) { ?>
<div class="widget-thumbnail">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'widget-thumbnail' ); ?></a>
</div>
<?php } ?>


<div class="post-content">
<?php the_excerpt(); ?>
</div>
</div>

<?php endwhile; // end of one post ?>

<?php else : // do not delete ?>
<?php do_action( 'builder_template_show_not_found' ); ?>
<?php endif; // do not delete ?>
</pre>

In the above, ''why-custom-framing'' is the slug of the Page whose excerpt should be displayed in the widget.

[[File:Php-widget-show-page.png]]

Reference: http://codex.wordpress.org/Class_Reference/WP_Query#Post_.26_Page_Parameters

'''3.''' Add the following before closing PHP tag in child theme's functions.php:

<pre class="brush:php;">
add_image_size('widget-thumbnail', 100, 100, true);
</pre>

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

<pre class="brush:css;">
.widget .widget-thumbnail {
float: left;
margin-right: 1em;
}

.widget .post-content {
clear: none;
}
</pre>

= How to add 'Leave a Comment' link to the left of Comments(#) in Posts page =

<u>Screenshot</u>:

[[File:Leave-a-comment.png]]

<gallery widths=200px caption="Before and After">
File:Adding-leave-a-comment-before.png
File:Adding-leave-a-comment-after.png
</gallery>

<u>Steps</u>:

'''1.''' Edit child theme's index.php.

Change

<pre class="brush:php;">

<?php do_action( 'builder_comments_popup_link', '<div class="alignright"><span class="comments">', '</span></div>', __( 'Comments %s', 'it-l10n-Builder' ), __( '(0)', 'it-l10n-Builder' ), __( '(1)', 'it-l10n-Builder' ), __( '(%)', 'it-l10n-Builder' ) ); ?>
</pre>

to

<pre class="brush:php;">
<?php do_action( 'builder_comments_popup_link', '<div class="my-alignright"><span class="my-comments">', '</span></div>', __( 'Comments %s', 'it-l10n-Builder' ), __( '(0)', 'it-l10n-Builder' ), __( '(1)', 'it-l10n-Builder' ), __( '(%)', 'it-l10n-Builder' ) ); ?>
<div class="alignright"><a href="<?php the_permalink() ?>#respond">Leave a Comment</a>  </div>
</pre>

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

<pre class="brush:css;">
.meta-bottom .my-alignright {
margin: 0 0 1.5em 0.5em;
float: right;
text-align: right;
}
</pre>

= How to stop Builder internal code from appearing in page source code =

[[Image:Builder-code-in-source.png|560px|none]]

If code similar to above appears when you view the source of your Builder site, edit child theme's functions.php and remove this line:

<pre class="brush:php;">
echo "\n";
</pre>

= How to link the content of a widget to a URL =

Wrap the content of widget with <pre class="brush:html;"><div onclick="location.href='http://target-url.com/'" style="cursor:pointer;"></pre> and <pre class="brush:html;"></div></pre>

[http://ithemes.com/forum/index.php?/topic/14974-make-background-image-linkable/#p70171 Example].

= How to automatically add a sub menu indicator to 1st level menu items in nav bar =

'''Update on Wednesday, April 24, 2013''': [http://buildersnippets.com/how-to-automatically-add-sub-menu-indicators-for-menu-items/ Here] is the latest method.

-------------

Before: [[File:Jquery-submenuindicator-before.png]]

After: [[File:Jquery-submenuindicator-after.png]]

== jQuery Method ==

Note: This method works for all 4 types of navigation modules (Builder Settings Pages, Builder Settings Categories, WordPress Pages, Custom Menu).

'''1.''' If child theme's functions.php already does not have the following, add it before closing PHP tag:

<pre class="brush:php;">
wp_enqueue_script( 'jquery' );
</pre>

'''2.''' Go to My Theme -> Settings, click on 'Analytics and JavaScript Code'. Paste the following in the text area under 'List any JavaScript or other code to be manually inserted in the site's footer just above the </body> tag in the input below.':

<pre class="brush:html;">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".builder-module-navigation li:has(ul)").addClass("arrow");
});
</script>
</pre>

Note: If you would like this to work only for a specific navigation module, replace ".builder-module-navigation" with # followed by module's ID like so:

<pre class="brush:html;">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#builder-module-4e12b7145bfa8 li:has(ul)").addClass("arrow");
});
</script>
</pre>

Scroll down the page and save settings.

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

<pre class="brush:css;">
.builder-module-navigation li.arrow {
background: url("http://k.min.us/ibDuJC.gif") no-repeat center right;
}
</pre>

Note: You might want to specify the URL of your desired sub menu indicator image in the above.

== PHP Method ==

Note: This method does not work in a navigation module. It only works when wp_nav_menu() is used like in a HTML module or a PHP widget.

'''1.''' Add the following before closing PHP tag in your child theme's [http://ithemes.com/codex/page/Builder_Frequently_Asked_Questions#Where_is_functions.php.3F functions.php]:

<pre class="brush:php;">
class Arrow_Walker_Nav_Menu extends Walker_Nav_Menu {
function display_element($element, &$children_elements, $max_depth, $depth=0, $args, &$output) {
$id_field = $this->db_fields['id'];
if (!empty($children_elements[$element->$id_field])) {
$element->classes[] = 'arrow'; //enter any classname you like here!
}
Walker_Nav_Menu::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
}
</pre>

'''2.''' Edit your layout, add a HTML module, paste the following code and enable PHP:

<pre class="brush:php;">
<?php wp_nav_menu( array('walker' => new Arrow_Walker_Nav_Menu, 'menu' => 'Main Menu', 'menu_class' => 'builder-module-navigation') ); ?>
</pre>

Change 'Main Menu' in the above to the name of your custom menu.

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

'''a.'''

<pre class="brush:css;">
.meta-bottom .my-alignright {
margin: 0 0 1.5em 0.5em;
float: right;
text-align: right;
}
</pre>

'''b.'''

[Optional - tested in HeatWave child theme] Also add the following:

<pre class="brush:css;">
.builder-module-1 .builder-module-navigation {
height: 30px;
margin-left: 0;
border-left: none !important;
border-right: none !important;
}
</pre>

Change '1' in '.builder-module-1' in the above to the position of HTML module in the layout from top.

== Meta ==

Source: http://stackoverflow.com/questions/3558198/php-wordpress-add-arrows-to-parent-menus

Forum topics:

# http://ithemes.com/forum/index.php?/topic/9881-submenu-indicator/
# http://ithemes.com/forum/index.php?/topic/15843-arrow-on-menu-to-indicate-more-items/

= How to add Register and Log in links at the top of your Builder site =

[[File:Register-login.png|800px|thumb|none|Highlighted links will change to Site Admin and Log out for admins]]

'''1.''' Edit your child theme's functions.php.

Add the following at the end (before closing PHP tag, if present):

<pre class="brush:php;">
add_action('builder_layout_engine_render_container', 'add_custom_header', 0 );

function add_custom_header() { ?>
<div id="my_custom_header">
<ul id="headerlinks">
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
</ul>
</div>
<?php }
</pre>

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

<pre class="brush:css;">
#headerlinks li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

#my_custom_header {
width: 960px;
margin: 0 auto;
position: relative;
}

#headerlinks {
float: right;
position: absolute;
right: 0;
}
</pre>

'''3.''' At Settings -> General, place a tick mark in "Membership: Anyone can register" box.

'''If you would like to show the links in a 100% wide horizontal bar at the top of site,'''

[[File:Register-login-fluid.png|800px|thumb|none|So you want a login bar, ha?]]

use this PHP:

<pre class="brush:php;">
add_action('builder_layout_engine_render_container', 'add_custom_header', 0 );

function add_custom_header() { ?>
<div id="my_custom_header_wrapper">
<div id="my_custom_header">
<ul id="headerlinks">
<?php wp_register(); ?>
<li class="last"><?php wp_loginout(); ?></li>
</ul>
</div>
</div>
<?php }
</pre>

and this CSS:

<pre class="brush:css;">
#headerlinks li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

#my_custom_header_wrapper {
background: #DDDDDD;
height: 30px;
}

#my_custom_header {
width: 960px;
margin: 0 auto;
position: relative;
}

#headerlinks {
float: right;
position: absolute;
right: 0;
margin-top: 4px;
}

li.last {
padding-right: 0 !important;
}
</pre>

= jQuery Mega Menu in Builder =

[http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drop-down-mega-menu-widget/ jQuery Drop Down Mega Menu Widget plugin] will allow you to quickly and easily create drop down mega menus from any WordPress custom menu. It has [http://www.designchemical.com/lab/demo-wordpress-jquery-mega-menu-plugin/ 8 built-in skins] (styles).

For the purpose of this tutorial, let's add a 1-column widget bar module in our layout. Next go to Appearance -> Widgets and drag a jQuery Mega Menu widget into the widget area.

[[File:JQueryMegaMenu-widget.png]]

When we check the site (having BuilderChild-Default as the active theme), the sub menus will not appear by default.

[[File:Jmm-menu-before.png|800px|thumb|none]]

and depending on the child theme being used, there could be padding around the widget.

[[File:Jmm-firebug1.png|800px|thumb|none]]

To remove unwanted spacing around widget, the following has been added at the end of child theme's style.css:

<pre class="brush:css;">
#dc_jqmegamenu_widget-3 {
padding: 0; /* To remove the padding around widget - needed only in some child themes */
}

#builder-module-4e2cfbc65ee6f .builder-module-sidebar {
padding-top: 0; /* To remove the top padding for the sidebar - needed only in some child themes */
padding-bottom: 0; /* To remove the bottom padding for the sidebar - needed only in some child themes */
}

</pre>

To make the submenus appear, we need to:

# Set position of the widget as absolute and specify its width.
# Set the height for one of widget's parent div.

So the final CSS would be:

<pre class="brush:css;">
#dc_jqmegamenu_widget-3 {
padding: 0; /* To remove the padding around widget - needed only in some child themes */
position: absolute;
width: 1000px; /* Set this to width of layout in the case of 1-column widget bar module or whatever is the width of sidebar in which this widget is present */
}

#builder-module-4e2cfbc65ee6f .builder-module-sidebar {
padding-top: 0; /* To remove the top padding for the sidebar - needed only in some child themes */
padding-bottom: 0; /* To remove the bottom padding for the sidebar - needed only in some child themes */
height: 40px; /* This value can be obtained by going to Computed tab in Firebug when this div is selected. See Screenshot A below. */
}
</pre>

In the above the ID of widget and layout must be changed to those on your site.

[[File:Jmm-menu-after.png|800px|thumb|none|Screenshot showing fully working jQuery Mega Menu in Builder]]

Screenshot A:

[[File:Jmm-firebug2.png|800px|thumb|none]]

That's it!

<u>Note</u>: Instead of setting position of widget as absolute, we can set absolute position for either #menu-menu-1 or #dc_jqmegamenu_widget-3-item above it or #dc_jqmegamenu_widget-3. Remember to set the height for the chosen element's parent.

[[File:Jmm-firebug3.png|800px|thumb|none]]

This principle also applies when using similar dropdown menu plugins like Pixopoint. See # 4 at http://ithemes.com/forum/index.php?/topic/10927-help-with-custom-navigation/#p52256

= How to add social media icons floating at top right =

[[File:Adding-social-icons-site1.png|800px|thumb|none]]

[[File:Adding-social-icons-site2.png|800px|thumb|none]]

<u>Note</u>:

* The icons will appear through out the site. It is not possible to restrict them to certain layouts when using this method.
* Please upload the png images to your own server and use them.

'''1.''' Edit your child theme's [http://ithemes.com/codex/page/Builder_Frequently_Asked_Questions#Where_is_functions.php.3F functions.php].

Add the following at the end (before closing PHP tag, if present):

<pre class="brush:php;">
add_action('builder_layout_engine_render_container', 'add_social_icons', 0 );

function add_social_icons() { ?>
<div class="socialmedia-buttons-container">
<div class="socialmedia-buttons">
<a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="http://ithemes.com/builder/misc/social-media-icons/32/facebook.png"></a>

<a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="http://ithemes.com/builder/misc/social-media-icons/32/twitter.png"></a>

<a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="Follow Us on RSS" alt="Follow Us on RSS" src="http://ithemes.com/builder/misc/social-media-icons/32/rss.png"></a>

<a target="_blank" rel="nofollow" href="mailto: admin@yoursite.com"><img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="E-mail Us" alt="E-mail Us" src="http://ithemes.com/builder/misc/social-media-icons/32/email.png"></a>
</div>
</div>
<?php }
</pre>

[[File:Adding-social-icons-editor.png|800px|thumb|none]]

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

<pre class="brush:css;">
/* Custom Styles For The Social Media Widget Icons */

.socialmedia-buttons-container {
width: 960px;
margin: 0 auto;
position: relative;
}

.socialmedia-buttons {
float: right;
position: absolute;
right: 0;
}

.socialmedia-buttons img {
border: 0;
/*border: 0 !important;*/
margin-right: 10px !important;
display: inline;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease;
}

.socialmedia-buttons a {
background: none !important;
}

.socialmedia-buttons a:hover {
text-decoration: none;
border: 0;
}
.socialmedia-buttons img.fade:hover {
opacity: 1 !important;
-moz-opacity: 1 !important;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease;
}
</pre>

Source: http://wordpress.org/extend/plugins/social-media-widget/

///**********************************************************///

'''This is Page 1 of ''Plugin related and other generic customizations in Builder''. [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2 Here] is Page 2.'''