Building grassroots collaboratives with LibraryH3lp

<p><div>Dr. S. R. Ranganathan proposed in 1931 that <a href="http://en.wikipedia.org/wiki/Five_laws_of_library_science">the library is a growing organism</a>.  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. <br /><br />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 <a href="http://journal.code4lib.org/articles/107">very beginning</a>. And because one of our <a href="http://libraryh3lp.com/why">core values</a> is flexibility, collaboration comes in many flavors.<br /><br />All options below are available <i>even though you and your partnering institution maintain completely separate LibraryH3lp subscriptions</i>. 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.<br /><b><br /></b><b>1) Chat with colleagues at other institutions.</b>  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 <a href="http://ask.libraryh3lp.com/questions/2878">our FAQ for details</a>.<br /><b><br /></b><b>2) Transfer patrons between institutions.  </b>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.<br /><b><br /></b><b>3) Staff a collaborative service</b> 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<b> </b>"home team first" <a href="http://docs.libraryh3lp.com/collaborations-service-rollover.html">service rollover model</a><b>.</b>  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.<br /><b><br /></b><b>How much extra does this stuff cost?</b>  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.<br /><b><br /></b><b>How do I get started?</b>  Contact <a href="mailto:support@libraryh3lp.com">support@libraryh3lp.com</a> 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.<br /><b><br /></b><b>What if I'm interested in a partnership, but have no partner?</b> A good place to start your quest for like minded librarians is the <a href="http://groups.google.com/group/libraryh3lp/">LibraryH3lp Google group</a>.<br /><b><br /></b><b>Quick relevant plug.</b>  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 <a href="http://chatstaff.us/">ChatStaff!</a></div></p>

Dr. S. R. Ranganathan proposed in 1931 that the library is a growing organism .  And librarians are a collaborative bunch, frequently corres...

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

<p>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 <a href="http://libraryh3lp.blogspot.com/2013/04/faqs-on-faqs-byot-bring-your-own-theme.html" target="_blank">hundreds of possibilities for your FAQ site's theme</a> 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.<br /><br /><b>Plugging in a 3rd party Bootstrap theme</b> is easily accomplished with a bit of <a href="http://docs.libraryh3lp.com/faq-questions" target="_blank">template editing</a>. You'll need to edit your <i>base.html</i> template and look for this line within the head element:<br /><br /><div style="text-align: left;"><code><link rel="stylesheet" href="/css/themes/{{ theme }}/faq.css"/><br /></code></div><br />You'll replace that line with two lines that look like this:<br /><br /><span style="font-family: monospace;"><link rel="stylesheet" href="/css/faq.css"/></span><br /><span style="font-family: monospace;"><link rel="stylesheet" href="http://your.server.edu/theme.css"/></span><br /><br />The second stylesheet's href attribute will of course need to be set to reference your custom Bootstrap theme. Easy peasy, right?<br /><br />One minor complication that you might run into surrounds <a href="http://twitter.github.io/bootstrap/base-css.html#icons" target="_blank">Bootstrap icons</a> Vs. <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome icons</a>. 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 <i>base.html</i> template:<br /><br /><code><link rel="stylesheet" href="/css/font-awesome.min.css"/><br /><!--[if IE 7]><br />  <link rel="stylesheet" href="/css/font-awesome-ie7.min.css"/><br /><![endif]--><br /></code><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMwpBbHM8O_wt2jn18AR9cOGVV_xR81Yw8n44X6Hb2IUewtTX1gEMr3rbi1NXcyuMSbcFZHzZ5HqSE8XuO1-I7qMpt8qNtMZU9Erf696cXADpbXgePcp28eim56LZf-eKi7ckEiz-_4bs/s1600/Screen+shot+2013-04-23+at+2.20.01+PM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMwpBbHM8O_wt2jn18AR9cOGVV_xR81Yw8n44X6Hb2IUewtTX1gEMr3rbi1NXcyuMSbcFZHzZ5HqSE8XuO1-I7qMpt8qNtMZU9Erf696cXADpbXgePcp28eim56LZf-eKi7ckEiz-_4bs/s200/Screen+shot+2013-04-23+at+2.20.01+PM.png" width="150" /></a></div><b>Using FontAwesome icons.</b> FontAwesome makes it super simple to embed <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">tons of icons</a> within your FAQ site. You can place icons anywhere you'd like by creating an <i>i</i> element with a class name which is the same as the icon's name.<br /><br />E.g. <code><i class="icon-comments-alt"></i></code><br /><br /><br />In fact, you can do all sorts of things with these icons by adding classes to any <i>i</i> element...<br /><ol><li>Control<b> size</b> with <i>icon-large</i>, <i>icon-2x</i>, <i>icon-3x</i>, or <i>icon-4x</i></li><li>Add <b>borders</b> with <i>icon-border</i></li><li><b>Replace list bullets</b>.  Looks like this...<br /><code><ul class="icons"><br />  <li><i class="icon-ok"></i> Lists</li><br /></ul></code></li><li><b>Animate</b> with <i>icon-spin</i><span style="font-size: x-small;"><i>.</i>¹</span></li></ol><div>So, here's how you'd create a large, bordered book icon that spins:<br /><div style="text-align: center;"><code><i class="icon-book icon-large icon-border icon-spin"></i></code></div></div><div><br /></div>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? <a href="mailto:support@libraryh3lp.com" target="_blank">E-mail us</a>.<br /><div><br /></div><div>Missed a previous installment of FAQs on FAQs? Here are some quick links to help you catch up: <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-chat-and-e-mail.html" target="_blank">real-time chat and e-mail contact options</a>, <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-mobile-its-in-there.html" target="_blank">mobile-specific view for patrons browsing on smartphones</a>, <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-populating-your-knowledge.html" target="_blank">adding content to your knowledge base</a>, <a href="http://libraryh3lp.blogspot.com/2013/04/faqs-on-faqs-customizing-answer-previews.html" target="_blank">customizing answer previews</a>, <a href="http://libraryh3lp.blogspot.com/2013/04/faqs-on-faqs-style-your-faq-with-themes.html" target="_blank">style your FAQ with themes</a>, <a href="http://libraryh3lp.blogspot.com/2013/04/faqs-on-faqs-byot-bring-your-own-theme.html">bring your own theme (part 1)</a>.<br /><br />¹ Works best with icon-spinner and icon-refresh.</div></p>

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

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

<p>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 <a href="http://libraryh3lp.blogspot.com/2013/04/faqs-on-faqs-style-your-faq-with-themes.html" target="_blank">17 pre-configured themes available for your FAQ</a>. In this installment, we reveal even more possibilities and some under-the-hood goodies.<br /><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://github.com/twitter/bootstrap/blob/master/docs/assets/ico/apple-touch-icon-114-precomposed.png?raw=true" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="bootstrap" border="0" src="https://github.com/twitter/bootstrap/blob/master/docs/assets/ico/apple-touch-icon-114-precomposed.png?raw=true" title="bootstrap" /></a></div><div><b>Built with Bootstrap.</b> LibraryH3lp-powered FAQs are built on top of <a href="http://twitter.github.io/bootstrap/" target="_blank">Bootstrap</a>, 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.</div><div><ul><li><a href="http://twitter.github.io/bootstrap/scaffolding.html" target="_blank">Scaffolding</a> supporting grids, layouts, and responsive design.</li><li>Attractive typography and styling of <a href="http://twitter.github.io/bootstrap/base-css.html" target="_blank">basic HTML elements</a> and <a href="http://twitter.github.io/bootstrap/components.html" target="_blank">components</a>.</li><li><a href="http://twitter.github.io/bootstrap/javascript.html" target="_blank">JavaScript plugins</a> for adding dynamic elements such as tooltips and popovers.</li></ul></div><div>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.</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="http://drupal.org/files/project-images/fontawesome_0.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://drupal.org/files/project-images/fontawesome_0.png" width="125" /></a></div><div><b>Icons galore.</b> Icons are one key area where we've purposely diverged from Bootstrap. Bootstrap icons are nice, but <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a> 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. <a href="http://www.youtube.com/watch?feature=player_embedded&v=BC5Wi7v0NV4" target="_blank">Go through the themes again</a>, notice how the icon coloring changes to match the text?<br /><br /><b>The big reveal. Even more themes.</b> Because Bootstrap is so popular, there are tons of people <a href="https://wrapbootstrap.com/" target="_blank">creating and selling themes</a> 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 <a href="http://twitter.github.io/bootstrap/customize.html" target="_blank">create your own</a>.<br /><br />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? <a href="mailto:support@libraryh3lp.com" target="_blank">E-mail us</a>.</div><div><br /></div><div>Missed a previous installment of FAQs on FAQs? Here are some quick links to help you catch up: <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-chat-and-e-mail.html" target="_blank">real-time chat and e-mail contact options</a>, <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-mobile-its-in-there.html" target="_blank">mobile-specific view for patrons browsing on smartphones</a>, <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-populating-your-knowledge.html" target="_blank">adding content to your knowledge base</a>, <a href="http://libraryh3lp.blogspot.com/2013/04/faqs-on-faqs-customizing-answer-previews.html" target="_blank">customizing answer previews</a>, and <a href="http://libraryh3lp.blogspot.com/2013/04/faqs-on-faqs-style-your-faq-with-themes.html" target="_blank">style your FAQ with themes</a>.<br /><br /></div></p>

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

FAQs on FAQs: Style your FAQ with themes

<p><br />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 <a href="http://libraryh3lp.blogspot.com/2013/04/faqs-on-faqs-customizing-answer-previews.html">template tweaks you can make to customize answer preview content</a>. 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.<br /><br />The easiest way to change the appearance of your FAQ is to change its <a href="http://docs.libraryh3lp.com/faq-configuration#theme" target="_blank">theme</a>. The video below quickly shows each of the 17 available themes in action on the <a href="http://ask.libraryh3lp.com/" target="_blank">LibraryH3lp FAQ</a>.<br /><br /><center><iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/BC5Wi7v0NV4" width="420"></iframe></center><br />To view a particular theme on your FAQ, append a theme argument to your site's URL. E.g.,<br /><br /><div style="text-align: center;"><code>http://NAME.ask.libraryh3lp.com?theme=united</code></div><br />Chances are that one of the themes will blend nicely with your existing color scheme. Once you've selected a theme, <a href="mailto:support@libraryh3lp.com" target="_blank">shoot us an e-mail</a> 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.<br /><br />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.<br /><br /><b>Tweaking a specific element.</b> 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 <a href="http://docs.libraryh3lp.com/faq-questions" target="_blank">edit</a> the <i>preview.html</i> template and add a style attribute to the preview paragraph like this:<br /><br /><div style="text-align: center;"><div style="text-align: left;"><code><p class="question-preview" style="color:blue;"></code></div></div><br /><b>Tweaking many elements.</b> 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 <i>base.html</i> template to add CSS at the bottom of the <a href="http://www.w3schools.com/html/html_head.asp" target="_blank">head element</a> that looks like this:<br /><br /><code><style type="text/css"><br />  body { color: blue; }<br /></style></code><br /><br />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? :-)<br /><br />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? <a href="mailto:support@libraryh3lp.com" target="_blank">E-mail us</a>.<br /><div><br /></div><div>Missed a previous installment of FAQs on FAQs? Here are some quick links to help you catch up: <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-chat-and-e-mail.html">real-time chat and e-mail contact options</a>, <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-mobile-its-in-there.html">mobile-specific view for patrons browsing on smartphones</a>, <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-populating-your-knowledge.html">adding content to your knowledge base</a>, and <a href="http://libraryh3lp.blogspot.com/2013/04/faqs-on-faqs-customizing-answer-previews.html">customizing answer previews</a>.</div></p>

Welcome back to FAQs on FAQs, a series designed to help you get the most out of your LibraryH3lp-powered FAQ. Previously, we highlighted som...

FAQs on FAQs: Customizing answer previews

<p>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 <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-populating-your-knowledge.html">populating your FAQ with content</a>. 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.<br /><br /><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicp5GDtfuIRR06CLr_uIJEtP0-1D_MPbEr2EsppAP1r35WtNbUJbU-I6hb4nFrx0gxq0yoP1ZWGWq5-3zNZ73dMRGoVRh7TkeGe1gZOvpNThPzA2BPwGEFh6uAj1842YHeghTDfIdA26j9/s1600/Screen+shot+2013-03-31+at+7.01.06+PM.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicp5GDtfuIRR06CLr_uIJEtP0-1D_MPbEr2EsppAP1r35WtNbUJbU-I6hb4nFrx0gxq0yoP1ZWGWq5-3zNZ73dMRGoVRh7TkeGe1gZOvpNThPzA2BPwGEFh6uAj1842YHeghTDfIdA26j9/s320/Screen+shot+2013-03-31+at+7.01.06+PM.png" width="281" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Example list of questions with answer previews</td></tr></tbody></table>The index of your FAQ lists <i>all</i> your questions along with a preview of the answer content sorted by most viewed. Simply scroll down the page to view them all.<br /><br /><b>Shorten the preview.</b> By default, answer previews are limited to 400 characters and shown in plain text (no HTML markup).<br /><br />But say you want shorter previews of just 200 characters. You can't go longer, but you can choose anything smaller than 400.<br /><br />Previews are easily shortened with a bit of template customization. <a href="http://docs.libraryh3lp.com/faq-questions">Edit the <i>preview.html</i> template</a> and add a filter after the <i>question.preview</i> variable so it looks like this:<br /><span style="font-family: inherit; font-size: xx-small;"><br /></span><div style="text-align: left;"><span style="font-family: inherit; font-size: xx-small;">[updating syntax for question preview truncation as of October 7, 2013]</span><br /><code><span style="font-size: 0.9em;"><br /></span></code><code><span style="font-size: 0.9em;">{{ question.preview|<wbr></wbr>truncate(200) }}...</span></code></div><br /><b>Use HTML instead of plain text.</b> Or maybe you don't want plain text for your answer previews; maybe you want your previews to contain styled HTML content. <a href="https://groups.google.com/forum/?fromgroups#!topic/libraryh3lp/FnMqoUUMnNQ">This was a recent topic in the LibraryH3lp Google group</a> and we wanted to share the solution here. Again, this can be done with a bit of editing within the <i>preview.html</i> template. You'll want to make this:<br /><br /><code style="font-size: 0.9em;"><p class="question-preview"><br />  {{ question.preview }}...<br />  <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><br /></p></code><br /><br />look like this:<br /><br /><code style="font-size: 0.9em;"><p class="question-preview" style="overflow:hidden; height:75px;"><br />  {{ question.answer|safe }}<br /></p><br /><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></code><br /><br />The <i>safe</i> filter for the <i>question.answer</i> 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.<br /><span class="il"></span><br />Missed a previous installment of FAQs on FAQs? Here are some quick links to help you catch up: <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-chat-and-e-mail.html">real-time chat and e-mail contact options</a>, <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-mobile-its-in-there.html">mobile-specific view for patrons browsing on smartphones</a>, <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-populating-your-knowledge.html">adding content to your knowledge base</a>.<br /><br />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? <a href="mailto:support@libraryh3lp.com">Let us know</a>!</p>

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