Answer
Mar 25, 2022 - 08:27 AM
Answerbase gives you the ability to overwrite any of our CSS styles within your "Customization > CSS" area of your administration site. But, then the question is...how do I effectively find out how to reference the item that I want to change the style of? Let's take a look here.
Let's say you have an Answerbase Q&A widget on your product page and you want to change the color of the question titles as they display.
See example here:
The first thing you need to do is identify what CSS classes are controlling those titles. Fortunately, Google Chrome's Developer Tools makes this VERY easy for us.
When you're looking at the page that the widget is on in Google Chrome, hit F12 on your computer and you'll see developer tools pop up like this:
Select The Element You Want to Style
Within those tools, there is an option to select an element on the page that you'd like to inspect a little bit further and see details around:
Once you've clicked that icon....then find the item on the page that you'd like to know the CSS Classes for....and click on that element once. What that will do is, within the development tools....you'll see that the developer tools have highlighted the code that is displaying and styling that item...similar to this:
Identifying the CSS Class to Style Element Further
As noted above, you can now see the styles that are controlling that element and the style classes, as seen here:
Within that "Styles" area....look for the first style that is referencing Answerbase provided styles....so in this case that will be this item:
That is the style that is controlling how that element is displaying on your page....and the one that you should reference if you want to make changes to the style. Just highlight that whole element and copy it to your clipboard (Ctrl+C on your keyboard).
Defining New Styles for that Class
Now within Answerbase, go into your Anwerbase administration dashboard and go under "Customization > CSS". There, you'll see a field to add your own CSS code...and one specifically for styling your widget labeled "Widget CSS". Now you just paste that above code into that "Widget CSS" area....and then define whatever styles you'd like. For example, if you want to change the color of the text to blue, you can add this:
Then refresh your page (you may need to clear your cache if it doesn't reflect immediately). You should see the new style applied.
There are a TON of different ways to style different elements on your page, if you're ever having questions of what styles are going to accomplish your goals...you can do a quick Google search like "change color of text in CSS" and Google will most times give you a page that shows you exactly what style to apply. A quick Google search is probably the easist way to find exactly how to reference what you'd like to do...but another great source is W3 Schools which gives tutorials and examples of different CSS styles.
We hope this has been helpful.
Let's say you have an Answerbase Q&A widget on your product page and you want to change the color of the question titles as they display.
See example here:
The first thing you need to do is identify what CSS classes are controlling those titles. Fortunately, Google Chrome's Developer Tools makes this VERY easy for us.
When you're looking at the page that the widget is on in Google Chrome, hit F12 on your computer and you'll see developer tools pop up like this:
Select The Element You Want to Style
Within those tools, there is an option to select an element on the page that you'd like to inspect a little bit further and see details around:
Once you've clicked that icon....then find the item on the page that you'd like to know the CSS Classes for....and click on that element once. What that will do is, within the development tools....you'll see that the developer tools have highlighted the code that is displaying and styling that item...similar to this:
Identifying the CSS Class to Style Element Further
As noted above, you can now see the styles that are controlling that element and the style classes, as seen here:
Within that "Styles" area....look for the first style that is referencing Answerbase provided styles....so in this case that will be this item:
That is the style that is controlling how that element is displaying on your page....and the one that you should reference if you want to make changes to the style. Just highlight that whole element and copy it to your clipboard (Ctrl+C on your keyboard).
Defining New Styles for that Class
Now within Answerbase, go into your Anwerbase administration dashboard and go under "Customization > CSS". There, you'll see a field to add your own CSS code...and one specifically for styling your widget labeled "Widget CSS". Now you just paste that above code into that "Widget CSS" area....and then define whatever styles you'd like. For example, if you want to change the color of the text to blue, you can add this:
.answerbase-widget .questions-list .item .title {
color: blue;
}
Then refresh your page (you may need to clear your cache if it doesn't reflect immediately). You should see the new style applied.
There are a TON of different ways to style different elements on your page, if you're ever having questions of what styles are going to accomplish your goals...you can do a quick Google search like "change color of text in CSS" and Google will most times give you a page that shows you exactly what style to apply. A quick Google search is probably the easist way to find exactly how to reference what you'd like to do...but another great source is W3 Schools which gives tutorials and examples of different CSS styles.
We hope this has been helpful.