BuilderChild-Market
(Created page and added intro and == How to style navigation in a HTML module ==) |
(Added == Layouts and settings of demo site export file ==) |
||
Line 111: | Line 111: | ||
[[File:Screen Shot 2012-09-16 at 9.45.10 AM.png|800px|thumb|none]] | [[File:Screen Shot 2012-09-16 at 9.45.10 AM.png|800px|thumb|none]] | ||
− | == | + | == Layouts and settings of demo site export file == |
+ | |||
+ | To download a zip file containing Layouts and Settings of [http://demos.ithemes.com/market/ Market demo site], click [http://demos.ithemes.com/market-shopp/files/builder-export-data/export-50a06da4677353.06195017/builder-export-market.zip here]. | ||
+ | |||
+ | To import these, go to My Theme -> Settings -> Import / Export and proceed. | ||
== Entry 4 == | == Entry 4 == |
Latest revision as of 22:32, November 11, 2012
Contents |
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.
Blog entry announcing the release of Market
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
Layouts and settings of demo site export file
To download a zip file containing Layouts and Settings of Market demo site, click here.
To import these, go to My Theme -> Settings -> Import / Export and proceed.