Builder Alternate Custom Module Styles: Introduction

From iThemes Codex
Jump to: navigation, search


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:


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


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.


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


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:


More Examples: Links


See also

← Back to Builder Codex Home