Better icons for Question2Answer
Question2Answer is a popular open source platform for building Q&A sites. It’s a great piece of software but the default theme leaves something to be desired. In particular, the icons used in various places around the site aren’t the best, so I made some changes to the voting arrows and best answer stars. Problems with the default setup:
- The voting buttons are poor quality: they have fixed transparency due to the GIF format and look “scratchy” around the edges.
- The images are spread across 3 files –
selected-star.png– which means multiple HTTP requests.
- 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 a square shows 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. Here is the new sprite image:
I’ll also post the relevant CSS, to which I made a few changes:
- Use transparent color for the button text (+/-) to hide it.
- Link-esque mouse cursor for the buttons as a better indication that an action can be performed.
- Combined several CSS rules to cut out the large amount of code repetition.
The code #
Voting buttons CSS – replaces line 196-212 inclusive:
background: transparent url("q2a-buttons.png");
/* hide +/- labels */
background-position: 0 0;
background-position: 0 -60px;
background-position: 0 -15px;
background-position: -17px 0;
background-position: -17px -60px;
background-position: -17px -15px;
background-position: 0 -30px;
background-position: 0 -45px;
background-position: -17px -30px;
background-position: -17px -45px;
Best answers CSS – replaces line 294-302 inclusive:
background: url("q2a-buttons.png") no-repeat;
background-position: -34px -28px;
background-position: -34px 0;