Answerbase HelpAnswers
Apr 29, 2021 - 06:45 AM
Customization > CSS
Once you're in there, you'll be able to see links to the default style sheets the control the style of the widget as seen here:
You'll also see a field where you can add your own custom CSS styles which will overwrite/override all of our defaults, see here:
You can reflect whatever you'd like in that field to customize the look and feel of your widget, so you can reflect your desired branding and styles.
Common Elements Styled...
Answerbase has defined the styles with a .answerbase-widget class, so all the elements that are within the widget are under that. Here are some elements that are pretty commonly styled to give you an idea....
Widget Titles
The titles of the ask question and questions list sections can be styled through the h5 tag, so an example of how to adjust these styles is here:
.answerbase-widget h5 {
font-size: 16px;
font-weight: bold;
color: #858585;
}
Ask Question Field Description Text
If you'd like to style the text that displays by default in the ask question field, which gives the users a bit of a guide on what they should type there...you can use styles similar to this:
.answerbase-widget #ask-question-box {
font-size: 14px;
}
Ask Question "Continue" Button
If you'd like to increase the size of the button that the users click on to continue asking their question, you can use styles similar to this:
.answerbase-widget #ab_ask {
font-size: 1.5rem;
}
Question Title Links
When you are listing the questions and each of the question titles are links, you can style those links using similar CSS styles that you see here:
.answerbase-widget .questions-list .item .title {
font-size: 14px;
}
Follow Link
When you're showing the ability for customers to follow a question, so they can be notified about a new answer, you can change those styles as well. Some customers prefer to hide that sometimes which you can do as well, see an example of how to do that here:
.answerbase-widget .questions-list .item .follow {
display: none;
}
Voting Arrows
Similar to the follow link, some customers prefer to hide the abillity for users to vote on answers, see an example of how to do that here:
.answerbase-widget .voting {
display: none;
}
Of course, use whatever styles you'd like to...the above are just some examples to show you how to structure the CSS styles for those specific elements.
For customers who are looking for 100% control and flexibility over how Q&A functionality and content reflects on their site, you can dig into our Answerbase Question & Answer API and work with that to ensure you accomplish your goals.
If you have any additional questions, please Contact Customer Support and we'll work to make sure you're 100%.
Add New Comment