style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}
body { line-height: 1;
}
ol, ul { list-style: none;
}
blockquote, q { quotes: none;
}
/ remember to define focus styles! /
:focus { outline: 0;
}
/ remember to highlight inserts somehow! /
ins { text-decoration: none;
}
del { text-decoration: line-through;
}
/ tables still need ‘cellspacing=”0”’ in the markup /
table { border-collapse: collapse; border-spacing: 0;
}
/**********************************
DEMO STYLES
**********************************/
body{
background:#000 ;
font:16px "HelveticaNeue-Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
color:#cacaca;
}
#demoContainer{
width:855px;
height:832px;
margin:50px auto 0 auto;
padding:38px 0 0 49px;
background:url(http://demo.simplecartjs.com/images/BGDemoContainer.png) no-repeat;
}
.simpleCart_shelfItem{
float:left;
margin:47px 10px 0 0;
width:250px;
height:141px;
line-height:100%;
position:relative;
}
.item_image{
float:left;
margin-right:15px;
}
.item_name{
text-transform:uppercase;
font:bold 12px "Helvetica", Arial, sans-serif;
color:#fff;
margin-top:15px;
}
.item_Description{
font-size:11px;
padding:5px 0;
}
.item_price{
font:bold 12px "Helvetica", Arial, sans-serif;
color:#fff;
float:left;
margin:6px 3px 0 0;
position:absolute;
bottom:13px;
left:118px;
}
.item_thumb{
display:none;
}
.item_add{
display:block;
width:85px;
height:25px;
text-indent:-9999px;
overflow:hidden;
background:url(http://demo.simplecartjs.com/images/demoSprite.png) 0 -21px;
position:absolute;
bottom:8px;
right:3px;
}
.item_add:hover{
background-position:-85px -21px;
}
.item_add:active{
background-position:-170px -21px;
}
.simpleCart_items{
clear:both;
float:left;
margin: 18px 0px 0px 11px;
height:170px;
position:relative;
}
.cartHeaders{
display:none;
}
.itemContainer{
float:left;
width:110px;
text-align:center;
margin-right:25px;
position:relative;
bottom:0;
}
.itemname{
font:bold 11px "Helvetica", Arial, sans-serif;
color:#fff;
text-transform:uppercase;
}
.itemthumb{
float:none;
margin:0;
padding-top:5px;
}
.itemthumb img{
max-width:77px;
}
.itemQuantity{
float:left;
clear:both;
margin-top:5px;
display:inline;
margin-left:30px;
}
.itemQuantity input{
background:none;
border:none;
width:21px;
height:17px;
background:url(http://demo.simplecartjs.com/images/demoSprite.png);
text-align:center;
color:#fff;
font:bold 11px Arial, sans-serif;
padding:0 9px;
margin:0 5px 0 0;
vertical-align:top;
padding-top:3px;
}
.itemQuantity input:focus{
outline:none;
}
.itemincrement a{
display:block;
background:url(http://demo.simplecartjs.com/images/demoSprite.png) -278px -29px;
width:7px;
height:5px;
text-indent:-9999px;
overflow:hidden;
margin:10px 0 0 0;
}
.itemdecrement a{
display:block;
background:url(http://demo.simplecartjs.com/images/demoSprite.png) -278px -35px;
width:7px;
height:5px;
text-indent:-9999px;
overflow:hidden;
margin:3px 0 0 0;
}
.itemTotal{
color:#fff;
font:bold 11px Arial, sans-serif;
margin:8px 0 0 0;
padding:0;
clear:both;
}
#cartTotal{
clear:both;
text-align:right;
font:11px Arial, sans-serif;
text-shadow:none;
margin-top:23px;
float:left;
width:100%;
margin-left:-65px;
padding: 47px 72px 0px 0px;
}
#viewFullDemoLink{
clear:both;
font:10px Arial, sans-serif;
display:block;
padding:5px 0 0 0;
margin-left:140px;
color:#fff;
text-decoration:none;
}
#viewFullDemoLink:hover{
text-decoration:underline;
}
.simpleCart_empty{
clear:both;
display:-moz-inline-box;
display:inline-block;
color:#fff;
font-size:11px;
text-decoration:none;
padding-left:665px;
margin-right:10px;
position:relative;
top:25px;
}
.simpleCart_checkout{
display:-moz-inline-box;
display:inline-block;
background:url(http://demo.simplecartjs.com/images/btnCheckout.png);
width:87px;
height:24px;
text-indent:-9999px;
overflow:hidden;
position:relative;
top:25px;
}
p{
padding:10px 0;
}
strong{
font-family:"Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#fff;
}
h3{
margin:35px 3px 0 3px;
font:bold 20px "Helvetica", Arial, sans-serif;
color:#fff;
text-shadow: rgba(0, 0, 0, 0.796875) 0px -1px 1px;
}
Sample DVD
To create a shelf item, you create a div with a class of “simpleCart_shelfItem”.
$14.99
Add to Cart
http://i604.photobucket.com/albums/tt130/metalner/simplexshop/attack-release.png
Sample DVD 2
Any field you want for your item can be set by creating a tag with a class of “item_[field-name]”
$22.99
Add to Cart
http://i604.photobucket.com/albums/tt130/metalner/simplexshop/evil-empire.png
Sample Game
To create the add to cart button create a tag with the class “item_quantity”.
$59.99
Add to Cart
http://i604.photobucket.com/albums/tt130/metalner/simplexshop/the-incredibles.png
Sample CD
If can display info about the cart anywhere on your page.
$8.99
Add to Cart
http://i604.photobucket.com/albums/tt130/metalner/simplexshop/wolverine-3.png
Sample CD 2
A class of simpleCart_total, will display the cart total value.
$8.97
Add to Cart
http://i604.photobucket.com/albums/tt130/metalner/simplexshop/ghostbusters.png
Total: $43.47
Empty Cart
Checkout
