BuilderChild-Yukon

From IThemes Codex
Revision as of 22:22, October 6, 2012 by Sridhar (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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.

2012-03-15 08-20-50.png

Live Demo

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 Alternate Module Styles.

Example:

Before

My Test Site 2012-10-07 09-38-58.png

After

My Test Site 2012-10-07 09-38-15.png

Add the following at the end of child theme's functions.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' );
}

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

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

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

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox