Tag: libguides

LibGuides customization tutorial + CSS template

I posted before about the custom CSS I made for John Jay’s libguides. Here’s a more explicit breakdown of how to create and implement your own CSS (although you’re free to use the chunk of code I provided, too).

At the LACUNY Emerging Tech HTML + CSS workshop that @alevtina and I led this week, we walked through familiarizing ourselves with CSS while experimenting with customizing LibGuides. We used Adobe Dreamweaver, since it was installed on the classroom computers, but I don’t really like Dreamweaver. Typically I use oXygen XML editor ($99 academic price) to edit web code, which is useful because it color-codes tags and tells you if you’ve tried to write something invalid. TextWrangler is also a great plain text editor suitable for HTML/CSS editing (and free!).

How to use custom CSS and LibGuides

'Edit my account' page with admin status
‘Edit my account’ page with admin status
  1. Obtain admin status from whoever’s the god of libguides in your library
  2. Head to Dashboard » Admin Stuff » Look & Feel
  3. Scroll down to Code Customizations – Public Pages
  4. Plant in your custom CSS code here.
  5. You can also use custom header HTML in the next pane, if you’d rather go with that than use a Public Banner in the pane above. (I don’t recommend using both a header and banner.)

CSS template

You’ll have to get familiar with the behind-the-scenes structure of libguides, particularly the identifiers and classes they use to style specific parts of the page. I made a template below (and on Github). It’s a fill-in-the-blank CSS template with identifiers and classes you’ll probably want to change, commented with descriptions of what they are. Many aren’t listed, but you can find them using Inspect Element in Chrome/Firefox or examining a libguide’s source code.

You can test out this template by using a locally saved libguide. I made one for the workshop — you can find it in the folder 3_libguide when you download the workshop materials at lacuny.site44.com. There are a few other good examples in there, too.

<style type="text/css">

.guidetitle { /* title of the guide */
}

#guideattr { /* "Last updated" "URL" etc. */
}

#bc_libguides_login { /* link to Admin Sign In */
}

#tabsI, #tabs12 { /*tabs at top of page, below guide title, above page content*/
}

#tabsI a, #tabs12 a { /* background = outside of tabs (default border on left) */
}

#tabsI a span, #tabs12 a span { /* inside of tabs (default gradient) */
}

#current a span { /*tab of the page you're on*/
}

.dropmenudiv { /*for sub-pages (none on this sample page) */
}

.stitle { /*band below tabs, with title of page and search box*/
}

#guide_tab_title_bar_page_name { /* title of the page you're looking at (same as the tab you're on) */
}

#guide_header_title { /* contains title of guide */
}

.box_comments, .icomments { /*all references to comments */
}

.headerbox { /* headers for boxes of content*/
}

.headerbox h2 { /* title inside headers for boxes of content*/
}

.headerbox h2 a { /* specify colors of header titles, which are links */
}

.innerbox { /* content in boxes */
}

.linkdesc { /* captions beneath links */
}

</style>

Note: Springshare has said they’re rolling out a Bootstrappy LibGuides update soon. No one seems to be sure how deep the overhaul is, or if it’s just another theme. All that to say that these customizations might not last forevs.

Other redesigned LibGuides: VCU, UMich, Stanford

I’ve previously posted on the 70 lines of CSS I used to upgrade the look of John Jay’s LibGuides. They look better, but still not super great — still very LibGuidesy. We had migrated the John Jay website over to Drupal 7 because the CMS makes editing easy for all the librarians, but we have so much content on LibGuides — which get 5,000+ views per week — that it would be silly, at this point, to try migrating the content and dealing with hundreds of links to redirect. It’s a system all the librarians know well and can use with ease; students navigate them fine; and I haven’t found a module with the granular organization scheme LibGuides provides. It does take some TLC to liven up their appearance, though.

I’ve taken a look at some lovely LibGuides redesigns at VCU and UMich, as well as Stanford’s LibGuides departure.

VCU

Searching for ‘libguides’ on GitHub yields a handful of results, including this nice test design from VCU Libraries (whose homepage I’ve been admiring, too):

libguides redesign

Of note:

  • Much airier, thanks to the blank white background
  • Content is not boxed in and thus looks slicker (though could use some more padding)
  • The Apple-y tab solution looks nice up top (provided there aren’t multiple rows of tabs)
  • The type nicely arranges the content hierarchy, though within the LibGuides system there’s no getting around the fact that each page has 3 big titles (VCU / Library Research Guides / Test Redesign Guide) and at least 3 further levels of content organization (tab, box, paragraph/list).

I think they’ve done some finessing to the mobile view, too. (LibGuides currently detects browsers in order to present the mobile view automatically, making responsive design impossible.)

Their custom CSS is 320 lines long and available on GitHub.

UMich

UMich libguide Like us, University of Michigan libraries have stripped out even the mere memory of LibGuides’ gradients. Instead, they’ve opted for a really nice flat look with a restrained, Martha Stewart-approved color scheme. Still very LibGuidesy, but bearable, branded, and familiar. It’s about 220 lines of custom CSS. (If you’re looking to get inspired by any custom job on LibGuides, the custom CSS is actually just embedded at the end of the HTML header.)

Stanford

Stanford is phasing out LibGuides. Instead, the library website offers topic guides and course guides, all within the customized Drupal CMS. They have a blog post from January 2012 briefly describing the process of designing their new guides for six personas. I’m not sure if they’re using a specific module or if it’s simply a content type.

Their LibGuides are actually still online and apparently being used, but they also migrated content over. So some appear to be duplicated, and some links in the new topic guides still lead to the old LibGuides. Not sure what’s going on. (XML export?) Anyway, here’s one example:

Stanford topic guide

Instead of a line of tabs at the top, there’s a table of contents on the left, which makes more sense yet is somehow less visible. The function of the ToC links wasn’t immediately clear to me the way that skeuomorphic tabs are. On the plus side, all ‘tabs’ load at once (see source code) — so switching between them doesn’t require loading another page.

The user’s experience in the new guide template can vary widely. In exhaustive guides, the content of each tab can fast approach Wall of Text status, as in the Medieval Studies topic guide above. But others, like the Tel Aviv History guide (gosh, they get specific), offer digestible pages punctuated with images and section breaks.


One thing I haven’t touched on is the landing page for LibGuides. Ours looks a bit messy (“Display ALL the information!”), but our in usability tests, students seem to want to scan/hunt rather than click deeper into subject areas or use the search box, surprisingly. Still, should we want to tidy up, all three libraries mentioned exemplify excellent categorization and display of their guides.

Any other good examples?

Easy LibGuides makeover

PLEASE NOTE: As of 2015, this blog post is outdated! It discusses customization for LibGuides 1.0, which is no longer supported! If you have LibGuides, you should be on LibGuides 2.0, and this post is not useful to you.

I’ll be honest: I didn’t know what LibGuides were until I was well into my library & information science graduate program, and at first I thought they were pretty dorky since they looked so dated. But I’ve since come around, and overall they’re great — easy to create, easy to edit, and fairly reliable as software. The default skin could use some work, though. We recently updated the look of John Jay’s LibGuides (we call them Subject Guides) and I thought I’d show you how we did.

One LibGuide before and after (click for larger)
My LibGuide before and after (click for larger)

A more modern look for your LibGuides:

Read more