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:

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:

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;
}