CSS for LibGuides Authors: Customizing Tabs

The Tab & Box Options function in the Guide Layout menu allows you to add color values to tab headers, but if you want image backgrounds you need to use CSS.

DISPLAYING A BACKGROUND IMAGE IN AN ACTIVE TAB

#s-lg-guide-tabs
a.active
{
background-image: url('url goes here');
}

DISPLAYING A BACKGROUND IMAGE WHEN HOVERING OVER A TAB

#s-lg-guide-tabs
a:hover
{
background-image: url('url goes here');
}

REMOVING THE "TAB LINE"
(Note: Sometimes a fine but visible bottom border line extends right from 
the tab row when tab styles are changed. This code will zap it.)

#s-lg-guide-tabs-title-bar
{
border: 0px;
}

CHANGING THE SIZE AND FONT OF TAB TEXT
(This example changes the tab font size to 14px and specifies which fonts should be used in order of preference.) 

div#s-lg-guide-tabs
span
{
font-size: 14px;
font-family: "Times New Roman", Georgia, Serif;
}