Contribution: new Q2A icons/buttons

Question

Hi Gideon and everyone, don't know if this is the best place to post this but I'd like to contribute these small changes I made to the Q2A images and CSS for the voting arrows and best answer stars. There are a few problems with the current setup:

• The images are spread across 3 files, which is more HTTP requests than necessary.
• The voting buttons are slightly poor quality: they have fixed transparency due to the GIF format and look "scratchy" round the edges.
• The best answer stars have solid colour backgrounds, not transparent - if you don't have a white background in your theme or blue background for the best answer then you get a square showing through.
• Two of the stars are almost identical so no need for separate images.

I have redone all the images to make them smoother and fit with any background. They are combined into one PNG file with alpha transparency. I can provide the Inkscape SVG source file if anyone requires it.

 

New sprite image: q2a-buttons.png

 

I'll also post the relevant CSS, to which I made a few changes:

• Negative indent for the button text instead of the less reliable font-size and color. Updated this to use transparent color, since text-indent causes problems in IE.
• Link-esque mouse cursor for the buttons as a better indication that an action can be performed.
• Combined several rules to cut out the large amount of code repetition.

UPDATE: wrote a full blog post here which includes the full CSS: http://codelair.co.uk/15/better-icons-for-question2answer

 

Comments

My bad, I just discovered that text-indent on input elements causes problems in older versions of Internet Explorer. Perhaps that is why Gideon used the font-size and colour trick. That is still problematic though since some browsers (Opera and Firefox, at least) have a minimum font size so 1px will always display at about 8px or higher.

My current solution is to scrap all of those and blank the VALUE attribute on the buttons. I'm also converting them to display:block in my own code for more reliable sizing/positioning. Will update my post shortly...

---

For the images may I recommend a little piece of software named pngquant found here: http://www.libpng.org/pub/png/apps/pngquant.html
What pngquant does is to take regular png files with transparency, and then convert the transparency to 8-bit.
This allows png files to be used across all browsers without hacks (such as IE5+).
It also reduces the size of the png a little :).
I highly recommend this solution with the above, over using gif for transparency as the result looks far greater.
You could also include pngquant in the source file with instructions for any budding template artist :D.