FAQ content

FAQs: Customize an FAQ group's banner, header, footer, and custom JS/CSS code

In this article

A group's Look & Feel options allow you to customize the appearance of the group's public pages. By default, each group will use the default options set under Admin > System Settings > Look & Feel. However, you can choose to exclude one or all of these options for each individual group. This can be helpful if you want a particular department, office, branch, or campus group's pages to have their own unique appearance.

For each group, you can customize the:

  • Banner image
  • Custom JS/CSS code
  • Custom HTML header code
  • Custom HTML footer code

Customizing a group's look & feel

  1. Go to Admin > FAQ Groups.
  2. Find the group your want to customize and click on its Edit Group Settings () icon in the Actions column.
  3. Under the General tab, click on the Look & Feel panel to expand it.
    1. Group Banner: select the banner you wish to display for pages in this group, then click the Save button.
      • Do not change the current group banner: this will continue to display the current banner.
      • Upload a new group banner: this will allow you to upload a new image to use as the group's banner. For best results, use an image with a width of at least 1140px.
      • Show system banner: this will display the current system banner from Admin > System Settings > Look & Feel. 
      • Show no banner at all: select this option if you do not wish to display a banner image. This is a good option if you want to use a custom HTML page header that includes its own banner or logo.
    2. Include system-level JS/CSS code on this group's pages: use this option to include or exclude the custom JS/CSS code added under Admin > System Settings > Look & Feel.
    3. Include system-level Header code on this group's pages: use this option to include or exclude the custom HTML header code added under Admin > System Settings > Look & Feel.
    4. Include system-level Footer code on this group's pages: use this option to include or exclude the custom HTML footer code added under Admin > System Settings > Look & Feel.
    5. Custom JS/CSS: this option allows you to insert custom JS and/or CSS code in all of the group's pages. Any code you add here will be inserted into each page's <head> element.

       CAUTION: Please read before adding custom code!

      • CSS code must be contained inside of <style></style> tags. Or, you can use a <link> tag to link to an external stylesheet.
      • Javascript code must be contained inside of <script></script> tags.
      • Do not insert page content, such as <p>, <div>, or <a> elements.
      • If reusing the custom JS/CSS code from your LibGuides site, keep in mind that it may not work as-is because LibAnswers uses different element IDs and class names.
      • DO NOT insert any <script> elements that attempt to load jQuery. LibAnswers already includes jQuery on every page; loading it a second time in your custom code creates a conflict in the browser, which will cause jQuery-powered elements to stop working.
    6. Custom Header: this option allows you to display a custom HTML header on all of the group's pages. If you opted to include a banner image in your group's Look & Feel options, it will display below your custom header.
      • Pro Tip: place your custom header code inside of a <div class="container"></div> element if you want it to align with the rest of the page.
    7. Custom Footer: this option allows you to display a custom HTML footer on all of the group's pages. When you add a custom footer, it will appear below the gray system footer on each page. (The system footer is what includes the "Login to LibApps" link.)
      • Pro Tip: place your custom footer code inside of a <div class="container"></div> element if you want it to align with the rest of the page.

A group's Look & Feel settings