Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?

LibGuides A-Z List Filter Tweak

We noticed in testing that most folks didn't realize that the drop-down filters in the LibGuides A-Z list don't clear when you select more than one.

Default Libguides A-Z filters, one selected
Default LibGuides A-Z Filters

This can be useful, since you can do more sophisticated searches, looking for all Psychology databases with streaming videos, for instance. But folks were getting very small results sets when they were expecting something else, because they expected the Database Types filter to clear the Subject filter when they used it. Upon investigation, we found that this wasn't because they didn't like the idea of the filters working together, but simply because the selected filter wasn't noticable.

Revised Libguides A-Z filters, one selected
LibGuides A-Z Filters with two added CSS rules

I found that the problem was solved by simply inverting the colors of selected filters in the drop down. These two CSS rules do the trick. You'll probably want to change the colors to match your template. Enjoy!

/* Set the background color of selected items to inverted colors */
.chosen-container-single .chosen-single {
background-color: #069 !important;
color: #fff !important;
background: transparent;
}
/* Reset the background color of default selections to white with dark grey text */
.chosen-container-single .chosen-single.chosen-default {
background-color: #fff !important;
color: #333 !important;
}

Hi, Matt. I implemented this code into our site a while ago, but when Springshare released the latest significant update to their A-Z page, I think the class of the elements in the CSS changed, and this code doesn't work anymore. I noticed that it also doesn't work on the GVSU site like it used to. I'm wondering if you can suggest some changes to updating it for the new Springshare product? Feel free to e mail me if you have questions (ab6137@nyu.edu)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment