BuilderChild-Lucky7

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
m (Layouts and settings of demo site export file)
m
 
(One intermediate revision by one user not shown)
Line 1: Line 1:
[http://demos.ithemesbuilder.com/lucky7/ Live Demo]
+
[http://demos.ithemes.com/lucky7/ Live Demo]
  
 
= Layouts and settings of demo site export file =
 
= Layouts and settings of demo site export file =
Line 24: Line 24:
  
 
For a detailed example, refer to [http://ithemes.com/codex/page/Builder_Features#Custom_Module_Styles this] entry.
 
For a detailed example, refer to [http://ithemes.com/codex/page/Builder_Features#Custom_Module_Styles this] entry.
 +
 +
= How to add a pink custom module style for widget bar modules =
 +
 +
<gallery widths=200px caption="Before and After">
 +
File:Pink-module-style-before.png
 +
File:Pink-module-style-after.png
 +
</gallery>
 +
 +
'''1.''' Edit child theme's lib/classes.php.
 +
 +
Add
 +
 +
<pre class="brush:php;">
 +
 +
builder_register_module_style( 'widget-bar', 'Pink', 'widget-bar-pink' );
 +
</pre>
 +
 +
below
 +
 +
<pre class="brush:php;">
 +
builder_register_module_style( 'widget-bar', 'Purple', 'widget-bar-purple' );
 +
</pre>
 +
 +
'''2.''' Edit child theme's style.css.
 +
 +
Add
 +
 +
<pre class="brush: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;
 +
}
 +
</pre>
 +
 +
above
 +
 +
<pre class="brush:css;">
 +
/*********************************************
 +
Footer Module
 +
*********************************************/
 +
</pre>
 +
 +
'''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.

Latest revision as of 01:17, November 6, 2012

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