Adding custom JavaScript and CSS code to a group

Group admins have the ability to add custom Javascript (JS) and CSS code to their group's Look & Feel options. This can be helpful if you want to customize the look & feel of the group's guides and public pages, without affecting pages outside of that group. To give your group a completely different look and feel from the rest of your system, you can even choose to exclude custom JS/CSS code added to the system level.

 CAUTION: Please read before adding custom code!

  • Custom code added to a group will be included on the group's homepage, as well as all guides assigned to the group.
  • 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 to a group

  1. Go to Admin > Groups.
  2. Find the group you want to customize and click on its Edit () icon in the Actions column.
  3. Click on the Custom JS/CSS Code tab.
  4. 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
  5. 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 Exclude system level JS/CSS code checkbox if you do not want your pages to include JavaScript or CSS code added to Admin > Look & Feel > Custom JS/CSS. This can help if you want your group to have a distinct look and feel from the rest of your site.
 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. 

Selecting Groups from the Admin menu

Clicking on a group's Edit icon

Editing a group's custom JS/CSS code

Related Articles