Builder Alternate Custom Module Styles: Introduction

From IThemes Codex
Revision as of 16:48, July 24, 2013 by Kristen (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Contents

Introduction

Builder provides the ability to select an Alternate Module Style for a Module when the Module is being added/edited in Layout Editor. The name of Alternate Module Style and corresponding CSS class are defined in child theme's functions.php.

Custom Alternate Module Styles are present by default in many Builder child themes, but they can also be easily added to other Builder child themes.

Example: Custom Image Alternate Module Style

Objective: To make a Custom Alternate Module Style for a specific Image Module so that the module's wrapper (which is full-width by default in Builder Child Theme Americana) gets a blue background that matches the image background.


Step 1: Edit the functions.php file

Edit the child theme's functions.php file with a new builder_register_module_style function in the following format:


Custom-module-style-functions-file.png


For this example, this line of code was added:

builder_register_module_style( 'image', 'Blue Background (full width)', 'image-blue');


Rendering the following update to the functions.php file:

if ( ! function_exists( 'it_builder_loaded' ) ) {
	function it_builder_loaded() {
		builder_register_module_style( 'widget-bar', 'Blue (full width)', 'widget-bar-blue' );
		builder_register_module_style( 'navigation', 'Subnav Blue', 'subnav-blue' );
		builder_register_module_style( 'html', 'Blue Background', 'html-blue' );
		builder_register_module_style( 'footer', 'White Footer', 'footer-white');
		builder_register_module_style( 'image', 'Blue Background (full width)', 'image-blue');
	}
	add_action( 'it_libraries_loaded', 'it_builder_loaded' );
}


Step 2: Edit the child theme's style.css file


Custom-module-style-stylesheet.png


Now, edit the child theme's style.css file with styles for the new Custom Alternate Module Style using the corresponding CSS class.


/*********************************************
	Alternate: Blue background (full width)
*********************************************/
.image-blue-outer-wrapper {
	background: #1e3240;
}


Note: It is important to note the difference in the class name: .image-blue-outer-wrapper, not just .image-blue.


Step 3: Edit the Layout with the Custom Alternate Module Style

When editing the Layout, edit the Image Module and apply the style named "Blue Background (full width)." Saving the module and finally the Layout.


Custom-module-style-dropdown.png


Before & After

The screenshot below shows how the site appears before we added a Custom Module Style to the Image Module (at top in the layout):


Custom-module-style1-before.png


The screenshot below shows how the site looks after our Custom Alternate Module Style has been applied to the Image Module, adding a full-width blue background color:


Custom-module-style1-after.png



More Examples: Links

  1. http://ithemes.com/forum/index.php?/topic/9420-americana-theme-how-do-i-get-away-from-fixed-width-layout/#p44290
  2. http://ithemes.com/forum/index.php?/topic/10030-modification-to-americana-theme/#p47025
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox