Use the color palette in themes

 

+
Search Tips   |   Advanced Search

 

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, we 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, we 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 we can override this on a per-page basis by assigning a page metadata attribute. The following sections provide additional information on using the color palette in themes:

  1. Define a color palette
  2. Assigning a color palette to a page
  3. Referencing a color palette in CSS
  4. Related information

 

Define a color palette

Color palette definitions are stored in...

portal_server_root/themes/html/IBM/colors

A color palette definition consists of a Properties file containing the color values and, optionally, a subdirectory containing color-specific images. A color palette is referenced by an identifier. This identifier is the name of the property file as well as the name of the directory. So, for example the default color palette is 'default', and consists of:

portal_server_root/themes/html/IBM/colors/default.properties
portal_server_root/themes/html/IBM /colors/default/

Besides the "default" color palette, this product also ships a color palette called "noGradients."

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.

Sets are just a convention used in a default theme for convenience to group the color values. A color palette can be defined with whatever naming conventions fit the design of the theme. The only requirement is that all color palette definitions used by the same theme must contain the same keys. The following table provides an example of a sample color set and sample style definition:

Sample color set Sample style definition 

# 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 <h1> and <h3> elements, or for <strong> text. As a guidelines, if we 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.

 

Assign a color palette to a page

To see if a color palette is assigned, the theme checks the current page's metadata in head.jsp as demonstrated by the following code example: 

<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). By default, pages do not have a colorPalette metadata value. To assign one, use the following procedure:

  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 noGrandients to assign noGradients.properties.

 

Reference a color palette in CSS

Styles_rules.jsp 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. For more information, refer to the sample style definition in the Define a color palette section of this topic. If you are only creating a new color palette for the existing theme, you will not need to modify the styles_*.jsp files. This is only required if you have added or removed keys from the Properties file.

 

Related information