Support » Plugin: WP-PostRatings » Custom stars – with CSS

  • As custom stars are not fully supported yet – i have come up with a pure CSS-solution in my theme, might be helpful for others:

    This is an example with thumbs-voting (2 images).
    I use images with a size of 64px x 64px and scale them to 32px x 32px.

    .mytheme .post-ratings img {
    	display: block;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    	background: url('img/voting-thumbs-up.gif') no-repeat;
    	background-size: 100%;
    	width: 32px;
    	height: 32px;
    	padding-left: 32px;
    	float: left;
    }
    
    .mytheme .post-ratings img:hover {
    	background-image: url('img/voting-thumbs-up-full.gif');
    }
    
    .mytheme .post-ratings img:nth-of-type(2) {
    	background-image: url('img/voting-thumbs-down.gif');
    }
    
    .mytheme .post-ratings img:hover:nth-of-type(2) {
    	background-image: url('img/voting-thumbs-down-full.gif');
    }
  • You must be logged in to reply to this topic.