BuilderChild-Heat-Wave - Revision history

Sridhar at 09:07, March 23, 2012

2012-03-23T09:07:54Z

Sridhar: Added = Demo site layouts & views export file =

2012-03-23T09:06:59Z

Added = Demo site layouts & views export file =

Sridhar: Added = How to have a floating side navigation like the one in Encased =

2011-06-17T06:27:00Z

Added = How to have a floating side navigation like the one in Encased =

Sridhar: Added = How to have a floating side navigation like the one in Encased =

2011-06-17T06:25:36Z

Added = How to have a floating side navigation like the one in Encased =

New page

= How to have a floating side navigation like the one in Encased =

[[Image:Heat-wave-side-navigation.png|800px|none]]

'''1.''' Edit Heat Wave's functions.php.

Change

<pre class="brush:php;">
// Adds classes to modules
if ( ! function_exists( 'it_builder_loaded' ) ) {
function it_builder_loaded() {

builder_register_module_style( 'navigation', 'Alternate', 'nav-alternate' );
builder_register_module_style( 'widget-bar', 'Alternate', 'widget-bar-alternate' );
builder_register_module_style( 'content', 'Widget Alternate', 'widget-bar-alternate' );

}
add_action( 'it_libraries_loaded', 'it_builder_loaded' );
}
</pre>

to

<pre class="brush:php;">
// Adds classes to modules
if ( ! function_exists( 'it_builder_loaded' ) ) {
function it_builder_loaded() {

builder_register_module_style( 'navigation', 'Alternate', 'nav-alternate' );
builder_register_module_style( 'navigation', 'Fixed - Left', 'nav-fx-left' );
builder_register_module_style( 'widget-bar', 'Alternate', 'widget-bar-alternate' );
builder_register_module_style( 'content', 'Widget Alternate', 'widget-bar-alternate' );

}
add_action( 'it_libraries_loaded', 'it_builder_loaded' );
}
</pre>

'''2.''' Edit Heat Wave's style.css.

Add the following below existing navigation module's styles:

<pre class="brush:css;">
/* fixed navigation menu floating left */
.nav-fx-left-outer-wrapper .builder-module-block {
position: fixed;
top: 100px;
left: 0;
}
.nav-fx-left-outer-wrapper .builder-module-block ul.menu {
width: 120px;
text-align: center;
background-color: #222222;
border-width: 2px 2px 2px 0;
border-style: solid;
border-color: #444444;
-webkit-border-radius: 0px 6px 6px 0px;
-khtml-border-radius: 0px 6px 6px 0px;
-moz-border-radius: 0px 6px 6px 0px;
-o-border-radius: 0px 6px 6px 0px;
border-radius: 0px 6px 6px 0px;
-webkit-box-shadow: #000000 2px 0px 4px;
-moz-box-shadow: #000000 2px 0px 4px;
-o-box-shadow: #000000 2px 0px 4px;
-khtml-box-shadow: #000000 2px 0px 4px;
box-shadow: #000000 2px 0px 4px;
}
.nav-fx-left-outer-wrapper .builder-module-block ul.menu > li > a {
width: 108px;
border-bottom: 1px solid #333333;
padding-left: 5px;
padding-right: 5px;
font-weight: normal;
}
.nav-fx-left-outer-wrapper .builder-module-block ul.menu > li > a:hover {
background: #444444;
text-shadow: none;
color: #F0EDBE;
}
.nav-fx-left-outer-wrapper .builder-module-block ul.menu > li:last-child > a {
border-bottom: none;
}
.nav-fx-left-outer-wrapper ul li {
float: none;
display: block;
}
.nav-fx-left-outer-wrapper ul.menu > li > ul {
margin-left: 120px;
margin-top: -34px;
-webkit-border-radius: 0px 6px 6px 6px;
-khtml-border-radius: 0px 6px 6px 6px;
-moz-border-radius: 0px 6px 6px 6px;
-o-border-radius: 0px 6px 6px 6px;
border-radius: 0px 6px 6px 6px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
-khtml-box-shadow: none;
box-shadow: none;
}
.nav-fx-left-outer-wrapper ul.menu > li > ul li {
background: transparent;
}
.nav-fx-left-outer-wrapper ul.menu > li > ul li:first-child,.nav-fx-left-outer-wrapper ul.menu > li > ul li:first-child a {
-webkit-border-radius: 0px 6px 0px 0px;
-khtml-border-radius: 0px 6px 0px 0px;
-moz-border-radius: 0px 6px 0px 0px;
-o-border-radius: 0px 6px 0px 0px;
border-radius: 0px 6px 0px 0px;
}

.nav-fx-left-outer-wrapper .builder-module-navigation ul.menu li.current_page_item a,
.nav-fx-left-outer-wrapper .builder-module-navigation ul.menu li.current-cat a {
background: transparent;
}

.nav-fx-left-outer-wrapper ul.menu > li > ul li a {
background-color: #444444;
background-image: none;
color: #F0EDBE;
font-weight: normal;
}

.nav-fx-left-outer-wrapper ul.menu > li > ul li a:hover {
color: #A06026;
text-shadow: none;
font-weight: normal;
background: #222222;
}
</pre>

'''3.''' At Appearance -> Menus, create a custom menu having the items that should appear in the fixed left navigation.

'''4.''' Edit the layout(s) in which fixed left navigation is to appear, edit the navigation module that has the menu and select "Fixed - Left" style.

@@ Line 1: / Line 1: @@
 = Demo site layouts & views export file =
-Click [http://demos.ithemes.com/heat-wave/files/builder-export-data/export-4dece66bd60dd7.99330412/builder-export-builderchild-export.zip here] to download Heat Wave demo site's layouts & views. To import this, go to My Theme -> Settings -> Import / Export.
+Click [http://demos.ithemes.com/heat-wave/files/builder-export-data/export-4dece66bd60dd7.99330412/builder-export-builderchild-export.zip here] to download Heat Wave [http://demos.ithemes.com/heat-wave/ demo site]'s layouts & views. To import this, go to My Theme -> Settings -> Import / Export.
 = How to have a floating side navigation like the one in Encased =

← Older revision		Revision as of 09:06, March 23, 2012
Line 1:		Line 1:
		+	= Demo site layouts & views export file =
		+
		+	Click [http://demos.ithemes.com/heat-wave/files/builder-export-data/export-4dece66bd60dd7.99330412/builder-export-builderchild-export.zip here] to download Heat Wave demo site's layouts & views. To import this, go to My Theme -> Settings -> Import / Export.
		+
	= How to have a floating side navigation like the one in Encased =		= How to have a floating side navigation like the one in Encased =

← Older revision		Revision as of 06:27, June 17, 2011
Line 134:		Line 134:

	'''4.''' Edit the layout(s) in which fixed left navigation is to appear, edit the navigation module that has the menu and select "Fixed - Left" style.		'''4.''' Edit the layout(s) in which fixed left navigation is to appear, edit the navigation module that has the menu and select "Fixed - Left" style.
		+
		+	= Item 2 =
		+
		+	= Item 3 =
		+
		+	= Item 4 =