In This Article

Customizing a guide's tab and box options

One way to customize the appearance of your guide 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.

 Before you begin

  • Your Admin has the ability to force each guide to use the same tab and box styles. If that's the case, then your guide's Tab & Box Options will be disabled.
  • 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. While editing your guide, click on the Guide Layout () button.
  2. Select Tab & Box Options from the dropdown.
  3. Under the Tab Options tab, you can customize the following styles for your guide's tabs or side-navigation menu items:
    • 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 Box Options tab, you can customize the following styles for your guide's content boxes:
    • 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. Click the Save button to apply your customizations.

Restoring the default colors

  1. Click on the Revert to Default button to revert to the system default colors, then save your changes.

Selecting Tab & Box Options from the Guide Layout menu

Customizing tab options

Customizing box options 

Related Articles

    Nav menu script