Sridhar at 04:23, October 7, 2012

2012-10-07T04:23:22Z

Sridhar: Created page, added intro and = Changing Header module's background gradient color =

2012-10-07T04:22:35Z

Created page, added intro and = Changing Header module's background gradient color =

New page

= Intro =

Yukon is iThemes first Builder child theme for BuddyPress.

Yukon styles BuddyPress features for member profiles, network activity/updates, groups, and forums to create the perfect BuddyPress + Builder social networking site.

[[File:2012-03-15 08-20-50.png|800px|none]]

[http://demos.ithemes.com/buddypress/yukon/ Live Demo]

[http://ithemes.com/2012/03/14/our-first-builder-child-theme-for-buddypress-yukon/ Blog entry announcing the release of Yukon]

= Changing Header module's background gradient color =

Color choice options are not present in Yukon, Builder child theme out of the box. However they can be added to any module using [http://ithemes.com/codex/page/Builder_Features#Custom_Module_Styles Alternate Module Styles].

Example:

<u>Before</u>

[[File:My Test Site 2012-10-07 09-38-58.png|800px|none]]

<u>After</u>

[[File:My Test Site 2012-10-07 09-38-15.png|800px|none]]

Add the following at the end of child theme's functions.php:

<pre class="brush:php;">
// =========================================
// = Red Style =
// =========================================

if ( ! function_exists( 'it_builder_loaded' ) ) {
function it_builder_loaded() {
builder_register_module_style( 'header', 'Red', 'header-red' );
}
add_action( 'it_libraries_loaded', 'it_builder_loaded' );
}
</pre>

then add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

<pre class="brush:css;">
/*********************************************
Red Style
*********************************************/

.header-red-outer-wrapper {
background-color: #cc1414;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(204, 20, 20)), to(rgb(129, 13, 13)));
background-image: -webkit-linear-gradient(top, rgb(204, 20, 20), rgb(129, 13, 13));
background-image: -moz-linear-gradient(top, rgb(204, 20, 20), rgb(129, 13, 13));
background-image: -o-linear-gradient(top, rgb(204, 20, 20), rgb(129, 13, 13));
background-image: -ms-linear-gradient(top, rgb(204, 20, 20), rgb(129, 13, 13));
background-image: linear-gradient(top, rgb(204, 20, 20), rgb(129, 13, 13));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#cc1414', EndColorStr='#810d0d');
border-top: 1px solid #d43737;
border-bottom: 1px solid #6d0b0b;
}
</pre>

Now when Header module is edited, a "Style" dropdown option will become available from which "Red" can be selected.

← Older revision		Revision as of 04:23, October 7, 2012
Line 62:		Line 62:

	Now when Header module is edited, a "Style" dropdown option will become available from which "Red" can be selected.		Now when Header module is edited, a "Style" dropdown option will become available from which "Red" can be selected.
		+
		+	= Item 3 =
		+
		+	= Item 4 =

BuilderChild-Yukon - Revision history

Sridhar at 04:23, October 7, 2012

Sridhar: Created page, added intro and = Changing Header module's background gradient color =