Want to build your own 24/7 FAQ knowledge base?
LibraryH3lp subscriptions include unlimited independent internal or public-facing knowledge bases.


Search the LibraryH3lp Knowledge Base

 

How do I reuse the header from my website in my FAQ?

2748 views   |   Last updated on Oct 20, 2023    customize appearance FAQ

 

Reusing a header within your FAQ is a simple yet effective way to blend the FAQ's look and feel seamlessly into your existing website.

The results can be very striking such as with Mohawk College in Ontario, Canada shown below.

Mohawk College Library/></p>

<p class= 

Never fear! The process is straightforward and requires just a bit of template editing.

1) Comment out the header block

After logging into your FAQ site, you'll want to edit your base.html template. You can use HTML comments. This will look like:

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

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

 

FAQ URL:

More Help

Search By Topic

Share this FAQ