11.5 Defining Styles for Portlets

The following subsections explain how to change the colors and fonts that define the style of portlets:

11.5.1 Changing the Portlet Body Color

You can use background (or body) colors to draw attention to a specific functional area on a page or to a specific type of object. For example, you can change the color of the main body of a portlet. To change the body color of a portlet, edit the style used by the page on which the portlet is placed.

Figure 11-3 shows the same portlet with different body color settings.

Figure 11-3 Same Portlet with Different Body Color Settings

Description of Figure 11-3 follows
Description of "Figure 11-3 Same Portlet with Different Body Color Settings"

Hand-coded portlets created for Oracle Portal may use their own style instead of the style of the page on which they are placed. In such cases, these portlets will use the style specified when they were created rather than any style you apply.

Use care when changing a style: the changes you make may affect the appearance of all the portlets that use the style.

Note:

See Section 11.5.4, "Controlling Styles for Page Portlets and Navigation Pages" for special style considerations for page portlets and navigation pages.

To change the portlet body color:

  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 style to be edited.

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

    Tip:

    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 Portlets.

  6. In the Style Element Properties section, choose Portlet Body Color.

    For a list and description of style element properties relevant to portlets, see Section 11.3.3, "Portlets".

  7. Click a color in the color palette, or enter the color's hexadecimal value in the Background Color field, for example #CCFFFF.

    Clicking in the palette automatically populates the Background Color field with the color's hexadecimal value.

  8. Click Apply.

    The Preview section is refreshed to show your color selection.

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

11.5.2 Changing Portlet Header Colors, Fonts, and Edges

You can change the colors and fonts used in a portlet header by editing the style that is applied to the page on which the portlet is placed. You can also change the appearance of the edges of the portlet header from square to rounded to rounded on one edge or the other.

Figure 11-4 shows the same portlet with different header color and edge settings. The setting for portlet header colors also controls the color of portlet borders.

Note:

See Section 11.5.4, "Controlling Styles for Page Portlets and Navigation Pages" for special style considerations for portlet headers and borders.

Figure 11-4 The Same Portlet with Different Settings for Header Color and Edges

Description of Figure 11-4 follows
Description of "Figure 11-4 The Same Portlet with Different Settings for Header Color and Edges"

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 the portlet header or sub-header:

  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.

    Tip:

    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 Portlets.

  6. To change the colors and fonts of the portlet headers:

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

      • Portlet Header Color

        This element controls the background color of the portlet header. It also controls the colors of portlet borders. Portlet headers and borders always use the colors defined for the style applied to the page that contains the portlet.

      • Portlet Header Text

        This element controls the Display Name of the portlet as it appears in the portlet header

      • Portlet Header Link

        This element controls the appearance of any link that may display in the portlet header. Such links include Help, Personalize, and About.

      • Portlet SubHeader Color

        This element controls the background color of the portlet sub-header.

      • Portlet SubHeader Text

        This element controls the appearance of any text that may display in the portlet sub-header.

      • Portlet SubHeader Link

        This element controls the appearance of any links that may display in the portlet sub-header.

      You can also select a style element by clicking it in the Preview section.

      For a list and description of style element properties relevant to portlets, see Section 11.3.3, "Portlets".

    2. Click a color in the color palette, or enter the color's hexadecimal value in the Color field, for example #CCFFFF.

      Clicking in the palette automatically populates the Color field with the color's hexadecimal value.

    3. 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

      Note:

      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.

    4. Select a Font Face.

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

    5. 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)

    6. Select a Font Style:

      Plain

      Bold

      Italic

      Bold Italic

    7. Click Apply.

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

  7. To change the edges of the portlet header:

    1. In the Style Element Properties section, choose Portlet Header Style.

    2. Click a radio button to select an edge:

      Figure 11-5 Normal: Two Square Edges

      The Normal portlet header style

      Figure 11-6 Rounded: Two Rounded Edges

      The Rounded portlet header style

      Figure 11-7 Rounded Left Edge

      The Rounded Left Edge portlet header style

      Figure 11-8 Rounded Right Edge

      The Rounded Right Edge portlet header style

    3. Click Apply.

      The Preview section is refreshed to show your selection.

  8. Edit each of the portlet header style elements as desired.

    Click Apply after changing each element.

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

11.5.3 Changing Portlet Heading and Text Colors and Fonts

Oracle Portal provides four levels of heading and text attributes for use in developing portlets. If you view the source of any Oracle Portal page, you'll see that the portlets were written using Portlet Heading1 and Portlet Text1. For example, the Favorites portlet uses the Portlet Heading1 style element for favorite links.

You can provide a distinctive look to your portal by working with the colors and fonts that are applied to portlet headings and text. Change the colors and fonts used with portlet headings and text by editing the style that is applied to the page on which the portlet is placed.

Figure 11-9 shows the Favorites portlet with different Portlet Heading1 color settings.

Figure 11-9 Favorites Portlet with Different Portlet Heading1 Color Settings

Description of Figure 11-9 follows
Description of "Figure 11-9 Favorites Portlet with Different Portlet Heading1 Color Settings"

More on the Oracle Technology Network
For information about how to use these style elements in your own portlets, see the Portal Developer Kit page on the Oracle Technology Network (OTN), http://www.oracle.com/technology/products/ias/portal/portlet_development_10g1014.html. For information on Oracle Portal style classes, which you can use with your own developed portlets, see Section 11.12, "Using Portal Style Element Classes in HTML Templates and CSSs".

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 portlet heading and text 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 style to be edited.

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

    Tip:

    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 Portlets.

  6. In the Style Element Properties section, choose Portlet Headingn or Portlet Textn, where n is the desired level.

    You can also select the portlet heading or text style element by clicking it in the Preview section.

    For a list and description of style element properties relevant to portlets, see Section 11.3.3, "Portlets".

  7. Click a color in the palette, or enter a hexadecimal value in the Color field, for example #FFCC00.

    Clicking in the palette automatically populates the Color field with the color's 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

    Note:

    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 style elements as desired.

    Click Apply after changing each element.

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

11.5.4 Controlling Styles for Page Portlets and Navigation Pages

Regardless of whether a page portlet or navigation page uses its source page's style, they always render their headers and borders using the style of the page on which they are placed. This is true even when you specify the use of the style that was defined for the page portlet or navigation page's source page.

If you do not want to use the container page's header and border colors on a page portlet or navigation page, you can turn off the display of headers and borders at the region level on the container page. If the page portlet or navigation page also contains its own portlets, you must also turn off the display of headers and borders for portlet regions on the source pages of those portlets.

Note:

For more information on turning off the display of headers and borders for portlet regions, see Section 10.2.12, "Displaying or Hiding Portlet Headers and Borders".

If the Portlet Background Color style element that is applied to the container page is set to a specific value, rather than left blank, the setting for the Use Style Of Page On Which Portlet Is Placed option is ignored for the page portlet, though not for portlets that may be placed on the page portlet's source page.

To ensure that a page portlet or navigation page uses its own background color, rather than the one specified for the page on which it is placed:

  1. Ensure that the page portlet or navigation page uses its own style when it is published as a portlet (that is, do not select the Use Style Of Page On Which Portlet Is Placed option for the page or navigation page that you are using as a portlet).

  2. In the style that is used by the container page (that is, the page where you place the page portlet or navigation page), leave the value for the Portlet Body Color style element blank.