libraryh3lp logo

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

Tuesday, April 23, 2013

FAQs on FAQs: BYOT - Bring Your Own Theme (part 2)

Welcome back to FAQs on FAQs, a series designed to help you get the most out of your LibraryH3lp-powered FAQ. Last time, we revealed literally hundreds of possibilities for your FAQ site's theme and also covered some of the under-the-hood goodies like icons that automatically change color based on your theme. In this installment, we'll show you how to plug in a third-party Bootstrap theme and how to harness the power of FontAwesome icons.

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/{{ 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]-->


Using FontAwesome icons. FontAwesome makes it super simple to embed tons of icons within your FAQ site. You can place icons anywhere you'd like by creating an i element with a class name which is the same as the icon's name.

E.g. <i class="icon-comments-alt"></i>


In fact, you can do all sorts of things with these icons by adding classes to any i element...
  1. Control size with icon-large, icon-2x, icon-3x, or icon-4x
  2. Add borders with icon-border
  3. Replace list bullets.  Looks like this...
    <ul class="icons">
      <li><i class="icon-ok"></i> Lists</li>
    </ul>
  4. Animate with icon-spin.1
So, here's how you'd create a large, bordered book icon that spins:
<i class="icon-book icon-large icon-border icon-spin"></i>

In the next installment of FAQs on FAQs, we'll show you how make the header for your FAQ site match your library's existing website. Want to get your own LibraryH3lp-powered 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 optionsmobile-specific view for patrons browsing on smartphonesadding content to your knowledge basecustomizing answer previews, style your FAQ with themes, bring your own theme (part 1).

1 Works best with icon-spinner and icon-refresh.

No comments: