Adding a tabbed box to a page

What is a tabbed box?

A tabbed box allows you to divide content in a box across multiple tabs -- in other words, it's like having multiple standard boxes stack on top of each other. When a user clicks a tab in the box, then they will see the content added under that tab.

Tabbed boxes work best when you group similar content together. For example, if you had a box listing databases for a particular subject, you could have tabs for:

  • Full Text Resources
  • Abstracts & Indexes
  • Primary Sources
  • Media

As helpful as tabbed boxes can be, however, avoid having too many tabs in one box because it can make content difficult to find. Try to also keep the names of your tabs succinct to avoid the tabs displaying on multiple rows.

Tabbed box example


Adding a tabbed box

  1. While editing your guide, click on the page you want to edit in your guide's navigation menu (i.e. tabs or side-navigation).
  2. Click the  Add Box link at the bottom of the column where you want the box to go. For example, to add a box to Column 2, click on  Add Box - Column 2.
  3. In the Add New Box window, enter the title for your box in the Box Name field.
    • This will display in the box's heading.
    • If displaying the box-level navigation in a side-navigation guide, it will also display in the list of boxes for the current page.
  4. Select Tabbed from the Type dropdown.
  5. From the Position dropdown, select where in the column the new box should be added. You can add it to the top, bottom, or following any box in the column. (Don't worry: you can always reorder the boxes later.)
  6. If you would like to display the box without any borders, padding, or heading on the public view of your guide, select the Floating Box checkbox.
    • While editing your guide, the box will still display with borders and a heading. The only difference is that you'll see the Floating Box () icon appear in the heading.
    • However, when previewing or viewing the public view of your guide, the borders and heading will be hidden.
  7. If you would like to hide this box from public view until its ready, select the Draft Mode checkbox.
    • While enabled, you can only view the box while editing the guide. It will not be visible on the public guide, or while previewing the guide.
    • Note: if your system has the Publishing Workflow (CMS-only) enabled, only a designated reviewer can take a hidden box out of draft mode.
  8. Click the Save button.

Clicking the Add Box link

Adding a new tabbed box


Customizing the look of your boxes

One way to customize the appearance of your guides is by customizing the styles and colors of your content boxes. Want border-less boxes? Squared corners instead of rounded? Blue box headers instead of gray? These are just a few things you can do in your guide's Tab & Box Options. Tab & Box options can be set at three levels:

  • Admin users can customize the default Tab & Box Options for all guides in your system. To prevent users from deviating from these colors, admins can also lock every guide into those defaults. This can help maintain a uniform look and feel throughout your LibGuides site.
  • Group admins can customize the default Tab & Box Options for all guides in their group. To prevent users from deviating from these colors, admins can also lock every guide into those defaults. This can help maintain a uniform look and feel throughout your LibGuides site.
  • Guide owners and editors (and all admins) can customize the Tab & Box Options for individual guides. Admins have the ability to force each guide to use the same tab and box styles. If that's the case, then a guide's Tab & Box Options will be disabled.

CSS map for a tabbed box

Diagram of a tabbed box


Pointer - section 1

The entire box:

.s-lib-box: use this class to target all boxes in your guides.

Tip: Remember, if you want to change the border color or width, you can do this in your look & feel settings!

Default CSS:

.s-lib-box {
  border-color: #cccccc;
  border-width: 1px;
  box-shadow: 0 8px 6px -6px #AAAAAA;
  border-radius: 4px 4px 4px 4px;
  background-color: #fff;
}

Pointer - section 2

The box header and title:

.s-lib-box .s-lib-box-title: use these classes to target your box headings.

Tip #1: Remember, if you want to change the header background color or the font color, you can do this in your look & feel settings!

Tip #2: If you decide to hide your box titles, we suggest that you check the "Do not include this code on guide edit page" check box on your Custom JS / CSS page.

Default CSS:

.s-lib-box .s-lib-box-title {
  background-color: #f1f1f1;
  background-image: none;
  color: #888;
  border-bottom: 1px solid #cccccc;
  border-radius: 3px 3px 0px 0px;
}

Pointer - section 3

Tabbed box area:

.s-lib-box-content .ui-widget: use this combination of classes to target the font-size.

.ui-widget-content: use this class to change (or hide) the border of the tabbed box area.

Default CSS:

.s-lib-box-content .ui-widget {
  font-family: Arial,Helvetica,Verdana;
  font-size: 1em;
}

.ui-widget-content {
  border: 1px solid #bbb;
  background: #fff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
  color: #222;
}

Pointer - section 4

Individual tabs (default/inactive):

.ui-tabs .ui-tabs-nav li: this code targets each individual tab; use this if you want to change the padding or margins.

.ui-state-default: use this class for everything else (tab color, tab border color, font style, etc.).

Default CSS:

.ui-tabs .ui-tabs-nav li {
  list-style: none;
  float: left;
  position: relative;
  top: 1px;
  margin: 0 .2em 1px 0;
  border-bottom: 0!important;
  padding: 0;
  white-space: nowrap;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  border: 1px solid #d3d3d3;
  background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
  font-weight: normal;
  color: #555;
}

Pointer - section 5

Active tab:

.ui-state-active: this class should target the active tab in your boxes, but if for some reason it doesn't work for you, try...

.ui-widget-content .ui-state-active: these classes are more specific; if they don't work, try...

.ui-widget-header .ui-state-active: this is the most specific option of the three; if the others don't work, try these classes.

Default CSS:

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  border: 1px solid #aaa;
  background: #fff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
  font-weight: normal;
  color: #212121;
}

Pointer - section 6

Tab background:

.ui-widget-header: this class targets the grey background behind your tabs, and the border that goes around it.

Default CSS:

.ui-widget-header {
  border: 1px solid #aaa;
  background: #ccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x;
  color: #222;
  font-weight: bold;
}

Want to target one box? Click on the icon and grab the box ID! Then use that number to create the HTML ID.
Ex. If your box ID is 123, use #s-lg-box-123 in your CSS!
If you want to target a specific part of that box - like the box header - just combine the ID with the code above. 
CSS code example:
#s-lg-box-123.s-lib-box .s-lib-box-title {
  background-color: #ff0099;
}

Related Articles