Merge pull request #3 from jameskoster/master

% based layout stuffs
This commit is contained in:
Mike Jolley 2011-09-13 05:53:36 -07:00
commit 960f54c604
3 changed files with 1324 additions and 194 deletions

File diff suppressed because it is too large Load Diff

View File

@ -151,6 +151,8 @@ small.note {
-------------------------------------------------------------- */ -------------------------------------------------------------- */
div.product { div.product {
position: relative; position: relative;
margin-bottom:0;
.product_title { .product_title {
clear: none; clear: none;
} }
@ -164,28 +166,31 @@ div.product {
} }
p.stock { p.stock {
font-size: 0.92em; font-size: 0.92em;
float: left;
padding: 2px 0 0 0; padding: 2px 0 0 0;
} }
div.images { div.images {
float: left; float: left;
width: 314px; width: 47%;
margin-bottom: 10px; margin-bottom: 10px;
img { img {
border: 1px solid #ddd; border: 1px solid #ddd;
background: #f5f5f5; background: #f5f5f5;
padding: 6px; padding: 6px;
display: block; display: block;
width:100%;
height: auto;
} }
div.thumbnails { div.thumbnails {
padding-top: 10px; padding-top: 10px;
.clearfix; .clearfix;
a { a {
margin-right: 10px;
margin-bottom: 10px;
float: left; float: left;
width:30.75%;
margin-right:3.8%;
img { img {
padding: 3px; width:100%;
height: auto;
} }
} }
a.last { a.last {
@ -198,7 +203,7 @@ div.product {
} }
div.summary { div.summary {
float: right; float: right;
width: 300px; width: 48%;
} }
div.social { div.social {
text-align: right; text-align: right;
@ -258,7 +263,6 @@ div.product {
.stock { .stock {
color: green; color: green;
float: left;
} }
.out-of-stock { .out-of-stock {
color: red; color: red;
@ -269,8 +273,8 @@ p.cart {
form.cart { form.cart {
margin-bottom: 24px; margin-bottom: 24px;
float: right; overflow: hidden;
width: 300px; zoom:1;
div.quantity { div.quantity {
float: left; float: left;
margin: 0 4px 0 0; margin: 0 4px 0 0;
@ -317,9 +321,9 @@ span.onsale {
position: absolute; position: absolute;
text-align: center; text-align: center;
line-height: 32px; line-height: 32px;
top:0; top:6px;
right: 320px; left: 6px;
margin: -6px 0 0 0; margin:0;
.border_radius(20px); .border_radius(20px);
} }
@ -329,14 +333,36 @@ span.onsale {
list-style: none; list-style: none;
float: left; float: left;
} }
.products {
.related, .upsells.products {
overflow: hidden;
zoom:1;
ul.products, ul {
float: none;
li {
width:48%;
img {
width:100%;
height: auto;
}
}
}
}
ul.products {
clear: both; clear: both;
margin-left:0;
padding-left:0;
li { li {
float: left; float: left;
margin: 0 10px 20px 0; margin: 0 3.8% 20px 0;
padding: 0; padding: 0;
position: relative; position: relative;
width:150px; width:22.05%;
margin-left:0;
.onsale { .onsale {
top: 0; top: 0;
right: 0; right: 0;
@ -347,8 +373,8 @@ span.onsale {
text-decoration: none; text-decoration: none;
} }
a img { a img {
width: 150px; width: 100%;
height: 150px; height: auto;
display: block; display: block;
margin: 0 0 8px; margin: 0 0 8px;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -390,6 +416,10 @@ span.onsale {
} }
} }
.woocommerce_ordering {
margin-bottom:24px;
}
/* =Buttons /* =Buttons
-------------------------------------------------------------- */ -------------------------------------------------------------- */
a.button, button.button, input.button, #review_form #submit { a.button, button.button, input.button, #review_form #submit {
@ -477,11 +507,18 @@ a.button:hover, button.button:hover, input.button:hover, #review_form #submit:ho
overflow: hidden; overflow: hidden;
zoom: 1; zoom: 1;
margin: 0; margin: 0;
width:100%;
background: none;
* {
background: none;
}
li { li {
padding: 00; padding: 00;
margin: 0 0 20px; margin: 0 0 20px;
border: 0; border: 0;
position: relative; position: relative;
background: 0;
border:0;
.meta { .meta {
color: #999; color: #999;
font-size: 0.75em; font-size: 0.75em;
@ -652,6 +689,16 @@ table.my_account_orders {
} }
} }
/* =Cart
-------------------------------------------------------------- */
table.cart {
img {
width:32px;
height: auto;
}
}
/* =Cart Sidebar /* =Cart Sidebar
-------------------------------------------------------------- */ -------------------------------------------------------------- */
ul.cart_list, ul.product_list_widget { ul.cart_list, ul.product_list_widget {
@ -670,6 +717,8 @@ ul.cart_list, ul.product_list_widget {
float: left; float: left;
margin-right: 4px; margin-right: 4px;
border: 1px solid #ddd; border: 1px solid #ddd;
width:32px;
height: auto;
} }
} }
} }
@ -752,6 +801,7 @@ td.quantity {
padding:1px 5px 2px; padding:1px 5px 2px;
line-height: 1em; line-height: 1em;
vertical-align: middle; vertical-align: middle;
margin:0;
} }
.quantity input.plus, .quantity input.minus { .quantity input.plus, .quantity input.minus {
background: #ccc; background: #ccc;
@ -761,9 +811,12 @@ td.quantity {
border:none; width:20px; border:none; width:20px;
color:#fff; color:#fff;
cursor: pointer; cursor: pointer;
margin:0;
display:inline;
border:0;
} }
.quantity input.minus { .border_radius_left(5px); } .quantity input.minus { .border_radius_left(5px); }
.quantity input.plus { .border_radius_right(5px); } .quantity input.plus { .border_radius_right(5px); float:none; }
.quantity input.minus:hover, .quantity input.plus:hover { background: #f93; } .quantity input.minus:hover, .quantity input.plus:hover { background: #f93; }
.cart input { .cart input {
@ -790,23 +843,31 @@ td.quantity {
.clearfix; .clearfix;
width:100%; width:100%;
.related { .related {
width:310px; width:30.75%;
float: left; float: left;
} }
.cross-sells { .cross-sells {
width:314px; width:48%;
float: left; float: left;
ul.products {
float: none;
li {
width:48%;
}
}
} }
.shipping_calculator { .shipping_calculator {
float: right; width:48%;
width:225px;
clear: right;
text-align: right; text-align: right;
.clearfix; .clearfix;
margin: 20px 0 0 0; margin: 20px 0 0 0;
clear: right;
float: right;
.button { .button {
width: 225px; width: 100%;
float: none; float: none;
display: block; display: block;
} }
@ -819,7 +880,7 @@ td.quantity {
.cart_totals { .cart_totals {
float: right; float: right;
width:225px; width:48%;
text-align: right; text-align: right;
p { p {
margin: 0; margin: 0;

View File

@ -86,8 +86,8 @@
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */ /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */
#templateHeader{ #templateHeader{
background-color:#89b655; background-color:#557da1;
background: -webkit-linear-gradient(#95be67, #89b655); background: -webkit-linear-gradient(#7496b5, #557da1);
border-bottom:0; border-bottom:0;
-webkit-border-top-left-radius:6px; -webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px; -webkit-border-top-right-radius:6px;
@ -106,7 +106,7 @@
.headerContent h1.h1 { .headerContent h1.h1 {
color:#fff; color:#fff;
margin:0; margin:0;
text-shadow:0 1px 0 #215a6b; text-shadow:0 1px 0 #436380;
} }
.headerContent a:link, .headerContent a:visited{ .headerContent a:link, .headerContent a:visited{
@ -195,7 +195,7 @@
<tr> <tr>
<td align="center" valign="top"> <td align="center" valign="top">
<!-- // Begin Template Header \\ --> <!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader" style="background-color:#89b655; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; color:#202020; font-family:Arial; font-weight:bold; line-height:100%; vertical-align:middle;"> <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader" style="background-color:#557da1; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; color:#202020; font-family:Arial; font-weight:bold; line-height:100%; vertical-align:middle;">
<tr> <tr>
<td class="headerContent" style="padding:24px; "> <td class="headerContent" style="padding:24px; ">