In This Article

May 2020 release: updating custom CSS for tabbed boxes

With the May 2020 release of LibGuides, we're introducing a new version of tabbed boxes built with Bootstrap, rather than jQuery-UI, which is being deprecated for security reasons. Although this will greatly improve the appearance and functionality of tabbed boxes, it does mean that the underlying element IDs and class names have changed as a result.

If you are using only the default styles for tabbed boxes in your LibGuides site, then there's nothing you need to do!

If you have added custom CSS code to LibGuides for styling tabbed boxes: please see the list below to see which elements have been affected. The Old Selector column will list the element ID/class name being removed, while the New Selector column will list the new ones.

Element Old Selector New Selector
All individual tabs .ui-tabs .ui-tabs-nav li
(Note: .ui-state-default is no longer used.)
Tab style: .s-lib-jqtabs > .nav-tabs > li
Tab text: .s-lib-jqtabs > .nav-tabs > li > a
Active tab .ui-state-active
‚Äč(Note: the more specific .ui-widget-content .ui-state-active and .ui-widget-header .ui-state-active variations are no longer used.)
Tab style: .s-lib-jqtabs > .nav-tabs > .active
Tab text: .s-lib-jqtabs > .nav-tabs > .active > a
Specific tab #ui-id-{tab-id} or .ui-tabs-anchor a[href="#s-lib-ctab-{box id}-{tab id}"]
  • Replace {box id} with the id of the tabbed box (you can find this by clicking the box's pencil icon in the header)
  • Replace {tab id} with the id of the tab. Tab id values start at 0 and increase by one, so the first tab would be 0, the second tab would be 1, and so on. (You cannot use the same tab id from your old CSS selectors.)
  • For example, if a tabbed box with ID 123456 had three tabs, the selectors would look like:
    • First tab: a[href="#s-lib-ctab-12345-0"]
    • Second tab: a[href="#s-lib-ctab-12345-1"]
    • Third tab: a[href="#s-lib-ctab-12345-2"]
Tab row background & border .ui-widget-header .s-lib-jqtabs > .nav-tabs
Tab content area .ui-widget-content .s-lib-jqtabs .tab-content

 

Related Articles