Changing tab colors and fonts

Related topics

You can change the colors and fonts used in the tabs on a page by editing the style that is applied to the page or region that contains the tabs.

The following example shows the same tabs with different color and font settings:

To change the text that appears on a tab, see Changing tab text. If you want to control the appearance of tabs by using images, see Applying images to a tab.

To change tab colors and fonts, you must have at least one of the following privileges:

• Portal administrator

• Manage Style privileges on the page group to which the style belongs

• Manage Style global privileges on All Page Groups

• Manage global privileges on All Styles

Be careful when changing a style, because any changes you make affect the appearance of all the pages and regions that use the style.

To change tab color and fonts:

1. In the Navigator click Edit next to the style with which you want to work.

   Tip: If the style is used by more than one page group, it will be under the Shared Objects page group.

   Tip: If you do not know the name of the style you want to change, edit a page or region that uses the style. When editing a page or region, if you have the appropriate privileges, you can also edit the style used by that page or region.

2. In the Style Element Type section, choose Tabs.

3. In the Style Element Properties section, choose one of the following:

   • Active Tab Color

   • Active Tab Text

   • Inactive Tab Color

   • Inactive Tab Text

   An active tab is the one that is currently selected within a tab set. All the rest of the tabs are considered inactive tabs.

   

   In the example above, Administer is the active tab, while the others are all inactive. Notice that the active tab appears in a different color to differentiate it from those that are inactive.

4. To select a new color for the tab or text, click the color in the color palette, or enter the hexadecimal color code in the Color field.

5. To change the text font, choose the desired Font Face, Font Size, Font Style, and Font Decoration. The <Default> font face renders the text in the default font specified by the user's browser.

6. Click Apply.

   The Preview section is refreshed to show your color and font selections.

7. Edit each of the tab style elements as desired, remembering to click Apply after changing the color or font of each element.

8. Click Close to return to the Navigator.

Related topics

Creating a style
Adding tabs to a page
Style elements

Back to top