BuilderChild-Depot

From IThemes Codex
Jump to: navigation, search

iThemes Builder child theme Depot demo site

Contents

Demo site layouts & views export file

Click here to download the 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

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

05-01-2012 21-44-38.png

Add the following at the end of child theme's style.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;
}

Depot & WP Ecommerce

How to display SKU on single product pages

2012-03-28 14-04-55.png

By default SKU (entered in Stock Control meta box at the right side of product edit screen) will not be displayed in single product pages. To display the SKU value, WPEC's wpsc_product_sku function can be used.

An example follows.

Edit wpsc-single_product.php.

Above

</form><!--close product_form-->

add

<?php if ( wpsc_product_sku() ) : ?>
								<dl class="details">
									<dt>SKU:</dt>
									<dd><?php echo wpsc_product_sku(); ?></dd>
								</dl>
							<?php endif; ?>

Then add the following at the end of child theme's style.css:

#single_product_page_container dl {
    border-top: 1px dashed #DDDDDD;
    overflow: hidden;
    padding-top: 1em;
    margin-top: 1em;
}

#single_product_page_container dl dt {
    clear: left;
    float: left;
    font-weight: bold;
    margin-right: 5px;
}

#single_product_page_container dl dd {
    clear: right;
    display: block;
}

Source: http://docs.getshopped.org/documentation/function-reference/

How to add a SKU column in Checkout page

Before
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

<th colspan="2" ><?php _e('Product', 'it-l10n-BuilderChild-Depot'); ?></th>

add

<th><?php _e('SKU', 'it-l10n-BuilderChild-Depot'); ?></th>

Below

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

add

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

Source: http://getshopped.org/forums/topic/how-to-show-sku/

How to remove space around Image Module

Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

.builder-module-image-background-wrapper,
.builder-module-image .builder-module-element {
    padding: 0;
}

How to style and set up UberMenu in Depot

2013-02-28 20-33-40.jpg

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 Activate Mega Menu.

b) Tick UberMenu in "Activate Uber Menu Locations" and Save.

Select your desired custom menu in "Theme Locations" and Save.

Screen Shot 2013-02-28 at 7.56.18 PM.png

3. Edit your layout(s) and add a HTML Module having this code:

<?php uberMenu_easyIntegrate(); ?>

Enable PHP.

4. This will appear on the site like this:

Screen Shot 2013-02-28 at 8.19.16 PM.png

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:

.builder-module-2-outer-wrapper, .builder-module-2 .widget-wrapper {
    overflow: visible !important;
}

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 .builder-module-2 in the above with .builder-module-1.

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:

.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;
}

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 .builder-module-2 in the above with .builder-module-1.

That's it!

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox