Customize an FAQ group's look and feel settings

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 () 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, so please keep the following in mind:
      • 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.
      • Important: 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

Related Articles