libraryh3lp logo

LibraryH3lp is software used by libraries, educators, and non-profits for better customer service.

Tuesday, April 9, 2013

FAQs on FAQs: Style your FAQ with themes


Welcome back to FAQs on FAQs, a series designed to help you get the most out of your LibraryH3lp-powered FAQ. Previously, we highlighted some template tweaks you can make to customize answer preview content. This time (and in the next few installments) we dive further into FAQ appearance, covering themes and how to do a bit of custom styling.

The easiest way to change the appearance of your FAQ is to change its theme. The video below quickly shows each of the 17 available themes in action on the LibraryH3lp FAQ.


To view a particular theme on your FAQ, append a theme argument to your site's URL. E.g.,

http://NAME.ask.libraryh3lp.com?theme=united

Chances are that one of the themes will blend nicely with your existing color scheme. Once you've selected a theme, shoot us an e-mail and we'll make it your default. But what if the theme is close but needs a little extra tweakage? Then perhaps a bit of CSS (cascading style sheets) will get you there.

For those not familiar with cascading style sheets, the short version is that CSS separates the presentation from the content of a web page. You've already seen CSS in action with each of the themes above; the look and feel changes while content remains the same.

Tweaking a specific element. Let's take the simplest case where there is a specific element you wish to style. Perhaps you want the font color of your answer preview text to be blue. To accomplish that, you'd edit the preview.html template and add a style attribute to the preview paragraph like this:

<p class="question-preview" style="color:blue;">

Tweaking many elements. Congrats, you've officially customized your CSS! No big deal, right? But what if you wanted all the text on all your FAQ pages to be blue? No sweat. You can edit the base.html template to add CSS at the bottom of the head element that looks like this:

<style type="text/css">
  body { color: blue; }
</style>


Now you have two CSS tools in your belt along with an awesome theme. Next time, we'll continue talking CSS and reveal even more theme options.  Because 17 isn't near enough, right? :-)

Have suggestions or ideas for the FAQs on FAQs series? Want to get your own FAQ site up and running? Need to import existing content into your FAQ? E-mail us.

Missed a previous installment of FAQs on FAQs? Here are some quick links to help you catch up: real-time chat and e-mail contact options, mobile-specific view for patrons browsing on smartphones, adding content to your knowledge base, and customizing answer previews.

No comments: