Custom LibGuides Page Layouts, Terminology, and CSS

As you probably figured out from my last post, it’s been a Libguides kind of summer around here. We updated all our links to our catalog, got things ready to publish the Libguides databases list rather than our old other-CMS databases list, changed all internal links to database lists, migrated from WorldCat on FirstSearch to WorldCat Discovery links, and did the annual (painful) clean-up of the assets inventory (merging duplicate assets, deleting un-mapped assets, fixing wonky assets…).

For me the most fun part, though, was updating the custom page layouts, custom terminology, and custom CSS. And I thought I’d share my work in case it’s useful to others.

Custom Page Layouts

Under Admin > Look & Feel > Page Layout, I’ve customized several of our page types. If you want the code for these just let me know and I’ll share.

Guide pages now don’t display that tab name after the Guide name, plus various small tweaks.

We don’t use the system-generated homepage and instead made a guide to use as a custom home page, entering its URL into the redirect URL spot under “Homepage boxes/Redirect.”

For Subject Pages, I flipped the order of the tabs so that people are presented first with useful databases for the topic and then with useful guides for the topic. And I completely hid the tab for blogs because we don’t have any of those and don’t plan to.

For Database A-Z pages, I changed things up so that our QuestionPoint chat widget could sit in the upper right-hand corner, and to hide elements we didn’t want.

Custom Terminology

I’d thought this was only to set the system language, like “English,” but no, there’s a whole section where you can change system-generated labels for things. Go to Admin > Look & Feel > Language Options, and then click on the Language Customization section. Behold, a whole trove of system language that you can tweak to match your local terminology.

Custom CSS

Here’s my custom CSS as of July 2017. You can feel free to take or modify whatever you like from my style. (If you’ve never done this before, just copy and paste everything in my text document into the code box in Libguides under Admin > Look & Feel > Custom JS/CSS and then delete bits or tinker with bits as you like. I use w3schools with wild abandon as I cobble together my amateur CSS.)

My guiding principles

  • Make it so that the librarians can let the CSS do most of the formatting work for them.
  • Clean, uniform looking lists of databases, assets, system-generated lists (widgets), etc, so that no matter how a librarian decides to add pointers in their guides, things will look relatively uniform.
  • Allow for the flexibility that our librarians really value. We value uniformity when that helps the users and when it helps us re-use each other’s assets, but we value the ability to make guides work for a variety of contexts and not tie one librarian to another librarian’s style (though I’m the CSS overlord, so my style is a little more equal than other people’s styles, I guess).
  • This is also why we have a Style Sheet for librarians who create guides, with the idea that the more specialized your work, the more you can do whatever you want, but if you’re doing stuff that others might want to pull into their own guides, some uniformity is useful. (It’s also a handy place to dump little “how to do this complicated thing” tutorials.)

What my custom style sheet does:

Since the Libguides CSS editor doesn’t seem to allow me to comment out my code, here’s some narration about what my code does.

  • First (from the line starting at “body” to the line starting at “li”), I lay down some ground rules for fonts and colors, especially changing links to be bolded rather than underlined, which worked better in our style.
  • The next several lines make the various kinds of things you can put into a box in libguides conform to the same style rules (so that book elements look similar to database elements or link elements, etc), and also hides some elements that we considered less necessary and more apt to contribute to clutter.
    • Removes bullet points and fiddles with spacing around asset lists and system-generated lists so that they’re all uniform.
    • Unbolds the names of guide owners under guides linked using the “guide list” feature in the add/reorder dropdown.
    • Makes book call numbers italicized
    • Hides ISBNs and publication dates in Book assets
    • Hides “last updated date” and number of views from “guide list” links.
  • The next section deals with the layout of some of the most common elements on research guides, removing shadows from boxes and setting fonts and basic styling for tabs and boxes.
  • The next section governs headings and block quotes – very basic stuff
  • Then comes four lines that clean up the Databases A-Z list, hiding the “share” buttons on database lists and hiding both the automatic search box that appears throughout Libguides and the “search within the databases a-z list” search box. This is because we have YEARS of data from our old cms showing that if there’s a search box on a page that lists databases, people enter search terms into it that make it clear that they think they’re searching within the databases. If they want to find a particular database, they use control-F on the web page instead. There was also an interesting talk at this year’s ACRL where people used eye-tracking software and found that people can’t help themselves — they’re drawn to search boxes. And if there are extra search boxes on the page it’ll just confuse the issue.
  • The .dont-break-out line in the CSS is a thing that librarians can employ if they need to display a very long URL and they want to make sure it won’t bleed out of its box, particularly on smaller screens. I didn’t apply it to the system as a whole because I’m not quite sure what all it’ll mess up, but on our Zotero guide I have to make it easy for people to copy and paste our OpenURL resolver link, and the thing is ridiculously long, and this was the only way to force it to wrap in Chrome. So in a Rich Text content item I wrapped the URL in a div tag that called this special class, thusly:
    And now even in Chrome at very narrow browser widths the URL wraps neatly onto new lines.
  • The remainder of the style sheet changes the way that image gallery boxes display, making things simple and clean, and usually even readable if there’s caption text.

So there you have it. That’s what I’ve been up to in the Look & Feel department this summer.

Leave a Reply