BuilderChild-Depot
(Difference between revisions)
(Added = How to get search in Image module to look like that in Header or HTML module =) |
(Added == How to display SKU on single product pages == under = Depot & WP Ecommerce =) |
||
| Line 95: | Line 95: | ||
</pre> | </pre> | ||
| − | = | + | = Depot & WP Ecommerce = |
| + | == How to display SKU on single product pages == | ||
| + | |||
| + | [[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/ | ||
= Entry 4 = | = Entry 4 = | ||
Revision as of 03:39, March 28, 2012
iThemes Builder child theme Depot demo site
Contents |
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
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
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/
