Sridhar: Added == Layouts and settings of demo site export file ==

2012-11-12T03:32:36Z

Added == Layouts and settings of demo site export file ==

Sridhar: Created page and added intro and == How to style navigation in a HTML module ==

2012-09-16T04:20:39Z

Created page and added intro and == How to style navigation in a HTML module ==

New page

== 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.

[[File:Market 2012-02-05 09-34-05.png|541px|none]]

[http://demos.ithemes.com/market/ Live Demo]

[http://ithemes.com/2012/02/02/just-released-market-an-ecommerce-child-theme-for-builder/ 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:

<pre class="brush:php;"><?php wp_nav_menu( array( 'menu' => 'Main Menu', 'menu_class' => 'builder-module-navigation') ); ?></pre>

where <code>Main Menu</code> is the name of custom menu.

In Market doing this will result in (for example)

[[File:Screen Shot 2012-09-16 at 9.41.26 AM.png|800px|thumb|none]]

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):

<pre class="brush:css;">
/*********************************************
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;
}
</pre>

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

This will result in

[[File:Screen Shot 2012-09-16 at 9.45.10 AM.png|800px|thumb|none]]

== Entry 3 ==

== Entry 4 ==

@@ Line 111: / Line 111: @@
 [[File:Screen Shot 2012-09-16 at 9.45.10 AM.png|800px|thumb|none]]
-== Entry 3 ==
+== Layouts and settings of demo site export file ==
 == Entry 4 ==

BuilderChild-Market - Revision history

Sridhar: Added == Layouts and settings of demo site export file ==

Sridhar: Created page and added intro and == How to style navigation in a HTML module ==