BuilderChild-Heat-Wave

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Added = How to have a floating side navigation like the one in Encased =)
 
(One intermediate revision by one user not shown)
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 [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 =
 
= How to have a floating side navigation like the one in Encased =
  

Latest revision as of 04:07, March 23, 2012

Contents

Demo site layouts & views export file

Click 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

Heat-wave-side-navigation.png

1. Edit Heat Wave's functions.php.

Change

// 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' );
}

to

// 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' );
}

2. Edit Heat Wave's style.css.

Add the following below existing navigation module's styles:

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

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.

Item 2

Item 3

Item 4

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox