Today I’m going to show you what is possible when using a style sheet. If you want to know how to enable an stylesheet go to the bottom of this post.
If you use below stylesheet your items will look like this:
To get this effect you have to put this in your stylesheet:
.store-outerbox{background-color: #2F2F2F;width:100%;color:#000000;font-family:verdana;float:left;margin:0px 15px 15px 0;min-height:353px;border:solid 1px #efefef;position:relative;-moz-box-shadow: 0px 0px 10px #999;-webkit-box-shadow: 0px 0px 10px #999;box-shadow: 0px 0px 10px #999;}
.store-titel{width:100%;background-color:#E4DDD6;color:#000000;text-shadow:1px 1px 0 #FFF;float:left;position:relative;height:50px;line-height:21px;font-size:20px;padding-top:5px;font-weight:bold;text-align:center;}
.store-image{float:left;width:auto;height:180px;padding:0px;overflow:hidden;margin: auto;background-color:#FFFFFF;}
.store-image img{display: block;border:0px;margin: auto;max-height:auto !important;}
.store-footer{width:100%;background-color:#FFF;float:left;position:relative;min-height:137px;}
.store-description{color:#000000;height:auto;line-height:18px;font-size:0.8em;overflow:auto;padding:15px;text-align:jusify;}
.store-more{min-height:20px; width:100%;position: relative;float: left;margin-top:10px;margin-left:5px;margin-bottom: 5px;}
.store-more img{margin:0px !important;}
.store-price {border: 0 solid #65B9C1;color: #A2C100 !important;float: right;height: auto !important;position: absolute;top:-180px; right:0px;width: auto !important;}
.store-price table {width:auto;background-color: transparent !important; border: 1px none !important;border-collapse: inherit !important;float: right;margin: 1px 0 1px 1px;text-align: center !important;padding:15px;}
.store-price table tr {padding: 1px !important;}
.store-price table tr td {padding: 1px !important;}
.store-price table td, table th, table tr {border: 1px solid #CCCCCC;padding: 0 !important;}
.store-price table td.euros {font-size: 30px !important;letter-spacing: -1px !important;text-shadow:1px 1px 0 #FFFFFF }
.store-price {background-color: transparent !important;}
.buttons a, .buttons button {background-color: #A2C100;border: 1px solid #B0CF00;bottom: 0;color: #FFF;cursor: pointer;display: block;float: left;font-size: 30px;font-weight: bold;margin-top: 0;padding: 15px;position: relative;text-decoration: none;width: auto;}
.buttons {position:absolute;right:0px;top:-75px;-moz-box-shadow: -5px -5px 40px #FFF;-webkit-box-shadow: -5px -5px 40px #FFF;box-shadow: -5px -5px 40px #FFF;}
.buttons button {overflow: visible;padding: 4px 10px 3px 7px;width: auto;}
.buttons button[type] {line-height: 17px;padding: 5px 10px 5px 7px;}
.:first-child + html button[type] {padding: 4px 10px 3px 7px;}
.buttons button img, .buttons a img {border: medium none;margin: 0 3px -3px 0 !important;padding: 0;}
.button.regular, .buttons a.regular {color: #FFF;}
.buttons a.regular:hover, button.regular:hover {background-color: #95AF00;border: 1px solid #95AF00;color: #FFF;}
.buttons a.regular:active {background-color: #95AF00;border: 1px solid #95AF00;color: #FFF;}
If you want to see it in action go to Fabrizio’s site here
Leave a Reply