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" />