Changing portlet header colors, fonts, and style

Related topics

You can change the colors and fonts used in the portlet header that appears at the top of each portlet by editing the style that is applied to the page. You can also change the appearance of the edges of the portlet header. Portlets can also have subheaders that appear just below the main header.

The following example shows the same portlet with different portlet header color, font, and style settings:

To change portlet header colors, fonts, and style, 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 pages and regions that use the style.

To change the portlet header or subheader:

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

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

      • Portlet Header Text

      • Portlet Header Link

      • Portlet SubHeader Color

      • Portlet SubHeader Text

      • Portlet SubHeader Link

      Tip: You can also select a portlet header style element by clicking it in the Preview section.

   2. To select a new color for the portlet header or text, click the color in the color palette, or enter the hexadecimal color code in the Color field.

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

   4. Click Apply.

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

4. To change the style of the portlet header:

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

   2. Click the appropriate radio button for the style of portlet header you want:

      • Normal (Square):

      • Rounded:

      • Rounded Left Edge:

      • Rounded Right Edge:

   3. Click Apply.

      The Preview section is refreshed to show your style selection.

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

6. Click Close to return to the Navigator.

Related topics

Creating a style
Changing portlet body color
Changing portlet heading and text colors and fonts
Style elements

Back to top