11.6 Defining Styles for Tabs

Another way to add distinction to your portal is through judicious selection of the colors, fonts, and images to use with tabs. Change tab colors and fonts by editing the style used in the region that contains the tabs. For information on how to add tab images, see Section 10.3, "Working with Tabs". For information on applying a style to tabs, see Section 11.8.2, "Applying a Style to a Region".

Figure 11-10 shows the same tabs with different color and font settings.

Figure 11-10 Same Tabs with Different Color and Font Settings

Description of Figure 11-10 follows
Description of "Figure 11-10 Same Tabs with Different Color and Font Settings"

Use care when changing a style: the changes you make affect the appearance of all pages and sub-page, tab, and item regions that use the style.

To change tab colors and fonts:

  1. Log in to Oracle Portal.

  2. Click the Build tab to bring it forward.

  3. From the Page Groups portlet Work In drop-down list, select the page group that owns the relevant style.

    By default, the Page Groups portlet is located on the Build tab of the Portal Builder page.


    If the style is used by more than one page group, look in the Shared Objects page group.
  4. Under Styles in the Layout & Appearance section, click the style to be edited.

    This opens the Properties tab of the Edit Style page.

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

  6. In the Style Element Properties section, choose a tab style element to define.

    For a list and description of style elements that are relevant to tabs, see Section 11.3.2, "Tabs".

  7. Click a color in the color palette, or enter a hexadecimal value in the Color field.

    Clicking in the palette automatically populates the Color field with a hexadecimal value.

  8. Select a Font Decoration:

    • <None> for no decoration (see the following Note)

    • Plain for no decoration (see the following Note)

    • Underline for underlined text

    • Line-Through for lined-out text

    • Underline Linethrough for underlined text that is also lined out


    The Plain and <None> selections provide the same effect for most item-types. However, when applied to items displayed as hyperlinks, they behave differently:
    • When None is applied to a hyperlink, the way the hyperlink is displayed is determined by a user's browser settings. That is, it displays as either plain or underlined according to how the user's browser is configured.

    • When Plain is applied to a hyperlink, the hyperlink is always displayed as Plain (not underlined), no matter what the settings in the user's browser.

  9. Select a Font Face.

    The <Default> font face renders the text in the default font specified by the user's browser.

  10. Specify a Font Size and select a unit of measurement:

    • px fixed unit (pixels, though relative to the viewer's monitor)

    • pt fixed unit (points)

    • em relative unit (relative to the font size of the last specified font)

    • ex relative unit (relative to the "X" size of the last specified font)

    • % relative unit (relative to the font size of the last specified font)

  11. Select a Font Style:

    • Plain

    • Bold

    • Italic

    • Bold Italic

  12. Click Apply.

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

  13. Edit the tab style elements as desired.

    Click Apply after changing each element.

  14. Click Close to save your changes and exit the Edit Style page.