Andre has send in his stylesheet for the competition
If you use below stylesheet your items will look like this:
He even included a change for the people that are using the product page addon which looks like:
If you want to know how to enable an stylesheet go to the bottom of this post. To get this effect you have to put this in your stylesheet (don’t forget to change XXXXXXXXX to the address where you saved this and this image):
.store-outerbox{width:100%;border-radius: 15px;font-family:verdana;float:left;margin:0px 15px 15px 0;min-height:320px;border:solid 1px #efefef;position:relative;-moz-box-shadow: 0px 0px 10px #999;-webkit-box-shadow: 0px 0px 10px #5b5b5b;box-shadow: 0px 0px 10px #5b5b5b; background-image: url(XXXXXXXXXXXXX/outerbox_bg.png); }
.store-titel{border-radius: 15px;width:100%;color:#fff;text-shadow:2px 2px 0 #999;float:left;position:relative;height:40px;line-height:21px;font-size:20px;padding-top:10px;font-weight:bold;text-align:center; border: thick; background-image: url(XXXXXXXXXXX/zvk_artikelenkop.png); background-repeat: no-repeat; }
.store-image{float:left;width:auto;height:auto;padding:10px;margin: auto;background-color:#FFFFFF;}
.store-image img{width:auto;width:auto;padding : 0px;line-height : 2em;margin: 0 auto 10px auto;clear: both;border-radius: 15px;}
.store-footer{width:80%;height:auto;float:left;padding : 10px;position:relative;}
.store-description{width:100%;color:#000000;position:relative;top:5px;left:5px;height:0px;line-height:14px;font-size:10px;overflow:auto;}
.store-more{min-height:20px; width:100%;position: relative;float: left;margin-top:5px;margin-left:5px;margin-bottom: 5px;}
.store-more img{margin:0px !important;}
.store-price {border: 0 solid #65B9C1;color: #F00 !important;float: right;height: auto !important;position: absolute;top:-180px; right:100px;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: 40px !important;letter-spacing: -1px !important;text-shadow:2px 2px 0 #666666; font-weight: bold; font-style: italic; }
.store-price {background-color: transparent !important;}
.buttons a, .buttons button {border-radius:15px;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; text-shadow:2px 2px 0 #999;}
.buttons {border-radius: 15px;position:absolute;right:100px;top:-75px;-moz-box-shadow: -5px -5px 40px #3c3c3c;-webkit-box-shadow: -5px -5px 40px #3c3c3c;box-shadow: -5px -5px 40px #3c3c3c;}
.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: #e7e7e7;color: #add8e6;}
.buttons a.regular:active {background-color: #95AF00;border: 1px solid #2a2a2a;color: #FFF;}
And for the product page you have to include this:
.PP-outerbox {display: block; float: left; width: 500px; border: 4px solid #65B9C1; margin: 0 auto 15px; border-radius: 5px 5px 5px 5px;}
.PP-imagebox {float: left;}
.PP-image {margin: 1em;border:0px;max-width:500px;max-height:180px;max-width:200px !important;width:auto;height:auto;}
.PP-main {margin: 1em;}
.PP-title {color: #000000;font-size: 16px;font-weight:bold;text-shadow: 1px 1px 1px #CCCCCC;}
.PP-description {color: #000000;font-size:10px;}
.PP-more {color: #000000;font-size:10px;}
.PP-store-more{min-height:10px; width:330px;position: relative;float: left;margin-top:60px;margin-left:5px;margin-bottom: 5px;}
.PP-store-more img{margin:0px !important;}
.PP-bottom {width:500px; float:left; position:relative;}
.PP-store-price {float:right;position:relative;margin-left:10px;border: 0 solid #65B9C1;color: #4E4E4E !important;float: right;font-size: 12px !important;font-weight: bold !important;height: 30px !important;position: relative;text-align: center !important;width: 80px !important;}
.PP-store-price table {height:29px;width:78px;background-color: #ececed !important;border-collapse: inherit !important;float: right;margin: 5px 5px 5px 5px;text-align: center !important;}
.PP-store-price table tr {padding: 1px !important;}
.PP-store-price table tr td {padding: 1px !important;}
.PP-store-price table td, table th, table tr {border: 1px solid #CCCCCC;padding: 0 !important;}
.PP-store-price table td.euros {font-size: 12px !important;letter-spacing: -1px !important; }
.PP-store-price {background-color: #65B9C1 !important;}
.PP-buttons a, .buttons button {border-radius:15px;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; text-shadow:2px 2px 0 #999;}
.PP-buttons {border-radius: 15px;position:absolute;right:100px;top:-75px;-moz-box-shadow: -5px -5px 40px #3c3c3c;-webkit-box-shadow: -5px -5px 40px #3c3c3c;box-shadow: -5px -5px 40px #3c3c3c;}
.PP-buttons button {overflow: visible;padding: 4px 10px 3px 7px;width: auto;}
.PP-buttons button[type] {line-height: 17px;padding: 5px 10px 5px 7px;}
.:first-child + html button[type] {padding: 4px 10px 3px 7px;}
.PP-buttons button img, .PP-buttons a img {border: medium none;margin: 0 3px -3px 0 !important;padding: 0;}
.PP-button.regular, .PP-buttons a.regular {color: #FFF;}
.PP-buttons a.regular:hover, button.regular:hover {background-color: #e7e7e7;color: #add8e6;}
.PP-buttons a.regular:active {background-color: #95AF00;border: 1px solid #2a2a2a;color: #FFF;}
.PP-smalltitle {color: #000000;font-size: 12px;font-weight:bold;height:35px;border-bottom: 1px solid #65B9C1;padding:3px;}
.PP-small3 { display: block; float: left; width: 160px; border: 4px solid #65B9C1; margin: 0 8px 0 0; border-radius: 5px 5px 5px 5px;}
.PP-small { display: block; float: left; width: 160px; border: 4px solid #65B9C1; margin: 0 8px 0 0; border-radius: 5px 5px 5px 5px;}
.PP-smallimgbox {float: left; width: 160px;height:180px;text-align:center;}
.PP-smallimg {margin: 1em;border:0px;max-width:135px;max-height:180px;width:auto;height:auto;}
If you want to see it in action go to Andre’s site here
So what do you think of the layout? Let us know in the comments
Looks very nice!