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 – vote-buttons.gifselect-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;
}