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.

The Page Builder theme does 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 /colors folder in the root folder of a theme..
Find theme resources: See the Location of theme resources link below.

A color palette definition consists of a properties file that contains the color values and, optionally, a subdirectory that contains 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: .

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


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


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

Customize the portal
Portal style classes
Work with portal navigation
Use JSTL tags in the portal JSPs


Related tasks


Import a theme
Deploy the theme
Create a new skin
Enable automatic JSP reloading
Add support for new clients
Add support for new markup languages
Change banner text
Performance guidelines for themes and skins
Location of theme resources


Change the page help

 


+

Search Tips   |   Advanced Search