[aferg]

Hi,

I have designed a simple product rating system (ecoRating) for our products. I have built the html and css. However, I need to integrate it into the add/modify product admin section and product.tpl.

Here is a link to the example: http://www.littlebitgreen.com/ecoRating.html

Here is the hard-coded html with ideas how is may be implemented:

 
<!-- need database field to hold ratings input ie. ecorating -->
<!-- need dropdown in add/modify product section to select rating and write to database - refer to CSS RATING SCALE for dropdown options -->
<!-- need logic to display ecoRating code block if ratings exist -->
<!-- need logic to display rating css after ecoRating class -->
 
<!-- CSS RATING SCALE noRating =0 .half=9% .one=20%  .oneAndHalf=30%  .two=40%  .twoAndHalf=50% .three=60%  .threeAndHalf=70%  .four paws=80%  .fourAndHalf paws=91%   .five=100% -->
 
<div class="ecoRatingContainer">
<div class="ecoScale"><div class="ecoRating fourAndHalf"></div></div>
<a href="#" target="_blank">How we rate our products</a></div>

and Here is the css:

 
.ecoRatingContainer {
 padding-top:27px;
 width:181px;
 text-align:right;
 margin:10px auto;
 clear:both;
 background: url(images/interface/ecoRating_heading.png) no-repeat right top;
}
.ecoRatingContainer a, .ecoRatingContainer a:hover { font-size:90%; text-decoration:none!important; color:#8e8b7b!important;}
.ecoRating {
 background:#FFFFFF url(images/interface/ecoRating_scaleOn.png) no-repeat left top; height:23px;
}
.ecoScale {
 background:#FFFFFF url(images/interface/ecoRating_scaleOff.png) no-repeat left top; height:23px; width:148px; margin: 0 0 0 auto; margin-bottom:2px; display:block; text-align:left;
}
.half {width:9%;}
.one {width:20%;}  
.oneAndHalf {width:30%;}   
.two {width:40%;}   
.twoAndHalf {width:50%;}  
.three {width:60%;} 
.threeAndHalf {width:70%;}  
.four {width:80%;}  
.fourAndHalf {width:91%;} 
.five {width:100%;}

Is there a kind soul who could help me implement this?

Thanks
AFerg