Portal, Express Beta Version 6.1 Operating systems: i5/OS, Linux,Windows

Using the color palette in themes

A color palette is a specification of colors and/or graphics to be consumed by the theme Cascading Style Sheet (CSS). By keeping the color settings separate from the theme CSS itself, you can change the color scheme of a theme without modifying the theme code itself. Also, by allowing the color palette to be assigned on a "per page" basis, you can associate multiple color palettes with a single theme and differentiate site areas by color.

A color palette is defined by a Properties file. This property file is loaded by the CSS JSPs and the values are dynamically applied to the style definitions used by the theme. A default color palette is loaded by default but you can override this on a per-page basis by assigning a page metadata attribute.

Defining a color palette

Color palette definitions are stored in the portal_server_root/themes/html/IBM/colors directory. A color palette definition consists of a Properties file containing the color values and, optionally, a subdirectory containing color-specific images.

Inside the color palette Properties file, keys are mapped to color values. The keys are prefixed with setX, where X is a number. This groups the colors into sets. Each set defines color values for a CSS box model element.

This provides full control over all color aspects of the theme markup. The Properties file can contain as many sets as needed to define the colors for the design of the theme.

# Set 1
set1Text1=#202020
set1Text2=
set1Text3=
set1Link = #3366CC
set1LinkActive=#3366CC
set1LinkVisited=#666699
set1LinkHover=#6699CC
set1Background=#FFFFFF
set1BorderTop=
set1BorderRight=
set1BorderBottom=
set1BorderLeft=
set1BackgroundImage=
url(./colors/defaultBlue/blueGradient.gif) 
repeat-x

.selectedPage {
color: ${colors.set1Text1};
background-color: ${colors.set1Background};
border: 1px solid;
border-top-color: ${colors.set1BorderTop} 
border-right-color: ${colors.set1BorderRight} 
border-bottom-color: ${colors.set1BorderBottom} 
border-left-color: ${colors.set3BorderLeft};
background:${colors.set4BackgroundImage};
}

a.selectedPage {color: ${colors.set1Link};}
a.selectedPage:active {color: ${colors.set1LinkActive};}
a.selectedPage:visited{color: ${colors.set1LinkVisited};}
a.selectedPage:hover {color: ${colors.set1LinkHover};}

In the above samples, set1Text1 defines the text color in the selectedPage style class, but set1Text2 and set1Text3 do not have corresponding elements in the CSS box model.

These values are included to provide multiple text colors for emphasis. These could be used, for example, to specify the text color for <h2> and <h3> elements, or for <strong> text. As a guidelines, if you need more values, add them. If you do not need them at all, they can be deleted. Again, there is no requirement for the contents of the Property file, only that the keys used here correspond to their use in the CSS JSPs.

Assigning a color palette to a page

<portal-logic:pageMetaData varname="pageMetaData">
  <!-- pageMetadatatag colorPalette: ${pageMetaData.colorPalette} -->
    <c:set var="colorPalette" scope="request">
      <c:out value="${pageMetaData.colorPalette}" default="default"/>
    </c:set>
</portal-logic:pageMetaData>

If a color palette is not assigned, then default is used as the color palette. The colorPalette variable is then passed to the CSS JSPs.

The theme expects the page metadata key to be colorPalette, and the value to be the color palette identifier (that is, the name of the color palette Properties file without the extension).

1. Click the Page properties of the page that you wish to use a specific color palette.
2. Expand Advanced options.
3. Click I want to set parameter.
4. Enter colorPalette as New parameter.
5. Enter the name of the color palette property file as the New value. For example, enter noGradients to assign noGradients.properties.

Referencing a color palette in CSS

Styles_rules.jspf loads the [colorPalette].properties file and stores it in a Map request attribute colors for use by the CSS style definitions.

The most efficient way to reference the values is with Expression Language (EL) expressions. EL expressions let you reference a Map's values by a simplified dot notation. For example, ${colors.set1Background} retrieves the set1Background color. If you are only creating a new color palette for the existing theme, you will not need to modify the styles_*.jspf files. This is only required if you have added or removed keys from the Properties file.