Thumbs up – better icons for WordPress/Polldaddy Nero Ratings

We unfortunately live in a world where light-beige skin is often treated as being the “default”, and this can be seen in everything from band-aids to “natural” toned make-up, to people being surprised that Rue from Hunger Games is Black. So I was a little annoyed when I turned on the free Nero Rating widget from PollDaddy and found that you don’t get any choice about the image used – it’s a light-beige thumb icon. This isn’t the biggest problem facing the world today, but it’s annoying.

FIXME

Apart from anything else, it’s just not a very nice-looking icon.

After some fiddling around I worked out that you can add your own image, but there’s a trick to it. First off, you can choose whether the icon width should be 16px, 20px, or 24px. I chose 24px since that’s still pretty tiny. The trick is that the image you need to upload is actually four icons stuck together like this:

Bottom left: thumbs-up
Bottom right: thumbs-down
Top left: thumbs-up hover
Top right: thumbs-down hover

So the total image is 48px by 48px. I had some fun and made a bunch of them. All are made from images I found at clker.com, and all are Public Domain, so you can use them any way you like, without restriction.

Thumbs up thumbs down icon lighter

Thumbs up thumbs down icon darker

Thumbs up thumbs down icon

Green red thumbs up thumbs down icon

Yellow plus minus icon

Red green plus minus icon

Grey plus minus icon

Blue plus minus icon

Purple happy face sad face icon

Pink happy face sad face icon

Blue happy face sad face icon

Yellow happy face sad face icon

Red green arrows icon

Once you’ve got your image, you go to your WordPress dashboard and click Ratings -> Advanced settings (you have to have Ratings turned on for this link to appear), under ‘Rating type’ choose ‘Nero rating’, then go to ‘Rating Style’ -> ‘Custom image’, and paste in the URL for your image.

Advertisements