Adding custom JavaScript and CSS code to a guide

If you have LibGuides CMS, then you have the ability to add custom Javascript (JS) and CSS code to an individual guide. This can be helpful if you want to customize the look & feel of one guide, without affecting any others in your system.

If your library has not upgraded to CMS, then you can only add custom JS & CSS code at the system level, under Admin > Look & Feel > Custom JS/CSS. (Interested in upgrading? Contact our Springy Sales Team for more info!)

 CAUTION: Please read before adding custom 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 2,000 characters. Code in excess of this limit will be truncated, which can break the functionality of your page 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 guide's custom JS/CSS code instead.
    • Or, you can just add your code directly to Admin > Look & Feel > Custom JS/CSS, which has a 65,000 character limit.
    • If your guide has been assigned to a group (CMS only), you could add the code to your group's custom JS/CSS, as well.
  • 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 to a guide

  1. While editing your guide, click on the Guide Layout () button.
  2. Select Guide Custom JS/CSS from the dropdown.
  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.
 Something go awry with your custom code? If you are unable to edit your guide after saving your custom code, please contact the Springy Support Team and we'll remove it for you. 

Selecting Guide Custom JS/CSS from the Guide Layout menu

Adding custom JavaScript and CSS code 

Related Articles