FAQs on FAQs: Fabulous Footers

Welcome back to FAQs on FAQs, a series designed to help you get the most out of your LibraryH3lp-powered FAQ. Last time, we showed how to reuse existing headers from your library's website within your FAQ. So it is only fair that we cover custom footers in this installment!

As with customizing headers, setting up a custom footer requires a little bit of template editing.

1) Add content. Place the desired content within the footer.html template. Or if you wish the footer to span the entire width of your page, comment out the footer block within the base.html template using HTML comments (as you did with your header in Step 1 of the previous installment) and place the desired content after the main "container" div.

2) Adjust styling. As with custom headers, your strategy for including the styling for your header elements will vary since there are several ways to handle CSS. Please refer to Step 2 of the previous installment for styling tips and tricks or e-mail support if you need any help sorting things out.

Advanced customization: Sticky Footers. If you want to be extra fancy, you can opt to make your footer sticky. A sticky footer always remains at the bottom of a page and can be attractive on your individual question pages where content may be short and your footer appears higher on the page. If you'd like a sticky footer for your FAQ, check out the "how to" in our online docs.

Want to get your own LibraryH3lp-powered FAQ site up and running? Need to import content from an existing knowledge base 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, customizing answer previews, style your FAQ with themes, bring your own theme part 1 and part 2, reusing existing headers.

FAQs on FAQs: Reusing an existing website header

Welcome back to FAQs on FAQs, a series designed to help you get the most out of your LibraryH3lp-powered FAQ. As previously promised, this installment shows you how to reuse an existing website header within your FAQ. Never fear! The process is straightforward and requires just a bit of template editing.

Reusing a header within your FAQ is a simple yet effective way to blend the FAQ's look and feel seamlessly into your library's existing website. And the results can be very striking such as with Lovejoy Library at Southern Illinois University Edwardsville.

Let's get started, shall we? After logging into your FAQ site, you'll want to edit your base.html template. And then follow these steps:

1) Comment out the header block using HTML comments. This will look like:

<!--
  {% block header %}
    <div class="navbar">
      <div class="navbar-inner">
        {% include "header.html" %}
      </div>
    </div>
  {% endblock %}
-->

2) Add your header. Just below the commented out header block, add the HTML for your header.

The trickiest part after adding in your header's HTML is getting the styling correct. Your strategy for including the styling for your header elements will vary since there are several ways to handle CSS.

1. If the CSS is already included directly within each element's style attribute, then you are done.
2. If the CSS is part of your website's head element, you can copy those styles over to your FAQ's head element.
3. If the CSS for the header is contained within a CSS file, then you can include that file within your FAQ like this:
   
   <link rel="stylesheet" href="http://your.library.edu/header.css"/>

One note on option 3 above. If the CSS file includes styling that affects elements outside your custom header, the rest of your FAQ's styling will also be affected. If you run into this scenario, you could ask your webmaster to break up the CSS files or even fall back to option 2 cutting and pasting into your head element what you need. If you need any help straightening this out, please don't hesitate to e-mail us; we've already helped several libraries in this situation.

3) Plug in the FAQ edit controls. Add this just below your custom header HTML:

<!-- FAQ login/logout and edit controls -->
<div class="navbar-inner" style="margin: 0; border:none; padding:0; background:none; min-height:20px; border-radius: none; box-shadow:none;"></div>

That's it! You're done. And since we've covered headers in this installment, we might as well move on to footers for our next installment.

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 options, mobile-specific view for patrons browsing on smartphones, adding content to your knowledge base, customizing answer previews, style your FAQ with themes, bring your own theme part 1 and part 2.

Building grassroots collaboratives with LibraryH3lp

Dr. S. R. Ranganathan proposed in 1931 that the library is a growing organism.  And librarians are a collaborative bunch, frequently corresponding with colleagues and building shared collections and services.  With hundreds of libraries using LibraryH3lp every day, there is a fantastic opportunity for collaboration and leveraging cross-institutional expertise to grow your virtual reference service.

Because LibraryH3lp was initially created to serve an after-hours cooperative chat and IM service for students at the University of North Carolina-Chapel Hill, Duke University, and North Carolina State University, the capability to collaborate has been built into LibraryH3lp from the very beginning. And because one of our core values is flexibility, collaboration comes in many flavors.

All options below are available even though you and your partnering institution maintain completely separate LibraryH3lp subscriptions. In this way, you can leverage your existing partnerships -- or forge new partnerships -- to extend your virtual reference service wherever possible while maintaining your own local service.

1) Chat with colleagues at other institutions.  You can buddy and directly chat with any other LibraryH3lp user (or queue) in the world.  Actually, they don't even have to use LibraryH3lp!  If your colleagues use chat through Gmail  or other XMPP-based services, you can buddy them to your LibraryH3lp account.  This is easy to do within your chat client; please refer to our FAQ for details.

2) Transfer patrons between institutions.  If your partner institution also uses LibraryH3lp and you often cross-refer patrons, we can can set up targeted cross-institution transfers for any or all of your queues.  To invoke another of Ranganathan's laws, save the time of your patrons! They won't need to start their questions over from scratch if you can immediately transfer them to the appropriate place, transcript in hand.

3) Staff a collaborative service using any service model or work flow you'd like. Perhaps you want something very simple, where all participating librarians receive all incoming questions on designated queues and the first librarian to respond wins the chat. Or maybe you are looking for something more nuanced, such as a "home team first" service rollover model.  With service rollover, you can serve your own patrons if you're available in the interest of the best, most expedient service possible; otherwise, your patrons are assisted by your trusted colleagues at your partner institution.

How much extra does this stuff cost?  Not one penny.  Everything is included in your paid annual subscription.  That's right, we'll wire up your shiny new collaborative service up for free.

How do I get started?  Contact support@libraryh3lp.com and we'll do the necessary under-the-hood configuration needed to get your LibraryH3lp account talking to your partner institution's account.  We'll need to know your service goals (transfer only or shared, collaborative staffing), and we'll also need to hear from your partner institution(s) so that we can make sure all parties understand the new service model.

What if I'm interested in a partnership, but have no partner? A good place to start your quest for like minded librarians is the LibraryH3lp Google group.

Quick relevant plug.  Would you like to extend your virtual reference service hours, but you don't have a willing partner for staffing longer hours the grassroots way?  You can get after-hours coverage through ChatStaff!

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.¹

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 options, mobile-specific view for patrons browsing on smartphones, adding content to your knowledge base, customizing answer previews, style your FAQ with themes, bring your own theme (part 1).

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

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

Welcome back to FAQs on FAQs, a series designed to help you get the most out of your LibraryH3lp-powered FAQ. Last time, we covered the 17 pre-configured themes available for your FAQ. In this installment, we reveal even more possibilities and some under-the-hood goodies.

Built with Bootstrap. LibraryH3lp-powered FAQs are built on top of Bootstrap, which is a popular and powerful front-end framework for web development. That means that you get a lot of mileage right out of the box.

• 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.

You've already seen all this in action on your FAQ site. And you can take advantage of everything Bootstrap has to offer when customizing your FAQ.

Icons galore. Icons are one key area where we've purposely diverged from Bootstrap. Bootstrap icons are nice, but Font Awesome icons are awesomer. All 249 Font Awesome icons are at your disposal. You've already seen a few of these in action in the right sidebar template. And one really cool thing about font-based icons - they automatically change color with your theme unlike images. Go through the themes again, notice how the icon coloring changes to match the text?

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

Next time we'll go into the specifics of how you can leverage Bootstrap, Font Awesome, and custom themes on your FAQ. 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, customizing answer previews, and style your FAQ with themes.

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.

FAQs on FAQs: Customizing answer previews

Welcome back to FAQs on FAQs, a series designed to help you get the most out of your LibraryH3lp-powered FAQ. Last time, we talked about populating your FAQ with content. This time, we're covering a couple customizations that control how your patrons or colleagues (for internal FAQs) see the content you've just added.

Example list of questions with answer previews

The index of your FAQ lists all your questions along with a preview of the answer content sorted by most viewed. Simply scroll down the page to view them all.

Shorten the preview. By default, answer previews are limited to 400 characters and shown in plain text (no HTML markup).

But say you want shorter previews of just 200 characters. You can't go longer, but you can choose anything smaller than 400.

Previews are easily shortened with a bit of template customization. Edit the preview.html template and add a filter after the question.preview variable so it looks like this:

{{ question.preview|truncatechars:200 }}...

Use HTML instead of plain text. Or maybe you don't want plain text for your answer previews; maybe you want your previews to contain styled HTML content. This was a recent topic in the LibraryH3lp Google group and we wanted to share the solution here. Again, this can be done with a bit of editing within the preview.html template. You'll want to make this:

<p class="question-preview">
  {{ question.preview }}...
  <a class="question-popover pull-right" rel="popover" data-original-title="Answer" data-load="/questions/{{ question.id }}/answer" href="/questions/{{ question.id }}">read more <i class="icon-forward"></i></a>
</p>

look like this:

<p class="question-preview" style="overflow:hidden; height:75px;">
  {{ question.answer|safe }}
</p>
<a class="question-popover pull-right" rel="popover" data-original-title="Answer" data-load="/questions/{{ question.id }}/answer" href="/questions/{{ question.id }}">read more <i class="icon-forward"></i></a>

The safe filter for the question.answer variable allows for HTML markup. And the style on the paragraph controls the height of the area allowed for your answer, ensuring any extra content past the specified height is hidden.

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.

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? Let us know!