Configure a custom header and footer

You can use HTML, CSS, and JavaScript to create a custom header and footer.

You must have a Vega Discover Premium or Consortia license to use this feature.

The following default components are available to add to your custom header:

  • Bookmark button (opens and closes My Bookshelf)

<vega-toggle-bookmarks-button></vega-toggle-bookmarks-button>

  • Help button

<vega-help-button></vega-help-button>

  • Language list

<vega-language-switcher></vega-language-switcher>

  • Library info button

<vega-library-info-button></vega-library-info-button>

  • Log in/log out button

<vega-login-button></vega-login-button>

  • One Trust cookie

<vega-cookie-settings></vega-cookie-settings>

Notes:

  • If you don’t provide the default components above, you won’t be able to switch languages or log out of your customized Vega Discover.
  • If you make a mistake in your configuration and can’t switch to another language or log out of Vega Discover, you can temporarily disable your custom code in the Vega administration system and refresh your browser to go back to the basic Vega header configuration.
  • Innovative recommends that you document your code.

To configure a custom header and footer

  1. From the Settings menu, select Page Customizations > Header and Footer.
  2. On the Header and Footer page, select the Configure button that corresponds to the language that you want to configure a custom header or footer for.

    3. The Edit Config page opens.

  3. If you want to upload a logo to your site, do the following:

    1. Select Upload logo.

    2. Browse to select an image.

    3. Select Open.

  4. If you want to upload a custom favicon, do the following:

    1. Select Upload Favicon.

    2. Browse to select an image.

    3. Select Open.

  5. In the Library Name box, enter the name of the library.
  6. Under Link to Library Privacy Policy, enter a display name for the link and a URL to the policy.
  7. If you want to add a custom link, do the following:

    1. In the Custom Link section, enter the display text for the link.

    2. Enter a URL.

  8. Do one of the following:
    • If you want the header to remain fixed when patrons scroll on a page, select Fixed Header.
    • If you want the header to scroll with the content, clear the Fixed Header checkbox.
  9. Select one or both of the following:
    • Use Customized Header Code
    • Use Customized Footer Code

    A code input box opens for each of the options you select.

  10. Enter your custom code.
  11. To preview your code, select Preview.

    12. Each preview URL includes a unique configuration ID, so you can share the preview URL with others.

  12. Select Save.

To disable a custom header or footer

  • On the Edit Config page, clear the checkbox for the header or footer that you want to disable.

See also