BuilderChild-Depot

(Difference between revisions)
Jump to: navigation, search
(Added = How to get search in Image module to look like that in Header or HTML module =)
(Added = How to remove space around Image Module =)
(3 intermediate revisions by one user not shown)
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 =
Line 95: Line 99:
 
</pre>
 
</pre>
  
= Entry 3 =
+
= Depot & WP Ecommerce =
  
 +
== How to display SKU on single product pages ==
  
= Entry 4 =
+
[[File:2012-03-28 14-04-55.png|800px|thumb|none]]
 +
 
 +
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 <code>wpsc_product_sku</code> function can be used.
 +
 
 +
An example follows.
 +
 
 +
Edit ''wpsc-single_product.php''.
 +
 
 +
Above
 +
 
 +
<pre class="brush:php;">
 +
</form><!--close product_form-->
 +
</pre>
 +
 
 +
add
 +
 
 +
<pre class="brush:php;">
 +
<?php if ( wpsc_product_sku() ) : ?>
 +
<dl class="details">
 +
<dt>SKU:</dt>
 +
<dd><?php echo wpsc_product_sku(); ?></dd>
 +
</dl>
 +
<?php endif; ?>
 +
</pre>
 +
 
 +
Then add the following at the end of child theme's style.css:
 +
 
 +
<pre class="brush: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;
 +
}
 +
</pre>
 +
 
 +
Source: http://docs.getshopped.org/documentation/function-reference/
 +
 
 +
== 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/
 +
 
 +
= 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 20: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