FAQs on FAQs: Reusing an existing website header

• facebook

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:


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.