BuilderChild-Market

Intro

Like Depot, Market features integration with three different WordPress eCommerce plugins: Shopp, Cart66 and WP-Ecommerce.

With simple lines, cool colors, and bold contrast styling for widget areas, Market is the perfect store-front for your WordPress eCommerce site.

Live Demo

Blog entry announcing the release of Market

How to style navigation in a HTML module

It is possible to display a custom menu in a PHP enabled navigation module using the following code:

<?php wp_nav_menu( array( 'menu' => 'Main Menu', 'menu_class' => 'builder-module-navigation') ); ?>

where Main Menu is the name of custom menu.

In Market doing this will result in (for example)

To style this nav bar so it looks like the one in a navigation module, add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

/*********************************************
	Navigation in HTML Module
*********************************************/
.builder-module-1-outer-wrapper {
	position: relative;
	overflow: visible !important;
}
.builder-module-1 .builder-module-element {
	display: block;
	overflow: hidden;

	background: #ffffff;
	background: -webkit-gradient(radial, 50% 50%,200,50% 50%,20, from(#f4f4f4), to(#ffffff));
	background: -webkit-radial-gradient(50% 50%, #ffffff, #f4f4f4);
	background: -moz-radial-gradient(50% 50%, #ffffff, #f4f4f4);
	background: -o-radial-gradient(50% 50%, #ffffff, #f4f4f4);
	background: -ms-radial-gradient(50% 50%, #ffffff, #f4f4f4);
	background: radial-gradient(50% 50%, #ffffff, #f4f4f4);
	border-width: 1px;
	border-style: solid;
	border-color: #DCDCDC;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;
	font-size: 1em;
	line-height: 2;
	-webkit-box-shadow: #DDDDDD 1px 1px 2px;
	-moz-box-shadow: #DDDDDD 1px 1px 2px;
	box-shadow: #DDDDDD 1px 1px 2px;
}
ul.builder-module-navigation {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}
.builder-module-navigation li {
	padding: 0;
}
ul.builder-module-navigation > li {
	border-right: 1px solid #DCDCDC;
}
ul.builder-module-navigation li > a {
	text-transform: uppercase;
	color: #909090;
	font-size: 1.1em;
	padding: .6em 1em;
	text-decoration: none;
}
ul.builder-module-navigation > li > a {
	border-right: 1px solid #FFF;
}
ul.builder-module-navigation li a:hover,
ul.builder-module-navigation li.current_page_item > a,
ul.builder-module-navigation li.current-cat > a {
	background-color: #4e96ab;
	background-image: -webkit-gradient(radial, 50% 50%,200,50% 50%,20, from(#498c9f), to(#4e96ab));
	background-image: -webkit-radial-gradient(50% 50%, #4e96ab, #498c9f);
	background-image: -moz-radial-gradient(50% 50%, #4e96ab, #498c9f);
	background-image: -o-radial-gradient(50% 50%, #4e96ab, #498c9f);
	background-image: -ms-radial-gradient(50% 50%, #4e96ab, #498c9f);
	background-image: radial-gradient(50% 50%, #4e96ab, #498c9f);
	color: #FFFFFF;
}
.builder-module-navigation li.current_page_item a,
.builder-module-navigation li.current-cat a,
.builder-module-navigation li.current-menu-item a {
}

/* second level stuff */

ul.builder-module-navigation li li a {
	float: none;
	color: #FFFFFF;
}

In the above remember to change the number "1" in .builder-module-1-outer-wrapper and .builder-module-1 .builder-module-element to the position of your HTML module from the top of the layout.

This will result in