Customizing the Look & Feel of LibGuides 

Hello LibGuides admins. This guide will detail the steps for customizing the look and feel of your LibGuides system. These tips go beyond the basic customization so some technical/html programming skills are useful if you are going to embark down this path.

As always, please let us know if you have any questions by emailing Springshare support. 

When you upload a custom banner image for your LibGuides system, this image automatically gets a map  attribute called "headermap". So, to associate a map with your banner, simply define the map called headermap in the "Custom Header Code" section of the system wide customization screen.

For example, check out a really neat banner/imagemap for Fort Lewis College LibGuides - http://subjectguides.fortlewis.edu

In order to make it happen, this is the code they entered in the "Custom Header Code" section.

Custom Footer section of the system-wide customization enables you to put custom wording in the footer of every page in your LibGuides. This can be handy for things like custom statistics counters, copyright statement, legal information, or whatever your standard institutional guidelines for footers may be.

For example, check out the footer at the NMSU LibGuides pages - http://nmsu.libguides.com/.

This is the code they used to insert the custom footer.

Want to have a custom browser favicon, like Dartmouth LibGuides or MIT LibGuides (note that this only works in FireFox)?

Here are the steps:

1. Place a favicon on one of your publicly-accessible webserver (for example, MIT placed theirs at http://libraries.mit.edu/favicon.ico)
2. In the "Custom Header Code" section of the customization screen, put the following line (make sure you replace the MIT reference with your own url) <link rel="shortcut icon" href="http://libraries.mit.edu/favicon.ico" type="image/vnd.microsoft.icon" />

We offer about a dozen different colors in terms of customization for tabs on LibGuides pages. Since the tabs are images, we can not create custom images for every client, but with a bit of css/html hacking, you can create your own tab colors. Keep in mind that if you do this, it will override tab colors for *every* guide. In other words, the tab colors customization options will not work, and every guide will have the tab colors you defined.

For example, check out the custom tab colors that Dartmouth College library folks created for their LibGuides  - http://libguides.dartmouth.edu/content.php?pid=5935&sid=41390. Notice the green-ish colored tabs which are not part of the standard LibGuides palette. Here is how to do it:

1. First, you need to download the current LibGuides tab images, to see the exact dimensions of the gif files. http://lgimages.s3.amazonaws.com/tabrightI-blueshade.gif and http://lgimages.s3.amazonaws.com/tableftI-blueshade.gif
2. Create your own colored tabs using the above images as template. Image dimensions must be the same as the originals above.
3. After you create the tab images in your desired colors, place them on a publicly-available web server at your institution.
4. Edit the Custom Header Code to override #tabsI css class. Use the example from Dartmouth below as a reference. Make sure you replace the URL of the tab images with your own url (note the code inside the red area).

 

 

Dartmouth College LibGuides did a really great job with customization of their system, hence we use them a lot in our examples. For example, notice how they have custom links and visited links color (it's not a standard blue color for links). Making your own custom link color is simple.

1. Go to Main Admin screen and select System Settings -> System-wide customization
2. In the "Custom Header Code" insert the following snippet:
   <style type="text/css" media="screen" >
   a:link, a:visited {color: #YOURHEXCODE;}
   .dropmenudiv a:hover {color: #fefefe; background-color:#YOURHEXCODE;}
   </style>

Check out Yale Nursing Library LibGuides -  http://guides.nursinglibrary.yale.edu/. Notice the cool blue background? You can achieve a similar effect by overring the "body" css property. In the "Custom Header Code" section of the system-wide customization, define the following (make sure you replace the URL of the yale image with your own):

<style> body {
background: #YOURHEXCODE url(http://www.med.yale.edu/library/resources/backgrounds/library_home_bg.gif) no-repeat;
min-height: 100%; height: 100%;
background-color: #YOURHEXCODE;
margin:0;
padding:0;
height: 100%;
} </style>

These are but a few examples of the look and feel customization that is possible in LibGuides. We designed the system with customization in mind, and with a little bit of html/css programming knowledge you can achieve a unique and very customized look of your system. We are here to help you along the way so if you have any questions about this, or any other customization issues, please do let us know. Email us at support {at} springshare dot com and we'll help you make it happen.

Also, if you did some really neat customization of your system and would like us to feature it and share your work with the community, please let us know - We'll be glad to feature your work and ideas on this guide.