Enhanced Ratings

Back to the blog post

Here's a demo of the new ratings module in action.

rating: 0+x

And here is the code:

.page-rate-widget-box .rate-points, .page-rate-widget-box .rateup a, 
.page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a {
    height: 30px;
    background-color: #3198dd;
    background-image: url(http://bmcenterprises.wdfiles.com/local--files/css:img/button-shade.png);
    background-position: center bottom;
    color: white;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #3198dd;
    text-align: center;
    margin-right: 2px;
    font-size: 100%;
    padding: 0px 5px 2px 5px;
}
.page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover, 
.page-rate-widget-box .cancel a:hover {
    background-color: #aaa;
    border: 1px solid #aaa;
}
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.