Forum

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:

To get this effect you have to put this in your stylesheet (don't forget to change XXXXXXXXX to the address where you saved <a href="http://wpaffiliatefeed.com/blog/wp-content/uploads/2012/07/zvk_artikelenkop.png&quot; title="image nodig 1">this</a> and <a href="http://wpaffiliatefeed.com/blog/wp-content/uploads/2012/07/outerbox_bg.png&quot; title="image nodig 2">this</a> 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 http://zoekvindkoop.nl/index.php/belgie

What do you think about the layout?