12 Working with Colors and Fonts

12.1 Understanding Style Basics

A style controls the colors and fonts used by pages and item regions and all the tabs, portlets, and items displayed within them. If you want a page or group of pages to use the same colors and fonts, apply a style. On the other hand, if you want to apply a consistent layout to a group of pages, use a template.

Because you can apply a style to a template, you can use a template to provide a standard approach to layout, fonts, and colors.

You can give all your pages a uniform appearance by applying a single style. This means that you can change the look of all your pages just by changing the style the pages use. If you prefer, you can apply different styles to give each page a distinct look. You can even apply different styles to the item regions within a page.

Use care when editing a style: the changes you make affect the appearance of all pages and item regions that use the style. When you delete a style, all pages that use the style revert to the page group default style, or the system default style if the page group default style is <None>.

The amount of control you have over the style of a page depends on your page and page group access privileges:

• The portal administrator can perform any action on any style in any page group.

• If you have the page group privilege Manage Styles, you can perform any action on any style in the page group.

• If you have the page privilege Manage or Manage Style and the Allow Privileged Users To Manage Page Style check box is selected for the page group, you can apply a different style to the page, edit existing styles to change the colors and fonts used, or create new styles.

  If Allow Privileged Users … is not selected, only portal administrators or users with the page group privilege Manage All or Manage Styles can apply a different style to pages in the page group.

• If you have the page privilege Personalize (Style) or greater on a page and the Allow Privileged Users To Personalize Page Style check box is selected for the page group, you can apply a different style to your view of the page.

  If the Allow Privileged Users To Personalize Page Style check box is not selected, no user can apply a different style when personalizing a page.

12.2 Creating a Style

In just a few simple steps, you can create a style for your page group—or for all page groups if you create the style in the Shared Objects page group. Once the style is created, the next step is to define it. This section explains how to create a style; subsequent sections explain how to define it.

To create a style:

1. Log in to OracleAS Portal.

2. Click the Build tab to bring it forward.

3. From the Page Groups portlet Work In drop-down list, select a page group to own the style.

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

   
   

   Tip: If you plan to use this style in more than one page group, create it in the Shared Objects page group.

   
   

4. In the Layout & Appearance section, click the Create link next to the Styles heading.

5. In the Display Name field, enter a display name for the style.

   Use up to 350 characters of any kind. The display name identifies the style in the Page Groups portlet and the Portal Navigator.

   
   

   Note: In the OracleAS Portal user interface, an asterisk (*) indicates a field that requires a value. For a summary of the rules governing the naming of objects in OracleAS Portal, see Appendix D, "Object Naming Rules in OracleAS Portal".

   
   

6. In the Copy From list, select a style that most closely matches the colors and fonts to use in your new style.

   This list includes the styles to which you have access privileges, including shared styles and any styles you created.

7. (Optionally) Select Make available for use in this page group to make this style available for other users to apply to their own pages, or to use as a starting point for their own styles.

   
   

   Note: If you do not see this check box, you do not have style publishing privileges. Contact your portal administrator to request these privileges.

   
   

8. Click Create.

Section 12.3, "Style Element Properties" provides tables that list and describe the style element properties available for items, tabs, portlets, and common components.

See the following subsections for specifics on designing a style:

• Defining Styles for Items

• Defining Styles for Portlets

• Defining Common Style Elements

Additionally, see Section 12.10, "Editing a Style" for information on editing styles.

12.3 Style Element Properties

The tables in the following subsections list and describe the types of user interface elements to which you can apply a style. It is divided into the following subsections:

• Items

• Tabs

• Portlets

• Common

12.4 Defining Styles for Items

You can change the colors and fonts used for item attributes (for example, Display Name, Create Date, and any custom attributes) by editing the style used by the page or item region that contains them. You can have different color and font settings for each attribute.

Figure 12-2 shows the same item region with different item attribute 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 item attribute colors and fonts:

1. Log in to OracleAS 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 Items.

6. In the Style Element Properties section, select the element to define.

   For a list and description of the style element properties relevant to items, see Section 12.3.1, "Items".

   
   

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

   
   

7. To select a color, click a color in the color palette or enter the color's hexadecimal value in the Color field.

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

    Your changes are saved, and the Preview section is refreshed to show your color and font selections.

13. Edit each style element as desired.

    Click Apply after changing each element.

14. Click Close to return to the Page Groups portlet.

12.5 Defining Styles for Portlets

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

• Changing the Portlet Body Color

• Changing Portlet Header Colors, Fonts, and Edges

• Changing Portlet Heading and Text Colors and Fonts

• Controlling Styles for Page Portlets and Navigation Pages

12.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 11.3, "Working with Tabs". For information on applying a style to tabs, see Section 12.8.2, "Applying a Style to a Region".

Figure 12-10 shows the 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 OracleAS 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 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 12.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

   
   

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

    Click Apply after changing each element.

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

12.7 Defining Common Style Elements

In addition to the specific style elements that belong to tabs, portlets, and items, you can define the appearance and fonts used for common elements, such as banners or page or item region backgrounds. Define background images and colors for an item region or a page, the height and alignment of banners, and banner colors and fonts.

This section describes how to define the colors and fonts for commonly used style elements. It includes the following sub-sections:

• Changing the Page or Region Background

• Designing Styles for Banners

12.8 Applying a Style

You can apply styles to pages, tabs, and regions. On pages, you can apply styles explicitly and by default. This section describes the various ways to apply styles. It includes the following subsections:

• Applying a Style to a Page

• Applying a Style to a Region

12.9 Making a Style Available to Other Users

There are two levels for making a style available:

• Publishing a style

• Sharing the style across page groups

When you publish a style, it becomes selectable on style pick lists in the page group that owns the style. When you share a style across page groups, it becomes selectable on style pick lists across all page groups.

This section describes how to publish and share styles. It includes the following subsections:

• Publishing a Style to Other Users

• Sharing a Style Across Page Groups

12.10 Editing a Style

Editing a style involves almost the same steps you take in creating one. The main differences are in how you access the style and in which style attributes are available for revision.

To edit a style:

1. Log in to OracleAS Portal.

2. Click the Build tab to bring it forward.

3. From the Page Groups portlet's 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.

4. Under Styles in the Layout & Appearance section, click the style to be edited.

   This opens the Edit Style page.

   
   

   Note: If the style is not included in those listed in the Page Groups portlet, click the More … link that displays at the end of the list of styles.

   
   

5. Click the Main tab to bring it forward.

   The attributes available on the Main tab vary a little from the attributes available when you first create the style. Notably, the Main tab includes Name and Description attributes.

   The Name attribute differs from the Display Name attribute both in the way OracleAS Portal uses it and in the rules that govern which characters can be used in its formation. OracleAS Portal uses the Name internally. The default value in the Name field is taken from the Display Name provided when the style was created. The value is truncated to 65 characters and any spaces and special characters are discarded. Use only alphanumeric characters (A to Z, a to z, and 0 to 9) and underscore (_)

   For example, if the Display Name is R&D Style, the Name is RDSTYLE.

   The Name must be unique within its page group and the Shared Objects page group. Use up to 65 characters.

6. If you wish, enter a description of the style in the Description field.

   The style description is available to view when users edit the style. It is not exposed anywhere else.

7. Click the Properties tab to bring it forward.

   Edit the style properties as described in the previous sections, including:

   • Style Element Properties

   • Defining Styles for Items

   • Defining Styles for Portlets

   • Defining Styles for Tabs

   • Defining Common Style Elements

8. Click the Main tab to bring it forward, then click the Clear Cache link.

   Clearing cache removes all cache entries associated with this style, making the changes you have made take effect immediately.

9. Click OK when you are done.

12.11 Deleting a Style

When you delete a style, all pages and item regions that used the style revert to the page group default style. If the page group default style is <None>, all pages and regions revert to the system default style.

You cannot delete the system default style, nor can you delete the style created automatically when a page group is created.

To delete a style, you must either have created the style or have at least the page group privilege Manage Styles on the page group that owns the style.

To delete a style:

1. Log in to OracleAS 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 deleted.

   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, it will be in the Shared Objects page group.

   
   

4. In the Layout & Appearance section, click the Browse link next to the Styles heading.

   The Portal Navigator opens, displaying a list of the selected page group's styles.

5. Click the Delete link next to the style to be deleted.

6. In the confirmation page, click Yes.

7. Optionally, click the Builder link at the top of the page to return to the Page Groups portlet.

12.12 Using Portal Style Element Classes in HTML Templates and CSSs

In OracleAS Portal, there are three typical style scenarios:

• Use styles you create through the portal's user interface.

• Augment portal styles through a combination of OracleAS Portal style element classes plus your customizations of them.

• Provide your own custom cascading style sheet (CSS).

This section deals briefly with the second scenario: augmenting portal style element classes.

You may prefer to create custom style sheets using OracleAS Portal style element classes in a CSS or embedded between <style></style> tags in a portal HTML template. For example, the standard style element class for a portlet header contains a parameter for background color but not for background image:

.PortletHeaderColor{Background-Color:#336699;}

You can augment the existing class by adding a background image parameter:

.PortletHeaderColor{Background-Color:#336699; Background-Image:url(https://company.us.myco.com:5555/images/FFFFFFr.gif);}

By customizing OracleAS Portal style element classes, you can reduce the amount of coding by simply altering these existing classes.

To ensure that you use the appropriate style classes in your CSS or between your <style></style> tags:

• Set all the pages that will use OracleAS Portal style element classes to Main style.

  Many of OracleAS Portal's style element classes use the variables idn and siteidnn. The idn variable refers to the identity of the style being used. The siteidnn variable refers to the page group that owns the style. With the Main style, which is owned by the Shared Objects page group, the values of these variables are fixed—and therefore predictable: id1siteid0.

  One way to ensure that all new pages in a page group use the Main style is to set Main as the page group's default style, then select the page group configuration option Use Default Properties When Creating Page. For information on setting this option, see Section 4.5.1, "Specifying Inheritance Rules for Newly Created Pages". For information on selecting a default style for a page group, see Section 4.5.2, "Choosing a Default Style for a Page Group". For information on selecting a style for a page, see Section 12.8, "Applying a Style".

  You may want to take the further step of prohibiting users from changing page styles. To do this, edit the relevant page group's properties, deselecting Allow Privileged Users To Manage Page Style. For more information, see Section 4.3.2, "Controlling Who Can Apply a Different Style to a Page".

• Create a CSS that includes OracleAS Portal style element classes, which you can define according to your own style specifications. Or embed OracleAS Portal style element classes in your HTML template (see next bullet).

  For a list and description of OracleAS Portal style element classes, see Section E.2, "Style Element Classes Used with OracleAS Portal Styles".

• Create an HTML template that calls the CSS or that includes OracleAS Portal style element classes.

  In the template, do not use the #page.style# tag. The #page.style# tag includes OracleAS Portal style element classes in the template. This could result in conflict caused by two classes having the same name. For information on creating HTML templates, see Chapter 13, "Providing a Standard Look and Feel".

• Apply the HTML template to your portal pages.

  For information on applying HTML templates, see Chapter 13, "Providing a Standard Look and Feel".

12.13 Troubleshooting Styles

When I create a page, I am not given the option to select a style for the page.

If the page is based on a Portal Template that does not allow privileged users to choose their own page style, the style selection screen does not display when you create a page, and the Style tab does not display when you edit a page. If you have sufficient access to the template, you can edit the template and select Enable Pages To Use Different Style on the Style tab of template properties. Once this setting is selected, the Style tab displays in page properties.

Another possibility is that the page group that owns the page is not configured to allow privileged users to manage a page style. This option is available on the Main tab of page group properties. It must be selected for users to select a style for any pages in the page group.

How do I control the appearance of hyperlinks in, for example, text items?

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.

When I logged in today, all the colors and fonts were changed on my page.

If the page is based on a template, it probably uses the template's style selection. Whenever a template's style selection is changed, all the styles on all the pages that are based on the template also change.

This is true unless the template allows pages based on it to use their own style. In such cases, changes to the template style selection do not affect pages that are based on the template.

I cannot apply styles to my regions; the Styles tab does not display on the Edit Region page.

Is the region a portlet region? Portlet regions cannot have their own style.

It might also be privilege-related. It is not enough to have the page privilege Manage, the page group option Allow Privileged Users to Manage Styles must also be selected for you to be able to change region styles. Ask your page group or portal administrator either to select this option for the page group, or to grant you a higher level of privilege, for example, the page group privilege Manage Styles.

My page portlet is using the style of the target page rather than the style of its source page, as I have specified.

Page portlets always take their header and border colors from the page on which they are placed. This is because the display of headers and borders is controlled at the region level, rather than from any values set for the source page's style.

One way around this is to edit the region in which the page portlet is placed and turn off the display of portlet headers and borders. If the page portlet contains its own portlets, you must also turn off the display of headers and borders for regions on the page portlet's source page.

For information on turning off region headers and borders, see Section 11.2.12, "Displaying or Hiding Portlet Headers and Borders".

Portlet background colors usually are specified by the style that is applied to the page on which the portlets are placed. With a page portlet, there is a way to display the source page's background color. Edit the style that is applied to the page on which the page portlet is placed (the target page). For the style element Portlet Body Color, remove the value from the Background Color field, and click Apply. The background color specified for the page portlet's source page (that is, Background Color property of the Common style element) displays.

To illustrate this for yourself, create a page named Source and a page named Target. Create a Source Style for the Source page and a Target Style for the Target page. Set all the color values for Source Style to the red end of the color palette. Set all the color values for Target Style to the blue end of the color palette.

Add some portlets and items to the Source and Target pages. Publish the Source page as a portlet. Place the Source page portlet onto the Target page.

For the Source page, experiment with selecting and de-selecting Use Style Of Page On Which Portlet Is Placed, and viewing the result on the Target page. Also, experiment with specifying and clearing the value field for the Background property of Target Style's Common style element.

My page portlet is not using the style of the container page, as I specified.

When you publish a page as a portlet, you are given the opportunity to use the source page's style or to use the style of the containing page. Using the style of the containing page works in most cases. The exception is when the source page is provided through the Federated Portal Adapter. In such cases, the setting to use the style of the containing page is ignored. The page portlet uses whatever style is applied to its source.

My style specifies a page background color, but no color displays.

When a page uses an HTML page skin template, the page background color is taken from the template and any background color specified in a defined style is ignored.

An exception to this is when the page skin uses a class generated by an OracleAS Portal style. For example, you can place an OracleAS Portal style element class in the <body> HTML tag: <BODY style="margin:0px" class="Bodyid2siteid0">. Should you change the style declaratively, through the OracleAS Portal user interface, the change is reflected as well in the template that references the style class.

This enables you to change the Background Color of all pages that use the page skin through the declarative style. (For more information on OracleAS Portal style element classes, see Section 12.12, "Using Portal Style Element Classes in HTML Templates and CSSs".)

My portlet/tab corners are not rounded.

Check the applied style's Common style element, specifically check the hexadecimal value entered for the Background property's Background Color attribute. 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.

I have applied my own CSS to my pages through an HTML template, and my results are very uneven.

It could be that the HTML template not only calls the CSS but also includes the #page.style# HTML template substitution tag. Or the template header includes OracleAS Portal style element classes between <style></style> tags as well as the #page.style# tag.

If either of these is the case, consider removing the #page.style# tag. This tag calls the OracleAS Portal style, which may include the same style element classes specified in the CSS or embedded between the <style></style> tags. This causes conflict, with the portal doing its best to figure out which style element class specifications to use.

It might also be that you have not applied the Main style to all relevant pages. If so, then the variable values associated with some of the style element classes (idnsiteidnn) do not match up with those of the OracleAS Portal style selected for the page.

Go to all affected pages, and select the Main style. The Main style, which comes from the Shared Objects page group, always provides the variable values id1siteid0, making it predictable and thus allowing for consistent results.

My Page portlet/navigation page is using the background color of the container page, rather than the source page, as I prefer.

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

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 this option for the page or navigation page that you are using as a portlet).

2. In the style that is used by the target page (that is, the page where you place the page portlet or navigation page), set Portlet Body Color style element to Null (no value).