BuilderChild-Lucky7

From IThemes Codex
Revision as of 00:06, June 23, 2011 by Sridhar (Talk | contribs)
Jump to: navigation, search

Live Demo

Contents

Layouts and settings of demo site export file

To download a zip file containing Layouts and Settings of Lucky 7 demo site, click here.

To import these, go to My Theme -> Settings -> Import / Export and proceed.

How to change the colors of modules

Edit your site layout(s), edit the module(s) you would like to change the color of and choose your desired color from Style dropdown.

Screenshots below show this being applied for image module:

How to edit/add custom module styles in Lucky 7

Edit theme's lib/classes.php file.

For a detailed example, refer to this entry.

How to add a pink custom module style for widget bar modules

1. Edit child theme's lib/classes.php.

Add


		builder_register_module_style( 'widget-bar', 'Pink', 'widget-bar-pink' );

below

		builder_register_module_style( 'widget-bar', 'Purple', 'widget-bar-purple' );

2. Edit child theme's style.css.

Add

/* pink */
.widget-bar-pink-outer-wrapper {
	background: #FFB1B8;
}
.widget-bar-pink {
	text-shadow: #000000 0 1px 1px;
	color: #FFFFFF;
}
.widget-bar-pink .builder-module-block {
	background-color: #FFFFFF;
	color: #444444;
	text-shadow: none;
 	border-color: #BBBBBB #DDDDDD #DDDDDD #BBBBBB;
}
.widget-bar-pink h4.widget-title {
	color: #431213;
	border-color: #C76A67;
	text-shadow: #FFDEDA 0px 1px 1px;

}
.widget-bar-pink-outer-wrapper a {
	color: #D9E0FF;
}
.widget-bar-pink-outer-wrapper a:hover {
	color: #FFFFFF;
	text-shadow: none;
}

above

/*********************************************
Footer Module
*********************************************/

3. Edit the layout(s), edit widget bar module(s) for which you would like to apply pink background and select Pink from the Style dropdown.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox