How can I customize the look and feel of my FAQ site?

 

LibraryH3lp-powered FAQs are built on top of Bootstrap 2, which is a popular and powerful front-end framework for web development. So you get a lot of mileage right out of the box and can take advantage of everything Bootstrap has to offer when customizing your FAQ:

• Scaffolding supporting grids, layouts, and responsive design.
• Attractive typography and styling of basic HTML elements and components.
• JavaScript plugins for adding dynamic elements such as tooltips and popovers.

Theming

Built-in themes

The easiest way to change the appearance of your FAQ is to select a theme. Chances are that one of the themes will blend nicely with your existing color scheme.

3rd party themes

Because Bootstrap is so popular, there are tons of people creating and selling themes for reasonable prices or even for free. So if one of the 18 pre-configured themes doesn't fit the bill, you have literally hundreds of other pre-made choices. Or you can even create your own.

Plugging in a 3rd party Bootstrap theme is easily accomplished with a bit of template editing. You'll need to edit your base.html template and look for this line within the head element:

<link rel="stylesheet" href="/css/themes/{{ site.data.vars.theme }}/faq.css"/>

You'll replace that line with two lines that look like this:

<link rel="stylesheet" href="/css/faq.css"/>
<link rel="stylesheet" href="http://your.server.edu/theme.css"/>

The second stylesheet's href attribute will of course need to be set to reference your custom Bootstrap theme. Easy peasy, right?

One minor complication that you might run into surrounds Bootstrap icons Vs. FontAwesome icons. Chances are that any third-party Bootstrap theme you elect to use will automatically include Bootstrap icons. If there is an easy way to exclude those Bootstrap icons from your theme, then we recommend you do so in preference to FontAwesome. If that isn't possible, no worries, but you'll want to remove these lines in the head element of the base.html template:

<link rel="stylesheet" href="/css/font-awesome.min.css"/>
<!--[if IE 7]>
  <link rel="stylesheet" href="/css/font-awesome-ie7.min.css"/>
<![endif]-->

---

CSS Tips

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 CSS, or cascading style sheets, the short version is that CSS separates the presentation from the content of a web page. You can see CSS in action with each of the FAQ themes; the look and feel changes while content remains the same.

CSS on 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;">

CSS for many elements

Now, 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>

Certainly, this is not an exhaustive list of all the things you can do with CSS. But hopefully, these basics will help get you started.

FAQ URL: