Closet

From IThemes Codex
Jump to: navigation, search

This is a place for information from wiki that is old or is no longer applicable.

DO NOT USE/FOLLOW THE METHODS/INSTRUCTIONS IN THIS PAGE

From http://ithemes.com/codex/page/Builder_Tips_and_Tricks#How_to_have_full_width_.28100.25_wide_background.29_modules

Contents

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

Intro

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.

GUID.png

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

  • The following has been added to child theme's style.css to see the effect of module going full width:
#builder-module-4d14470049da5 {
	background-color: yellow;
}
  • 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:

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

To make specific multiple modules full width

Please read the 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.

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

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

By Module IDs

  • The following has been added to child theme's style.css to see the effect of module going full width:
#builder-module-4d14470049da5, #builder-module-4d14470049da7 {
	background-color: yellow;
}
  • 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:

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

To make all Image modules full width

Please read the Intro.

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:

.builder-module-image {
	background-color: yellow;
}

Code in functions.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 );

To make all Navigation modules full width

Please read the Intro.

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

To make Content module full width

Please read the Intro.

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

.builder-module-content {
	background-color: yellow;
}

Code in functions.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 );

To make all HTML modules full width

Please read the Intro.

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:

.builder-module-html {
	background-color: yellow;
}

Code in functions.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 );

To make all Widget Bar modules full width

Please read the Intro.

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

.builder-module-widget-bar {
	background-color: yellow;
}

Code in functions.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 );

To make Footer module full width

Please read the Intro.

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

.builder-module-footer {
	background-color: yellow;
}

Code in functions.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 );

To make all modules full width

Please read the Intro.

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

Before -> After

Code in functions.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;
}

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

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

If you would like to apply different styles to different modules of the same type when using this method, use 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:

  1. Register the new module style using builder_register_module_style() function
  2. 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 Example 1, Example 2 and Example 3.


How to show WP-Property's Single Property View inside Builder's content module

From http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2

When using WP-Property plugin for Property and Real Estate Management with a active Builder child theme, a modified property.php should be placed in child theme directory for the single property entry to appear within the content module.

Before
After

The steps below are for Foundation - Blank 2.0.2 and may need to be tweaked slightly for other child themes.

1. Place a copy of wp-content/plugins/wp-property/templates/property.php in wp-content/themes/BuilderChild-Foundation-Blank

2. Wrap property.php in Builder's render_content(). Observe single.php.

Here is the customized property.php.

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

.clearfix { display: block !important; }
.property_content .clearfix { display: inline-block !important; }

Note:

1. To display a listing of all property entries, place this shortcode in HTML view in any Page:

[property_overview]

2. If you would like to set a view for single property entries, it can be done at My Theme -> Layouts & Views -> Views.

Post-type-properties-view.png

How to replace left metabox having author, posting date, categories, comments with text

From http://ithemes.com/codex/page/BuilderChild-Classen

1. Edit theme's index.php, single.php and archive.php.

Add

						<div class="post-meta">
							<?php printf( __( 'By %s', 'it-l10n-BuilderChild-Classen' ), '<span class="meta-author">' . builder_get_author_link() . '</span>' ); ?>
							<?php do_action( 'builder_comments_popup_link', '<span class="meta-comments">· ', '</span>', __( 'Comments %s', 'it-l10n-BuilderChild-Classen' ), __( '(0)', 'it-l10n-BuilderChild-Classen' ), __( '(1)', 'it-l10n-BuilderChild-Classen' ), __( '(%)', 'it-l10n-BuilderChild-Classen' ) ); ?>
						</div>
							
						<div class="date">
							<span class="weekday"><?php the_time( 'l' ); ?><span class="weekday-comma">,</span></span>
							<span class="month"><?php the_time( 'F' ); ?></span>
							<span class="day"><?php the_time( 'j' ); ?><span class="day-suffix"><?php the_time( 'S' ); ?></span><span class="day-comma">,</span></span>
							<span class="year"><?php the_time( 'Y' ); ?></span>
						</div>

below

<div class="post-title">
							<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
						</div>

in each file.

2. Add

<div class="meta-bottom clearfix">
							<span class="categories"><?php printf( __( 'Categories: %s', 'it-l10n-BuilderChild-Classen' ), get_the_category_list( '<br /> ' ) ); ?></span>
						</div>

below

<div class="post-content">
							<?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-Classen' ) ); ?>
						</div>

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

.leftmetabox { 
    display: none; 
}

.post .post-meta, .date {
	letter-spacing: normal;
	font-size: 1em;
	color: #9ca071;
	margin-top: 10px;
}

.post .post-meta a {
    color: #537A8A;
}

.meta-bottom .categories {
    color: #9CA071;
}


Favicon

From http://ithemes.com/codex/page/Builder_Frequently_Asked_Questions#How_to_add_a_custom_favicon

2. Edit child theme's header.php. If it is not present in your theme, copy it from the parent Builder directory.

Change

<?php if ( file_exists( get_stylesheet_directory() . '/images/favicon.ico' ) ) : ?>
	<link rel="icon" type="image/x-icon" href="<?php bloginfo( 'stylesheet_directory' ); ?>/images/favicon.ico" />
<?php elseif ( file_exists( get_template_directory() . '/images/favicon.ico' ) ) : ?>
	<link rel="icon" type="image/x-icon" href="<?php bloginfo( 'template_directory' ); ?>/images/favicon.ico" />
<?php endif; ?>

to

<?php if ( file_exists( get_stylesheet_directory() . '/images/favicon.ico' ) ) : ?>
	<link rel="Shortcut Icon" type="image/x-icon" href="<?php bloginfo( 'stylesheet_directory' ); ?>/images/favicon.ico" />
<?php elseif ( file_exists( get_template_directory() . '/images/favicon.ico' ) ) : ?>
	<link rel="Shortcut Icon" type="image/x-icon" href="<?php bloginfo( 'template_directory' ); ?>/images/favicon.ico" />
<?php endif; ?>

Thanks to Keith.


My Theme -> Settings

From http://ithemes.com/codex/index.php?title=Builder_Documentation

Go to My Theme -> Settings.

Menu Builder: There are two types of horizontal navigation bars that can be shown on your site. One is Pages navigation and the other is Categories Navigation. In this Menu Builder section you can select the pages and categories that should appear as menu items in the corresponding navigation bars.

Note: The pages selected in this section will be used only if Builder Settings Pages is selected in the settings of Navigation module of the layout. This is the default setting.

Social Media Tabs: This section is theme specific and as of today appears only if you use Astro child theme. You can fill in the URLs to profiles of your social media sites like Twitter and Facebook. These appear as icons in the right side of the site.

Screenshot showing how social media buttons appear on the site

Identify Widget Areas: Leave this setting to Yes. Once your entire site is set up, you may want to come back to this and set it to No.

Tracking Code: If you use Google Analytics or any other similar service, certain tracking code will be provided by those services which should be put in your site's footer. You can paste that code in this field.

Search Engine Optimization: Even though it is specified as recommended for Would You like to use post tags as META keywords on single posts?, it is suggested for now that you set this to No and instead use a SEO plugin like All in one SEO plugin. It gives a better control of SEO not only at the site level but also at individual posts and pages level.

You might want to leave the setting, Would you like your category archives to be indexed by search engines? to the default No.

Click on Save Options button.

Borders for widgets show in the preview window but not on the site

From http://ithemes.com/codex/page/Style_Manager

Left and right borders should be manually added via CSS.

Example: Adding the following at the end of child theme's style.css will set left and right borders for a widget whose ID is "text-5". This shows how to get ID of a widget.

#text-5 {
    border-left: 1px solid #B3B3B3;
    border-right: 1px solid #B3B3B3;
}

Arriving at height and width of widgets

From http://ithemes.com/codex/page/Builder_CSS_Guide

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

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

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

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

Example:

Consider the following site.

True-dimension-1.png

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

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

True-dimension-2.png

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

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

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

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

True-dimension-4.png

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

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

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

In our example, that would be:

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

True-dimension-5.png

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

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

which makes it look good.

True-dimension-6.png

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

Why are multiple CSS files being created? Which is the main one?

From http://ithemes.com/codex/page/Style_Manager

Only the last .css file is needed and used. The others can be deleted.

Ex.: If you see the following file listing in wp-content/uploads:

builder-style-4c574af0c3875.css

builder-style-4c574af0c38751.css

builder-style-4c574af0c38752.css

builder-style-4c574af0c38753.css

builder-style-4c574af0c38754.css

builder-style-4c574af0c38755.css

Only builder-style-4c574af0c38755.css is used (note the bold characters). The first one in the list was the original one that was created. The additional ones were created since the file already existed. The code adds one to the end of the file, tries again, and then increments the number until an original file name is created, thus the pattern.

Originally this was done to bypass a WordPress MU (now MultiSite) issue. The bug was that the old one was not removed. This is no longer necessary, so a future version of Style Manager will remove this undesired behavior while also automatically cleaning up after itself.

Source: http://ithemes.com/forum/index.php?/topic/13023-issues-with-style-sheets-and-footer-module/#p60867

Use a 100% width background for one or more modules

From http://ithemes.com/codex/page/Builder_Tips_and_Tricks

  • Why: You have a design that requires that one or more modules have a background wider than the layout width.
  • How: Using just CSS, the width of the container and the modules can be expanded to 100%; however, it will be difficult to style specific modules this way. The solution is to first remove the width limitation of both the layout container and each module's outer wrapper and then add a new div that constrains the module content to a specific width and centers it again.

Add the following function to your child theme's functions.php.

<?php

function custom_remove_container_width( $fields ) { 
    foreach ( (array) $fields['style'] as $index => $rule ) { 
        if ( preg_match( '/^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 ) {
    /* add module specific rules here */
    
    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 );

?>

Note that the '<?php' and '?>' lines only needed to be used if the code is added inside of existing '<?php' and '?>' tags.

The following screenshot shows Builder Child Default after this code was added to a new functions.php file.

Builder-tip-full-width-module-backgrounds.png

The "add module specific rules here" comment in the custom_remove_module_width function above marks an area that could be used to limit the full-width background to specific modules. For example, the following modification of the custom_remove_module_width function results in only the Navigation modules getting full-width module backgrounds.

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

To use full-width backgrounds on all modules other than Content and Image modules, use the following modification.

function custom_remove_module_width( $fields ) { 
    if ( in_array( $fields['module'], array( 'content', 'image' ) ) ) 
        return $fields;
    
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}

If a specific module is the one to get the full-width background, the module's GUID can be used to test for the right module.

function custom_remove_module_width( $fields ) { 
    if ( '4bc3c9b3bbf52' !== $fields['guid'] )
        return $fields;
    
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox