Controlling Styles for Page Portlets and Navigation Pages

11-18 Oracle Fusion Middleware Users Guide for Oracle Portal 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.

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, select Common.

6. In the Style Element Properties section, select Background.

For a list and description of style element properties relevant to common elements, see Section 11.7, Defining Common Style Elements .

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

Color field, for example CC9999. Clicking in the palette automatically populates the Background Color field with a hexadecimal value. If you enter a hexidecimal color value that does not also appear in the color palette, tabs and portlets do not display with rounded corners.

8. To apply an image to the background of the page or region, click the Browse

button next to the Background Image field to locate the image on your file system. Alternatively, enter the name and location of the image you want use in the Background Image field, for example: c:\webimages\pagebg.gif The image file must be of type JPEG, GIF, or PNG.

9. Click Apply.

The Preview section is refreshed to show your color and image selections. 10. Click Close to save your changes and exit the Edit Style page.

11.7.2 Designing Styles for Banners

You can call out page areas that are dedicated to specific topics or purposes by adding colorful, labeled banners to item regions. Control the text alignment and the thickness and color of a banner by editing the style that is applied to the item region. This section describes how to change banner thickness, color, and text alignment for item region banners. It contains the following subsections: ■ Section 11.7.2.1, Changing Banner Thickness and Text Alignment ■ Section 11.7.2.2, Changing Banner Colors and Fonts Tip: If the style is used by more than one page group, look in the Shared Objects page group. Tip: To delete a background image, click the Delete icon next to the image. Working with Colors and Fonts 11-19

11.7.2.1 Changing Banner Thickness and Text Alignment

Figure 11–12 shows the same item region with different height and text alignment settings on the banner. Figure 11–12 Same Item Region with Different Banner Heights and Text Alignments Use care when changing a style: any changes you make affect the appearance of every object that uses the style. To change the height and text alignment of item region banners:

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.

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. Select the element type and property relevant to the type of banner to be changed:

To change banner height and text alignment for the item region:

a. In the Style Element Type section, select Common.

b. In the Style Element Properties section, select Region Banner.

For a list and description of style element properties relevant to pages and regions, see Section 11.3, Style Element Properties . To change the banner height and text alignment for groups of items:

a. In the Style Element Type section, select Items.

b. In the Style Element Properties section, select Group By Banner.

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

6. In the Height field, enter the height of the banner in pixels.

Set the banner height approximately 20 to 25 greater than the selected text size. For example, if text size is 8, set banner height to 10.

7. From the Text Alignment list, select the alignment of banner text Left, Center,

Right.

8. Click Apply.

The Preview section is refreshed to show your height and alignment selections. 9. Edit each of the banner style elements as desired. Tip: If the style is used by more than one page group, look in the Shared Objects page group.