WordPress.org

Ready to get started?Download WordPress

Forums

Thumbs Rating
[resolved] Vote Up Replace text with images. (4 posts)

  1. mikelangel001
    Member
    Posted 7 months ago #

    Hi Ricard, the first thing is to congratulate you for the excellent plugin.

    I want to make a small change and do not like. I need that instead of text appearing Up Vote - Vote Down some icons appear "images" instead.

    I tried to do it this way but obviously does not work:

    $ link_up = '". <span class = rating-thumbs-up' (? (isset ($ type_of_vote) && ($ type_of_vote == 1)) 'rating-thumbs-voted':''). '" onclick = "thumbs_rating_vote (1 '$ post_id..'); "data-text =" '. __ (' <img src = http://www.cuantoanimal.com/wp-content/uploads/2014/01/thumb_up_hover.png /> ',' thumbs-rating ').' "> + '. $ thumbs_rating_up_count. '</ span>';

    Any way you can do it?

    Thank you very much, and congratulations on your work again.

    http://wordpress.org/plugins/thumbs-rating/

  2. Ricard Torres
    Member
    Plugin Author

    Posted 7 months ago #

    Hi there,

    You would have to use only CSS to achieve this. You'll need to override the plugin styles with yours.

    Try something like this in your style.css (inside your theme folder):

    .thumbs-rating-container span:before{ content = ''; }
    .thumbs-rating-container .thumbs-rating-up, .thumbs-rating-container .thumbs-rating-up{
       font-size:0;
      background-image: url(http://placekitten.com/100/100);
       height: 100px;
      width: 100px;
      display: block;
    }

    As you can see in the code above I've set a background image to the button. I've also added some width and height, as well as the display block.

    Give it a try and customise it to fit your needs.

  3. mikelangel001
    Member
    Posted 7 months ago #

    Perfect! Thaks! :D

  4. Piet
    Member
    Posted 1 month ago #

    If you were to use thumbs up/down icons of FontAwesome, you can add the following to your stylesheet:

    Looks like the code editor "eats" some of my code, here is a Gist then.

Reply

You must log in to post.

About this Plugin

About this Topic