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
- While editing your guide, click on the Guide Layout () button.
- Select Tab & Box Options from the dropdown.
- 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.
- 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.
- Click the Save button to apply your customizations.
Restoring the default colors
- Click on the Revert to Default button to revert to the system default colors, then save your changes.