[Product Post] Theme CSS Tip: Modifying Questions and Answers

Posted by Adrian Speyer on Sep 19, 2014 11:12:34 AM
Find me on:

1 minute read

One of my favourite plugins is Q & A. It allows you to create a Question and Answer Community in one easy step. I created the below video to showcase how it works, and the features it can add to your Vanilla Community.

httpv://www.youtube.com/watch?v=zBwG0Fm4Xoc

Something that stands out in the video is the CSS I used to make Best Answers (and rejected answers) pop out.

Question and Answer Community

Below is the CSS I used to make that happen. You may need to modify this a bit for your own theme, but it should help you get started towards something very creative.

/* Image additions for Q&A */

.QnA-Item-Accepted {
background-color: #FEFF9F !important;
}

.QnA-Item-Rejected {
background-color: #FFCCCC !important;
}

.QnA-Accepted {
background: url("http://i.imgur.com/p5gZtSe.png") no-repeat scroll 0 0 transparent !important;
display: block;
height: 40px;
overflow: hidden;
position: absolute;
right: -20px;
text-indent: -1000px;
top: 10px;
white-space: nowrap;
width: 40px;
}

.QnA-Rejected {
background: url("http://i.imgur.com/KFVfxDu.png") no-repeat scroll 0px 0px rgba(0, 0, 0, 0) ! important;
display: block;
height: 40px;
overflow: hidden;
position: absolute;
right: -20px;
text-indent: -1000px;
top: 10px;
white-space: nowrap;
width: 40px;
}

We hope you found these tips helpful. Check under the product category for more product tips.

Vanilla Forums offers a cloud based solution which can be used to create a Question and Answer Community. Try Vanilla Forums Cloud Solution free for 30-days.

Topics: Product, News

Related posts

Subscribe to the Community Corner Newsletter and get expert insight and analysis on how to get the most out of your online community every Friday.

Search this blog

Recent Posts

community playbook

Have an Article for Vanilla's Blog?

Send us an email to pr@vanillaforums.com with your topic idea and we'll circle back with our publishing guidelines.