CodeLair website tutorials, articles & scripts

Better icons for Question2Answer

Published: 1 March 2012   •   Tags: q2a, css, design

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 – vote-buttons.gif, select-star.png and 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:

Cleaner Q2A buttons

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:

.qa-vote-first-button,
.qa-vote-second-button,
.qa-vote-one-button
{
display: block;
width: 17px;
height: 15px;
background: transparent url("q2a-buttons.png");
border: 0;
cursor: pointer;
/* hide +/- labels */
color: transparent;
}
.qa-vote-up-button {
background-position: 0 0;
}
.qa-vote-up-disabled {
background-position: 0 -60px;
}
.qa-vote-up-hover,
.qa-vote-up-button:hover
{
background-position: 0 -15px;
cursor: pointer;
}
.qa-vote-down-button {
background-position: -17px 0;
}
.qa-vote-down-disabled {
background-position: -17px -60px;
}
.qa-vote-down-hover,
.qa-vote-down-button:hover
{
background-position: -17px -15px;
cursor: pointer;
}
.qa-voted-up-button {
background-position: 0 -30px;
}
.qa-voted-up-hover,
.qa-voted-up-button:hover
{
background-position: 0 -45px;
cursor: pointer;
}
.qa-voted-down-button {
background-position: -17px -30px;
}
.qa-voted-down-hover,
.qa-voted-down-button:hover
{
background-position: -17px -45px;
cursor: pointer;
}

Best answers CSS – replaces line 294-302 inclusive:

.qa-a-select-button, .qa-a-select-hover,
.qa-a-unselect-button, .qa-a-unselect-hover,
.qa-a-selected
{
background: url("q2a-buttons.png") no-repeat;
border: 0;
height: 28px;
width: 30px;
}
.qa-a-select-button,
.qa-a-unselect-hover,
.qa-a-unselect-button:hover
{
background-position: -34px -28px;
cursor: pointer;
}
.qa-a-unselect-button,
.qa-a-selected,
.qa-a-select-hover,
.qa-a-select-button:hover
{
background-position: -34px 0;
cursor: pointer;
}