Breaking News
Home » Digital » The Internet » Coding and Customization » How To Adjust Styling of Q&A FAQ and Knowledge Base for WordPress Plugin
CSS Coding Tutorial

How To Adjust Styling of Q&A FAQ and Knowledge Base for WordPress Plugin

Implementing a Frequently Asked Questions (FAQ) plugin is one of the easiest ways to create a well structured knowledge base within your WordPress website(s).

After researching several options the Q&A FAQ and Knowledge Base for WordPress plugin was selected for it’s recent update (it’s being actively supported), the number of downloads (over 85,000), and the clean styling of the plugin created FAQ homepage. However, it needed some customization after being installed.

(Hippies' Note: If you enjoy reading our articles, you'll love our newsletter. Receive updates directly to your inbox. Subscribe now!)

Jump to Final Code

Q&A CSS Code Selectors

Thankfully the plugin’s developer informs us of the selectors necessary to stylize the FAQ Category Titles and FAQ Titles.

FAQ Category Titles


In the following example, the FAQ category titles will become red (color: red).

FAQ Titles


In the following example, the FAQ titles will be made bold (font-weight: bold).

Example: The Digital Hippies

When the Q&A FAQ plugin was first installed at TDH the styling seemed a little too large. The CSS styles of the Sahifa theme Heading Tags (h2 and h3) were being used and this caused the Categories (General and Personal) and the Titles (aka questions) to be extra large.  This would become a serious problem as more questions were added to the FAQ over time, causing the reader to scroll constantly. It would simply take up too much space. As you can see in the image below, to fix this issue they would need to be made smaller. This will also make it more visually pleasing.

FAQ Before CSS Changes Was Too Big

Goal of Customizing CSS

The idea is to mimic the FAQ category titles after the Sahifa theme h4 tag and the FAQ titles after the h5 tag. Here are the style aspects that will need to be transferred for the look to be accomplished.


CSS Final Code: Cut and Paste

If you have installed the Q&A FAQ plugin on your WordPress website and would like to change the styling in the same manner, then here is the final code used. Simply copy and paste it into your style.css file (hint: use your theme’s custom CSS text box, if it has one).

Conclusion: Success

As you can see in the image below the CSS coding was successful (see a live demo on our FAQ page). When more questions are added to our FAQ database they will continue to be added automatically within the chosen categories.

FAQ after CSS styling

Do you currently use a FAQ plugin on your website? If so, which one?

Subscribe to our mailing list

I'm interested in...

About Brianne

Born and raised in Orange County, California, I am definitely a "summer" girl at heart. Today I am a full-time mother to a rambunctious two-year old living in a RV. Together Branndon and I are learning how to become financial and location independent.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

CommentLuv badge