LibGuides customization tutorial + CSS template

October 30, 2013

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

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.