BuilderChild-Depot

(Difference between revisions)
Jump to: navigation, search
(Added = How to add a SKU column in Checkout page =)
(Added = How to remove space around Image Module =)
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>

Revision as of 21:28, January 29, 2013

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;
}
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox