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

FAQs on FAQs: Populating your knowledge base

<p>Welcome to the third installment of FAQs on FAQs, a series designed to help you get the most out of your FAQ. We've already covered the built-in features for your FAQ - <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> plus the <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>.  Let's switch gears  a bit and talk content. After all, what use is a knowledge base without content?<br /><div><br /></div><div>Questions (and associated answers) form the heart of your FAQ site. Every aspect of your FAQ site is already dedicated to helping patrons locate the best answer to their questions. So your job is simply to add content. The more content you provide, the better chance your patrons have for success.</div><div><br /></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2BLeFykCiJOU-3tMAeyiTPyNwiMwON3NTrVeCWus5_PAFSVPlhKM-dbsuSpCoiF0DQNlXYoSgY5T9WpjMaN1qe_rc-cYezetYiBOcSO8ur2aGNyH7tqsMkbn4GAkLDt7qGpoGZ_oj3ttV/s1600/faq-edit.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2BLeFykCiJOU-3tMAeyiTPyNwiMwON3NTrVeCWus5_PAFSVPlhKM-dbsuSpCoiF0DQNlXYoSgY5T9WpjMaN1qe_rc-cYezetYiBOcSO8ur2aGNyH7tqsMkbn4GAkLDt7qGpoGZ_oj3ttV/s320/faq-edit.png" width="320" /></a></div>Manage questions and answers directly within your FAQ site via <a href="http://docs.libraryh3lp.com/faq-questions">in-place editing</a>.<br /><br />Add questions using the Add Question button just below your search box.<br /><br />Edit/delete existing questions using the buttons on the top-right corner of each question.<br /><br />And no worries about needing to know the nitty gritty of HTML, the question editor provides a rich text interface.<br /><br />Once your FAQ site is populated with content, your patrons will be able to:<br /><br /><div><ul><li>scroll through all questions, organized by most viewed on the main page of your FAQ</li><li>click a topic in the tag cloud to scroll through all questions tagged with a particular topic</li><li>search by keyword filtered by topic in the search box at the top of every page</li></ul></div><br />Have any suggestions or ideas for the FAQs on FAQs series? Want to get your own FAQ site set up? <a href="mailto:support@libraryh3lp.com">Let us know</a>!</div></p>

Welcome to the third installment of FAQs on FAQs, a series designed to help you get the most out of your FAQ. We've already covered the ...

FAQs on FAQs: Mobile? It's in there!

<p>Welcome back to FAQs on FAQs, a series designed to help you get the most out of your FAQ site. Last time, we covered the <a href="http://libraryh3lp.blogspot.com/2013/03/faqs-on-faqs-chat-and-e-mail.html">automagic real-time chat and e-mail integrations</a> built into every FAQ site. In this installment, we keep the built-in feature ball rolling and talk mobile.<br /><div><br /></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGt3-Y8OF9dm9Ty3hnerVd6W2mbkDWBAs1hLEiTkq0i0cpnVLDKpzUJEm6UKAoUZ-_BOzUqnKmW1IcESRa16yfBsVf6APLpKo3YiJzNEbIN9DAE0LO_oCQclWvwRD_qHA6Db3ZNnhOhf83/s1600/mobile-faq.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGt3-Y8OF9dm9Ty3hnerVd6W2mbkDWBAs1hLEiTkq0i0cpnVLDKpzUJEm6UKAoUZ-_BOzUqnKmW1IcESRa16yfBsVf6APLpKo3YiJzNEbIN9DAE0LO_oCQclWvwRD_qHA6Db3ZNnhOhf83/s200/mobile-faq.png" width="181" /></a></div>Mobile patrons on a smart phone automagically see a mobile-specific view of your FAQ site rather than the default desktop view. The mobile view is built-in and works out of the box. No fancy programming required. No hours wasted fiddling. It just works.<br /><br />Your mobile FAQ has four views - Search, Topics, Browse, and Ask Us. Search provides instant search results for queries. Topics provides a list of topics showing the number of questions tagged with that topic. Browse lists all your questions. Ask Us includes a mobile chat widget and e-mail form so that patrons can contact you.<br /><br /><br />You can visit your mobile FAQ directly by appending a "/m" to your FAQ's URL.<br /><br /><ul><li>LibraryH3lp's FAQ: <a href="http://ask.libraryh3lp.com/">http://ask.libraryh3lp.com</a></li><li>LibraryH3lp's mobile FAQ: <a href="http://ask.libraryh3lp.com/m">http://ask.libraryh3lp.com/m</a> </li></ul><br />Have any suggestions for FAQs on FAQs topics? Want to get your own FAQ site going? (Remember, each LibraryH3lp trial and subscription comes with unlimited FAQs at no additional charge!) E-mail <a href="mailto:support@libraryh3lp.com" target="_blank">support</a> and we'll make it happen. :-)</div></p>

Welcome back to FAQs on FAQs, a series designed to help you get the most out of your FAQ site. Last time, we covered the automagic real-time...

FAQs on FAQs: chat and e-mail integrations

<p>Hi all! Lots of you are getting <a href="http://docs.libraryh3lp.com/faq-intro">FAQ sites</a> going. Adding questions. Customizing. Branding. We are really impressed by all the creativity!<br /><br />To help everyone get the most out of their FAQ site (or sites - plural - you get unlimited FAQs at no additional charge with every LibraryH3lp account), we'll blog regularly in the coming weeks about FAQ-related topics - including HTML, CSS, and quite possibly some JavaScript. We're calling the series FAQs on FAQs and hope you will find it a useful source of information and inspiration.<br /><br />Today's installment covers the automagic <a href="http://docs.libraryh3lp.com/faq-integrations">chat and e-mail integrations within your FAQ site</a>. Let's go!<br /><br />Each FAQ site is <a href="http://docs.libraryh3lp.com/faq-configuration">associated with a queue and an e-mail address</a>, making it easier for patrons to find answers using three communication methods. The FAQs cover pre-canned commonly asked questions. Chat gives patrons real-time access to librarians. E-mail lets patrons ask questions when your virtual reference service is unavailable or if they aren't interested in using chat.<br /><br />The automagicness happens in two key areas within your FAQ site - the "Ask Us" button and the "Not finding what you need? Contact us!" link at the bottom of every page  Both of these elements know when your queue is available, showing chat when virtual reference is available and an e-mail contact form otherwise. No fancy programming needed on your end. It just works.<br /><br />A third area, the right sidebar, includes separate links for "Real-time chat" and e-mail.  This way patrons can see at a glance whether or not the chat service is online. And they can always opt to email instead of chat.  The "Real-time chat" link can be customized any way you'd like, and it is not clickable when the chat service is offline.<br /><br />Want more than just a patron's name, e-mail address, and question when patrons use the e-mail form? Sure! <a href="http://docs.libraryh3lp.com/faq-integrations#email">Edit the email.html template and add any additional HTML form field you'd like</a>.<br /><br />Have any suggestions for the FAQs on FAQs series? Want to get your own FAQ site set up? <a href="mailto:support@libraryh3lp.com" target="_blank">E-mail support</a> and we'll make it happen. :-)</p>

Hi all! Lots of you are getting FAQ sites going. Adding questions. Customizing. Branding. We are really impressed by all the creativity! To...

Scheduled US server downtime morning of Wed, March 13

<p>We're planning for 15-20 minutes of downtime tomorrow morning (Wednesday, March 13) around 7am Eastern time for our main US server.  We are upgrading our database servers to address the root cause of the problem encountered today around 2:40pm Eastern.  We will <a href="https://twitter.com/libraryh3lp" target="_blank">tweet our progress</a> to keep everyone informed.  We are sorry for the interruption and thank everyone for their patience!</p>

We're planning for 15-20 minutes of downtime tomorrow morning (Wednesday, March 13) around 7am Eastern time for our main US server.  We ...

Important webchat client updates

<p><div>Happy Monday! We've rolled out an updated version of our native <a href="http://docs.libraryh3lp.com/clients-web.html" target="_blank">webchat client</a>.  This release includes significant improvements that simplify staffing workflows and increase robustness.  Let's take a look!<br /><br /><b>Flexible queue selection dialog.</b>  Have a lot of queues?  We've placed a time-saving "Select All/None" checkbox near the top.  And if you happen to have a loooooong list of queues, you'll get a scrollbar to more easily navigate the list on a variety of screen sizes.</div><div><span style="text-align: center;"><br /></span></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGE8Zsy5MEnSsRFcgGHA5uRv8zziO2aMCS5VZEELFV464u1Bi9Nx5ylFJBwPXkvDvwD2g6Y-cAvrJ2DX2Qh-fIuaxJyeNeKBVAoEw87Daf9NI5c2IIO3E1wm8BUo4DZBkSb_yA8PBOrIM/s1600/queue-selection.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGE8Zsy5MEnSsRFcgGHA5uRv8zziO2aMCS5VZEELFV464u1Bi9Nx5ylFJBwPXkvDvwD2g6Y-cAvrJ2DX2Qh-fIuaxJyeNeKBVAoEw87Daf9NI5c2IIO3E1wm8BUo4DZBkSb_yA8PBOrIM/s1600/queue-selection.png" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">All/None checkbox on queue selection dialog.</td></tr></tbody></table><div><span style="text-align: center;"><b><br /></b></span><span style="text-align: center;"><b>New questions appear behind active conversations.</b>  New chats can't "jump to the front of the line" by hijacking typing focus from a current chat. Incoming chat windows appear behind existing chat windows.</span><br /><span style="text-align: center;"><b style="text-align: start;"><br /></b></span><span style="text-align: center;"><b style="text-align: start;">Auto-reconnect</b><span style="text-align: start;">.  The webchat client does a better job of cleanly reconnecting after brief network dropouts. </span></span><br /><span style="text-align: center;"><span style="text-align: start;"><br /></span></span></div><div><b>Attention-grabbing disconnect alerts.</b>   When network problems totally disconnect you from our server, we'll alert you with the familiar "sonar ping" sound on a 30 second loop.  And if you have <a href="http://docs.libraryh3lp.com/clients-web.html#desktop-notifications" target="_blank">Desktop Notifications</a> enabled in Firefox or Chrome, you'll also receive a visual alert in the same style that you would for an incoming chat, even if you have the webchat client minimized or hidden behind other applications.</div><div><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxXPLqnUyaClBjNgqB7-FX7djC88xMjbbzTVuuGLXUWmcaxED3Ai3ae_wBP8Pk2hYzIYU6CGT_40c0vnD8z9CeEa9gkUzYkXROKyGNUzoae04snB4ATRgqpanOZ6trQbyGc2fpV7swH4/s1600/disconnected-desktop.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxXPLqnUyaClBjNgqB7-FX7djC88xMjbbzTVuuGLXUWmcaxED3Ai3ae_wBP8Pk2hYzIYU6CGT_40c0vnD8z9CeEa9gkUzYkXROKyGNUzoae04snB4ATRgqpanOZ6trQbyGc2fpV7swH4/s1600/disconnected-desktop.png" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Desktop alert above system tray showing disconnect.</td></tr></tbody></table><div><br /></div><div><b>Character counter for SMS questions appears all the time</b>, not just when composing.  It's a bright orange 140 character countdown in the top right conversation window corner that only shows up for SMS messages.  The webchat client has had it since the beginning, but until now, it only showed up when the librarian was actively typing.  Now it is there all the time, as a <a href="http://docs.libraryh3lp.com/incoming-sms-appearance.html" target="_blank">further alert that you've got someone texting</a>, in addition to an optional special queue avatar.</div><div><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheROz1s92OCt84V1HnbgdSVH_M0awGEf3APYBAEb_mwDXfNAkDP2nhgclOLbgLJZTqE2qzB5aNCzHxbm_6Qtqq7w4I6pcf1DHpPuZqQYV7Q1TqwQ4ibBZtIqDMFfpyIkGx_TmmNOP6tpM/s1600/character-countdown.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheROz1s92OCt84V1HnbgdSVH_M0awGEf3APYBAEb_mwDXfNAkDP2nhgclOLbgLJZTqE2qzB5aNCzHxbm_6Qtqq7w4I6pcf1DHpPuZqQYV7Q1TqwQ4ibBZtIqDMFfpyIkGx_TmmNOP6tpM/s320/character-countdown.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Orange character countdown for SMS in top right corner. <br />This queue also has a special cell phone avatar for further<br />alerting that the patron is texting.</td></tr></tbody></table><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div></p>

Happy Monday! We've rolled out an updated version of our native  webchat client .  This release includes significant improvements that s...