In This Article

Adding custom JavaScript and CSS code to your LibGuides system

Admin users have the ability to add custom Javascript (JS) and CSS code to your LibGuides Look & Feel options. This can be helpful if you want to customize the look & feel of your public pages, whether it's changing font sizes or colors, or hiding certain elements on a page, this is a powerful tool for really making your LibGuides site your own.

 CAUTION: Please read before adding custom code!

  • Custom code added to the system level will be include on all guides and public pages, such as the homepage, A-Z Database List, etc.
    • The only exception is when a group has chosen to exclude system level Custom JS/CSS code.
    • If that is enabled in the group's settings, then all pages and guides in the group will not include the system-level code.
  • LibGuides does not validate your custom code, so please double check that you've included all proper closing tags (HTML tags, brackets, quotation marks, etc.).
  • DO NOT include any <script> tags that load the jQuery JS library (e.g. some version of jquery.min.js). LibGuides already loads jQuery on every page; including it again will create a conflict, preventing jQuery-powered elements (such as the various guide option menus) from working.
  • You are limited to a maximum of 65,000 characters. Code in excess of this limit will be truncated, which can break the functionality of your pages if you save it.
    • If you have a large amount of custom code, consider adding it to a CSS file and upload it to Admin > Look & Feel > Custom JS/CSS.
    • This will generate a <link> tag you can include in your custom JS/CSS code instead.
  • ​Some external JS files may include code that conflicts with LibGuides, so we cannot guarantee compatibility with third-party JS code. If a conflict occurs, we will help to remove the code in order to restore functionality to your guide, but will not be able to modify the code to prevent the conflict.

Adding custom JS/CSS code

  1. Go to Admin > Look & Feel.
  2. Click on the Custom JS/CSS tab.
  3. In the text area, enter your custom code.
    • Place all CSS code between <style></style> tags
    • Place all JS code between <script></script> tags
    • An alert will appear if your code has exceeded the 2,000 character limit
  4. Carefully review your code to make sure you did not leave any unclosed tags, then click the Save button.
    1. Select the Do not include this code on guide edit page if you only want to apply your custom code to your public pages. This can help resolve issues where your custom code is preventing you from editing your guides.
    2. Select the Do not include Bootstrap JavaScript and CSS includes on public pages only if you are including your own versions of these files. Otherwise, your pages will lose most layout, styles, and functionality.
 Something go awry with your custom code? If you are unable to edit your guides after saving your custom code, try enabling the Do not include this code on guide edit page option to restore functionality. 

Adding Custom JS/CSS code

Related Articles

    Nav menu script