Change the Skin and Cascading Style Sheet

Skins are used to define color, font, and borders for various components in Jetspeed. The skin definitions is referenced in portal resources such as controls, controllers, portlets and templates to create a centralized design theme. Review the registry fragment called jportal-skins.xreg, where we define a new skin to match our really gaudy colour theme for the Jportal site.

<?xml version="1.0" encoding="UTF-8"?>
<registry>
    <skin-entry name="jportal-skin" hidden="false">
        <property name="text-color" value="#ffffff" hidden="false"/>
        <property name="background-color" value="#ffffff" hidden="false"/>
        <property name="title-text-color" value="#000000" hidden="false"/>
        <property name="title-background-color" value="#ceff63"
                  hidden="false"/>
        <property name="title-style-class" value="TitleStyleClass"
                  hidden="false"/>
        <property name="highlight-text-color" value="#ffffff"
                  hidden="false"/>
        <property name="highlight-background-color" value="#6331ff"
                  hidden="false"/>
    </skin-entry>                                                 
</registry>

Then in the JetspeedResources.properties.merge, the default skin for the portal site is defined:

services.PortalToolkit.default.skin=jportal-skin

The default skin is applied to the portal whenever a specific skin is not declared for a resource. The default skin facilitates quickly creating a site look and feel with minimal effort.

See the Jetspeed Skin documentation for all available skin parameters.

Skins are used in combination with Cascading Style Sheets (CSS). CSS is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents, defined as a standard by the World Wide Web Consortium (W3C).

In the JetspeedResources.properties.merge, the portal site stylesheet is defined:

site.stylesheet=css/jportal.css

Looking at the cascading style sheet for the JPortal site, we see that the Jetspeed style sheet, default.css, is included into this style sheet with the import at-rule:

@import "default.css";

A:link 	{
   text-decoration : none; 
   color : #333366; 
   }

A:visited {
   text-decoration : none; 
   color : #666699; 
}

A:hover  {
   color : #CC3300; 
}	

A.index:link  {
   font-size : 11px; 
   color : #333366; 
}
A.index:visited  {
   font-size : 11px; 
   color : #333366; 
}

A.index:hover  {
   color : #CC3300; 
}

We then go on to define several example styles overriding the settings in default.css. Styles declared in the style sheet can also be referenced in a skin, as we do in our skin registry:

    <property name="title-style-class" value="TitleStyleClass"
                  hidden="false"/>