Improve Usability for Tabs in LibGuides

Improve usability of tabs in LibGuides by changing the background of the active tab to match the background of the tab’s content div.

The standard implementation of tabs in LibGuides sets the background of the tabs and the tabs’ content divs to the same color. Unless you set a header (admittedly redundant in many instances) within each tab, it’s difficult for users to know which tab is active without reading/parsing the content itself. Improving wayfinding is easy, however. Simply add the following CSS declaration to your local or system-wide LibGuides style sheet.

<code>
<style type="text/css">
     
.ui-state-active a, 
.ui-state-active a:link, 
.ui-state-active a:visited {
     background-color: #ffffff;
     border-radius: 4px 4px 0px 0px;
     outline:none;
}

</style>
</code>

This simple change will transform your tabs from impediments which increase users’ cognitive load to successful wayfinding devices which decrease it. Note: Remember to adjust the background-color property of your tab to match the background color of the tab content div for your own LibGuides. Ours were white—accordingly, we assigned the hex value of #FFFFFF.

before_after

* Be careful when working in the Custom CSS/JS windows. Certain syntax errors can cause the Blue Screen of Death and lock up your guide!
Share Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInShare on TumblrEmail this to someone