From iThemes Codex
Revision as of 05:06, 23 June 2011 by Sridhar (talk | contribs) (Added = How to add a pink custom module style for widget bar modules =)
Jump to: navigation, search

Live Demo

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.


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


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

2. Edit child theme's style.css.


/* 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;


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.