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:

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