+

Search Tips   |   Advanced Search


Use the color palette in themes

Learn about the color palettes used in themes, define new color palettes, assign a color palette to a page, and reference a color palette in a CSS file.

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.

Page builder and the Tab Menu - Page Builder theme do not support the portal color palette for themes. 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.

When using client-side aggregation (CSA), the color palette that is loaded from the first page where CSA is set will continue to be used on all the subsequent page changes between other CSA pages without a full page refresh. As a result, CSA has a limitation where a page that has a different color palette than the first page that is loaded in CSA will be displayed using the color palette of that first page instead of its own.

In order to load that current page's color palette, the user cannot simply click the browser's Refresh button but must, instead, create a link to the page using the Create Link to this Page button and copy that URL into the browser address bar. That will direct the server to request the current page in CSA, effectively loading that page's color palette correctly.


Defining a color palette

Color palette definitions are stored in the PROFILE_HOME/installedApps/cellname/wps.ear/wps.war/themes/html/Portal/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: PROFILE_HOME/installedApps/cellname/wps.ear/wps.war/themes/html/Portal/colors/default.properties PROFILE_HOME/installedApps/cellname/wps.ear/wps.war/themes/html/Portal/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:


Table 1. Sample color set and 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 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

To see if a color palette is assigned, the theme checks the current page's metadata in head.jspf 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 or directory as the New value.

    For example, enter noGradients to assign noGradients.properties and directory noGradients.


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.


Parent topic:

Customize the portal


Related concepts


Portal style classes
Work with portal navigation
Use JSTL tags in the portal JSPs
User and group management


Related tasks


Creating a new theme
Import a theme
Deploy the theme
Creating a new skin
Enable automatic JSP reloading
Supporting new clients
Supporting new markup languages
Changing banner text


Related reference


Performance guidelines for themes and skins


Related information


Changing the page help