Custom Header/Footer

Access from the Admin Console

Location: Site > Custom Configurations > Custom Header/Footer

Overview

You can customize the appearance of the headers and footers for your AnswerHub community.

You can perform the following actions in the Custom Header/Footer Page:

  • Edit Header and Footer Content
  • Change How Links Display in the AnswerHub Footer
  • Change the Background Color of an AnswerHub Footer
  • Replace the AnswerHub Logo in the Footer with Text

Edit Header and Footer Content

HEADER

  1. Head Content: Enter either HTML, Markdown, or Freemarker information in the text field.

📘

NOTE:

The Head content text field will accept both, code that affects your entire website, and code that only affects the header of your site.

  1. Header Content: Enter either HTML, Markdown, or Freemarker information in the text field.
  2. Select the appropriate Header content type from the drop-down menu:
  • HTML
  • Markdown
  • Freemarker

FOOTER

  1. Footer Content: Enter either HTML, Markdown, or Freemarker information in the text field
  2. Select the appropriate Footer content type from the drop-down menu:
  • HTML
  • Markdown
  • Freemarker
  1. Click the SAVE CHANGES button.

A successful save will result in a green bar at the top of the page that reads "Custom Header/Footer content saved successfully."

Change How Links Display in the AnswerHub Footer

  1. Enter the following information in the Footer Content Field:
<a href="/page/about.html">About</a>
<span class="link-seperator"> |</span>
<a href="page/faq.html">FAQ</a>
<span class="link-seperator"> |</span>
<a href="page/privacy.html">Privacy</a>
<span class="link-seperator"> |</span>
<a href="/contact.html">Contact</a>
  1. Select HTML from the drop-down menu for Footer Content Type.
  2. Click the SAVE CHANGES button.
    A successful save will result in a green bar at the top of the page that reads "Custom header/footer content saved successfully."

To see your changes on the site, select the BACK TO SITE button in the top right-hand corner of your Admin dashboard.

Change the Background Color of an AnswerHub Footer

  1. Enter the following styling information in the Footer Content Field:
<style>
#bottom .extra-inner {
  background: #888 none repeat scroll 0 0 
} 
</style>
  1. Select HTML from the drop-down menu for Footer Content Type.
  2. Click the SAVE CHANGES button.
    A successful save will result in a green bar at the top of the page that reads "Custom header/footer content saved successfully."

The style change will result in a footer background with a lighter gray color. To select a different color, you can look through different hex codes and swap it out with the #888 above.

To see your changes on the site, select the BACK TO SITE button in the top right-hand corner of your Admin dashboard.

Replace the AnswerHub Logo in the Footer with Text

Rather than the logo, some users prefer the text-based link, "Powered by AnswerHub."

To replace the AnswerHub logo in the footer with the linked text:

  1. Enter the following information in the Footer Content field:
<div class="row">
  <div class="span12 text-center">
    <ul class="inline">
      <li><a href="https://devada.com/answerhub/" target="_blank">Powered by AnswerHub</a></li>
    </ul>
  </div>
</div>
  1. Select HTML from the drop-down menu for Footer Content Type.
  2. Click the SAVE CHANGES button.
    A successful save will result in a green bar at the top of the page that reads "Custom header/footer content saved successfully."

To see your changes on the site, click the BACK TO SITE button in the top right-hand corner of your Admin dashboard.


What’s Next