Page DIV ElementsMost Requested ChangesUse CSS to Customize Boxes
Custom BoxesCustom CSS
Custom Tab CodePhotoshop Tab Image TemplatesTabs --> Navigation Bar
This is the "CSS" page of the "Customizing LibGuides v1" guide.
Alternate Page for Screenreader Users
Skip to Page Navigation
Skip to Page Content

Customizing LibGuides v1   Tags: welcomelgad  

Customizing the look and feel of your LibGuides system.
Last Updated: Feb 10, 2017 URL: http://help.springshare.com/customizelg Print Guide RSS UpdatesEmail Alerts

CSS Print Page
  Search: 
 
 

Customizing the Style Sheet

There are two ways of customizing the look-and-feel via stylesheet changes:

  • overriding the default styles for certain elements, and
  • replacing them with your own style definitions.

Either way, you need to know the class names and definitions for the default styles.

If you use FireFox, the Firebug Add-on is a wonderful tool to inspect CSS elements of any page
If you use Chrome, the "Inspect Element" tool is rad
If you use Internet Explorer, use the F12 button.

 

1. Custom HEAD Code

Get to this option by heading to Admin Stuff> Look & Feel.

On the System Wide tab, scroll to the Custom JS/CSS Code box.

  • Open a STYLE tag
  • Type in your new class definitions
  • Close the STYLE tag
  • Voila, you're done!

This method is simple, but it has a drawback - it slows downloading of your LibGuides pages, since the styles need to load every time a user visits any page in your system

Which brings us to the 2nd, more effective, way of customizing styles...

 

2. Create a New Stylesheet

  • Download the current stylesheet at http://libguides.com/css/libguides.css
    • Make any changes you'd like to the CSS classes defined in the file
    • Delete any classes you don't customize (very important!)
    • Upload your customized copy to a local webserver
  • Head to Admin Stuff > Look & Feel, and scroll down the System Wide page to the Custom JS/CSS Code box.
    • Add a reference to your new stylesheet using standard CSS file include syntax

For example, if you defined all your custom styles in a file called libguides.css, and uploaded that stylesheet on one of your institution's webservers, e.g. http://www.myinst.edu/styles/libguides.css

Then, in the Custom <HEAD> section of the System-wide customization screen you should write the following:

<link rel="stylesheet" type="text/css" href="http://www.myinst.edu/styles/libguides.css" />

Description

Loading  Loading...

Tip