Customize your system's default tab and box colors & borders

One way to customize the appearance of your guides is by customizing the styles and colors of your navigation tabs/menu and content boxes. Want border-less boxes? Red instead of blue tabs? These are just a couple of things you can do in your guide's Tab & Box Options.

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.

 Before you begin

  • Admins have the ability to force all guides to use the same tab and box styles. If that's the case, then each guide's Tab & Box Options will be disabled. This will also override any existing customizations that may have been made in individual guides.
  • Always keep accessibility in mind when selecting tab and box colors. Contrast is extremely important for users with color blindness or visual impairments, so make it a priority to select font and background color combinations that pass accessibility tests.
    • Not sure how to check? Try running your colors through the free WebAIM Color Contrast Checker.
    • This tool will let you know if your colors have an accessible contrast ratio, while letting you make live adjustments until you find a combo that passes all WCAG tests.

Customizing tab & box options

  1. Go to Admin > Look & Feel.
  2. Under the Header/Footer/Tabs/Boxes tab, click on the Tab & Box Options panel to expand it.
  3. Under the Tabs section, you can customize the following styles:
    • Shape: select whether to display your guide's tabs with Round or Square corners.
    • Active Background: select or enter the background color of the currently selected tab. This will also be applied when hovering over a tab.
    • Active Font: select or enter the font color of the currently selected tab. This will also be applied when hovering over a tab.
    • Inactive Background: select or enter the default background color of your tabs. 
    • Inactive Font: select or enter the default font color of your tabs.
  4. Under the Boxes section, you can customize the following styles:
    • Shape: select whether to display your guide's boxes with Round or Square corners.
    • Border Width: select the width of the border of your boxes. Enter 0 if you do not want your boxes to have a border (this will also remove the box's padding).
    • Background: select or enter the background color of your boxes.
    • Header Background: select or enter the background color of the box headers.
    • Header Font: select or enter the font color of the box headers.
  5. Under the Design Settings section, choose how you want to apply these defaults.
    • To force all guides to use these styles, select Lock all guides with this design and override any individual guide design settings.
    • Otherwise, select Make this the default design for new guides but allow guide owners to customize their guides.

Restoring the default colors

To restore the default colors, simply delete all of the color values from each field. When empty, the fields will apply the default blue and gray color scheme.

Customizing Tab & Box Options

Related Articles