BuilderChild-Depot - Revision history

Sridhar: /* How to style and set up UberMenu in Depot */

2013-02-28T15:15:09Z

How to style and set up UberMenu in Depot

Sridhar: Added = How to style and set up UberMenu in Depot =

2013-02-28T15:12:01Z

Added = How to style and set up UberMenu in Depot =

Sridhar: Added = How to remove space around Image Module =

2013-01-30T02:28:01Z

Added = How to remove space around Image Module =

Sridhar: Added = How to add a SKU column in Checkout page =

2012-07-30T04:48:16Z

Added = How to add a SKU column in Checkout page =

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

2012-04-23T08:55:37Z

Added = Demo site layouts & views export file =

Sridhar: Added == How to display SKU on single product pages == under = Depot & WP Ecommerce =

2012-03-28T08:39:53Z

Added == How to display SKU on single product pages == under = Depot & WP Ecommerce =

Sridhar: Added = How to get search in Image module to look like that in Header or HTML module =

2012-01-05T16:16:19Z

Added = How to get search in Image module to look like that in Header or HTML module =

Sridhar: Added = Video overview of modules used in the layout for homepage =

2012-01-03T09:48:06Z

Added = Video overview of modules used in the layout for homepage =

New page

[http://demos.ithemes.com/depot-shopp/ iThemes Builder child theme Depot demo site]

= Video overview of modules used in the layout for homepage =

{{#ev:youtube|BV842ifgzAo|853}}

@@ Line 229: / Line 229: @@
 [[File:Screen Shot 2013-02-28 at 7.56.18 PM.png|778px|thumb|none]]
-'''3.''' Edit your layout(s) and add a Navigation Module having this code:
+'''3.''' Edit your layout(s) and add a HTML Module having this code:
 <pre class="brush: php; gutter: false;">

← Older revision		Revision as of 15:12, February 28, 2013
Line 208:		Line 208:
	}		}
	</pre>		</pre>
		+
		+	= How to style and set up UberMenu in Depot =
		+
		+	[[File:2013-02-28 20-33-40.jpg\|800px\|thumb\|none]]
		+
		+	[http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703 UberMenu] is a user-friendly, highly customizable, responsive Mega Menu WordPress plugin.
		+
		+	Follow the steps below to set it up in Depot.
		+
		+	'''1.''' Appearance -> UberMenu -> Theme Integration -> Easy Integration: ON.
		+
		+	'''2.'''
		+
		+	a) At Appearance -> Menus, create a custom menu that you would like to use, if you haven't already. By default a down arrow will appear for every menu item on the front-end. Therefore you might want to edit those menu items that do not have a second level menu and uncheck <code>Activate Mega Menu</code>.
		+
		+	b) Tick UberMenu in "Activate Uber Menu Locations" and Save.
		+
		+	Select your desired custom menu in "Theme Locations" and Save.
		+
		+	[[File:Screen Shot 2013-02-28 at 7.56.18 PM.png\|778px\|thumb\|none]]
		+
		+	'''3.''' Edit your layout(s) and add a Navigation Module having this code:
		+
		+	<pre class="brush: php; gutter: false;">
		+	<?php uberMenu_easyIntegrate(); ?>
		+	</pre>
		+
		+	Enable PHP.
		+
		+	'''4.''' This will appear on the site like this:
		+
		+	[[File:Screen Shot 2013-02-28 at 8.19.16 PM.png\|800px\|thumb\|none]]
		+
		+	But second level menus will not appear when hovered upon.
		+
		+	Adding the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor) will fix the problem:
		+
		+	<pre class="brush: css; gutter: false;">
		+	.builder-module-2-outer-wrapper, .builder-module-2 .widget-wrapper {
		+	overflow: visible !important;
		+	}
		+	</pre>
		+
		+	where the HTML module being used is second from top in the layout. Therefore if you have placed the HTML module in the top most position, you will have to replace all occurrences of <code>.builder-module-2</code> in the above with <code>.builder-module-1</code>.
		+
		+	'''5.''' If you would like to make it look like Depot's navigation, add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor) in addition to the above CSS code:
		+
		+	<pre class="brush: css; gutter: false;">
		+	.builder-module-2 .builder-module-element:before,
		+	.builder-module-2 .builder-module-element:after {
		+	position: absolute;
		+	bottom: -10px;
		+	z-index: -1;
		+	display: block;
		+	visibility: visible !important;
		+	width: 0;
		+	height: 0;
		+	border: 10px solid transparent;
		+	content: ' ';
		+	}
		+	.builder-module-2 .builder-module-element:before {
		+	left: -20px;
		+	border-right-color: #111111;
		+	}
		+	.builder-module-2 .builder-module-element:after {
		+	right: -20px;
		+	border-left-color: #111111;
		+	}
		+	.builder-module-2 .builder-module-element {
		+	margin: 0 -10px !important;
		+	padding: 0 10px !important;
		+	border-width: 1px 0;
		+	border-style: solid;
		+	border-color: #212121;
		+	-webkit-border-radius: 3px 3px 0 0;
		+	-moz-border-radius: 3px 3px 0 0;
		+	border-radius: 3px 3px 0 0;
		+	background-image: -webkit-gradient(linear, left top, left bottom, from(#616161), to(#313131)) !important;
		+	background-image: -webkit-linear-gradient(top, #616161, #313131) !important;
		+	background-image: -moz-linear-gradient(top, #616161, #313131) !important;
		+	background-image: -o-linear-gradient(top, #616161, #313131) !important;
		+	background-image: -ms-linear-gradient(top, #616161, #313131) !important;
		+	background-image: linear-gradient(top, #616161, #313131) !important;
		+	-webkit-box-shadow: rgba(0,0,0,.3) 0 6px 6px -3px;
		+	-moz-box-shadow: rgba(0,0,0,.3) 0 6px 6px -3px;
		+	box-shadow: rgba(0,0,0,.3) 0 6px 6px -3px;
		+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#616161', EndColorStr='#313131');
		+	height: 41px;
		+	}
		+
		+	.builder-module-2 {
		+	margin-top: 1em;
		+	margin-bottom: 1em;
		+	}
		+
		+	.builder-module-2-background-wrapper {
		+	position: relative;
		+	padding: 0;
		+	}
		+
		+	#megaMenu {
		+	position: absolute !important;
		+	}
		+
		+	#megaMenu ul.megaMenu > li {
		+	border-right: 1px solid #616161 !important;
		+	}
		+
		+	#megaMenu ul.megaMenu > li > a {
		+	border-left: none !important;
		+	border-right: 1px solid #313131 !important;
		+	color: #FFFFFF !important;
		+	}
		+
		+	.megaMenu li.current-menu-item a {
		+	background: #212121 !important;
		+	}
		+
		+	.megaMenu > li > a:hover {
		+	background: #333333 !important;
		+	-webkit-box-shadow: inset #000 0 0 4px !important;
		+	-moz-box-shadow: inset #000 0 0 4px !important;
		+	box-shadow: inset #000 0 0 4px !important;
		+	}
		+
		+	#megaMenu ul.megaMenu > li > a span.wpmega-link-title, #megaMenu ul.megaMenu > li > span.um-anchoremulator span.wpmega-link-title {
		+	text-transform: none !important;
		+	}
		+
		+	#megaMenu > ul {
		+	background-color: #616161 !important;
		+	background-image: -webkit-gradient(linear, left top, left bottom, from(#616161), to(#313131)) !important;
		+	background-image: -webkit-linear-gradient(top, #616161, #313131) !important;
		+	background-image: -moz-linear-gradient(top, #616161, #313131) !important;
		+	background-image: -o-linear-gradient(top, #616161, #313131) !important;
		+	background-image: -ms-linear-gradient(top, #616161, #313131) !important;
		+	background-image: linear-gradient(top, #616161, #313131) !important;
		+	}
		+	</pre>
		+
		+	where the HTML module being used is second from top in the layout. Therefore if you have placed the HTML module in the top most position, you will have to replace all occurrences of <code>.builder-module-2</code> in the above with <code>.builder-module-1</code>.
		+
		+	That's it!

← Older revision		Revision as of 02:28, January 30, 2013
Line 192:		Line 192:

	Source: http://getshopped.org/forums/topic/how-to-show-sku/		Source: http://getshopped.org/forums/topic/how-to-show-sku/
		+
		+	= How to remove space around Image Module =
		+
		+	<gallery widths=320px heights=156px>
		+	File:Builder Responsive Test Site 2013-01-30 07-54-37.png\|Before
		+	File:Builder Responsive Test Site 2013-01-30 07-55-07.png\|After
		+	</gallery>
		+
		+	Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
		+
		+	<pre class="brush:css;">
		+	.builder-module-image-background-wrapper,
		+	.builder-module-image .builder-module-element {
		+	padding: 0;
		+	}
		+	</pre>

← Older revision		Revision as of 04:48, July 30, 2012
Line 153:		Line 153:
	Source: http://docs.getshopped.org/documentation/function-reference/		Source: http://docs.getshopped.org/documentation/function-reference/

−	= ~~Entry 4~~ =	+	== How to add a SKU column in Checkout page ==
		+
		+	[[File:Screen Shot 2012-07-30 at 10.14.20 AM.png\|412px\|thumb\|none\|Before]]
		+
		+	[[File:Screen Shot 2012-07-30 at 10.08.28 AM.png\|495px\|thumb\|none\|After]]
		+
		+	If you would like to display product SKU in Checkout page (www.site.com/products-page/checkout/), do the following.
		+
		+	Edit wp-content/themes/BuilderChild-Depot/wpsc-shopping_cart_page.php.
		+
		+	Below
		+
		+	<pre class="brush:php;">
		+	<th colspan="2" ><?php _e('Product', 'it-l10n-BuilderChild-Depot'); ?></th>
		+	</pre>
		+
		+	add
		+
		+	<pre class="brush:php;">
		+	<th><?php _e('SKU', 'it-l10n-BuilderChild-Depot'); ?></th>
		+	</pre>
		+
		+	Below
		+
		+	<pre class="brush:php;">
		+	<td class="wpsc_product_name wpsc_product_name_<?php echo wpsc_the_cart_item_key(); ?>">
		+	<a href="<?php echo wpsc_cart_item_url();?>"><?php echo wpsc_cart_item_name(); ?></a>
		+	</td>
		+	</pre>
		+
		+	add
		+
		+	<pre class="brush:php;">
		+	<td class="wpsc_product_sku wpsc_product_sku_<?php echo wpsc_the_cart_item_key(); ?>">
		+	<?php echo wpsc_product_sku(wpsc_cart_item_product_id()); ?>
		+	</td>
		+	</pre>
		+
		+	Source: http://getshopped.org/forums/topic/how-to-show-sku/

@@ Line 95: / Line 95: @@
 </pre>
-= Entry 3 =
+= Depot & WP Ecommerce =
 = Entry 4 =

← Older revision		Revision as of 08:55, April 23, 2012
Line 1:		Line 1:
	[http://demos.ithemes.com/depot-shopp/ iThemes Builder child theme Depot demo site]		[http://demos.ithemes.com/depot-shopp/ iThemes Builder child theme Depot demo site]
		+
		+	= Demo site layouts & views export file =
		+
		+	Click [http://demos.ithemes.com/depot-shopp/files/builder-export-data/export-4ef254f3ee7060.63580175/builder-export-depot.zip here] to download the [http://demos.ithemes.com/depot-shopp/ Depot demo site]'s layouts & views. To import this into your Builder site, go to My Theme -> Settings -> Import / Export.

	= Video overview of modules used in the layout for homepage =		= Video overview of modules used in the layout for homepage =

← Older revision		Revision as of 16:16, January 5, 2012
Line 4:		Line 4:

	{{#ev:youtube\|BV842ifgzAo\|853}}		{{#ev:youtube\|BV842ifgzAo\|853}}
		+
		+	= How to get search in Image module to look like that in Header or HTML module =
		+
		+	[[File:05-01-2012 21-44-38.png]]
		+
		+	Add the following at the end of child theme's style.css:
		+
		+	<pre class="brush:css;">
		+	/** search widget in image module */
		+	.builder-module-image .builder-module-sidebar .widget_search {
		+	padding: 0;
		+	margin-top: 30px;
		+	margin-right: 1.5em;
		+	-webkit-border-radius: 20px;
		+	-moz-border-radius: 20px;
		+	border-radius: 20px;
		+	-webkit-box-shadow: #EEEEEE 1px 1px 3px;
		+	-moz-box-shadow: #EEEEEE 1px 1px 3px;
		+	box-shadow: #EEEEEE 1px 1px 3px;
		+	}
		+	.builder-module-image .widget_search .widget-title {
		+	display: none;
		+	visibility: hidden;
		+	}
		+	.builder-module-image .widget_search input {
		+	height: 25px;
		+	border: 0;
		+	margin: 0;
		+	right: 0;
		+	float: left;
		+	}
		+	.builder-module-image .widget_search input[type="text"] {
		+	background: #F1F1F1;
		+	background: -webkit-linear-gradient(#F1F1F1, #FEFEFE);
		+	background: -moz-linear-gradient(#F1F1F1, #FEFEFE);
		+	background: -ms-linear-gradient(#F1F1F1, #FEFEFE);
		+	background: -o-linear-gradient(#F1F1F1, #FEFEFE);
		+	background: linear-gradient(#F1F1F1, #FEFEFE);
		+	border: 1px solid #CCCCCC;
		+	-webkit-border-radius: 20px 0 0 20px;
		+	-moz-border-radius: 20px 0 0 20px;
		+	border-radius: 20px 0 0 20px;
		+	}
		+	.builder-module-image .widget_search input[type="text"]:focus {
		+	background:#FFFFFF;
		+	color: #333333;
		+	}
		+	.builder-module-image .widget_search input[type="submit"] {
		+	display: block;
		+	width: 35px;
		+	height: 25px;
		+	background: #e1e1e1 url('images/search-icon.png') no-repeat center center;
		+	background: url('images/search-icon.png') no-repeat center center, -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#f6f6f6));
		+	background: url('images/search-icon.png') no-repeat center center, -webkit-linear-gradient(top, #e1e1e1, #f6f6f6);
		+	background: url('images/search-icon.png') no-repeat center center, -moz-linear-gradient(top, #e1e1e1, #f6f6f6);
		+	background: url('images/search-icon.png') no-repeat center center, -o-linear-gradient(top, #e1e1e1, #f6f6f6);
		+	background: url('images/search-icon.png') no-repeat center center, -ms-linear-gradient(top, #e1e1e1, #f6f6f6);
		+	background: url('images/search-icon.png') no-repeat center center, linear-gradient(top, #e1e1e1, #f6f6f6);
		+	border: 1px solid #CCCCCC;
		+	border-left: 0;
		+	text-indent: -9999px;
		+	text-transform: capitalize;
		+	-webkit-border-radius: 0 20px 20px 0;
		+	-moz-border-radius: 0 20px 20px 0;
		+	border-radius: 0 20px 20px 0;
		+	}
		+	.builder-module-image .widget_search input[type="submit"]:hover {
		+	cursor: pointer;
		+	background: #e1e1e1 url('images/search-icon.png') no-repeat center center;
		+	background: url('images/search-icon.png') no-repeat center center, -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#f6f6f6));
		+	background: url('images/search-icon.png') no-repeat center center, -webkit-linear-gradient(top, #e1e1e1, #f6f6f6);
		+	background: url('images/search-icon.png') no-repeat center center, -moz-linear-gradient(top, #e1e1e1, #f6f6f6);
		+	background: url('images/search-icon.png') no-repeat center center, -o-linear-gradient(top, #e1e1e1, #f6f6f6);
		+	background: url('images/search-icon.png') no-repeat center center, -ms-linear-gradient(top, #e1e1e1, #f6f6f6);
		+	background: url('images/search-icon.png') no-repeat center center, linear-gradient(top, #e1e1e1, #f6f6f6);
		+	-webkit-box-shadow: inset #DDDDDD 0 0 12px;
		+	-moz-box-shadow: inset #DDDDDD 0 0 12px;
		+	-o-box-shadow: inset #DDDDDD 0 0 12px;
		+	box-shadow: inset #DDDDDD 0 0 12px;
		+	}
		+	.builder-module-image .widget_search input[type="submit"]:active {
		+	-webkit-box-shadow: inset #AAAAAA 0 0 2px;
		+	-moz-box-shadow: inset #AAAAAA 0 0 2px;
		+	-o-box-shadow: inset #AAAAAA 0 0 2px;
		+	box-shadow: inset #AAAAAA 0 0 2px;
		+	}
		+	.builder-module-image .right .widget_search {
		+	float: right;
		+	}
		+	</pre>
		+
		+	= Entry 3 =
		+
		+
		+	= Entry 4 =