Everything is set in order to start editing and customizing the new skin we'll change some parameters to make the editing of the new skin evident to you. For this reason, the produced skin will be not good looking at all!

We need to change the standard colors and we can do that by redefining the skin parameters.

If we look at the myNewSkin.skin.properties file, we'll find some interesting options:

gradientType=glass
generalStyleSheet=resource:///META-INF/skins/myNewSkin.xcss
baseSkin=blueSky
extendedStyleSheet=resource:///META-INF/skins/myNewSkin-ext.xcss

The generalStyleSheet and the extendedStyleSheet options contain the path to include all of the needed stylesheets, the baseSkin (as we've seen) contains the name of the skin we used to generate the new one, the gradientType contains the type of gradient used by the new skin (other options are plastic and plain, and it is possible to generate new ones).

Inside this file, we can put the skin parameters we would like to redefine, for example:

headerBackgroundColor=#d5a32b
headerTextColor=#FF0000
myNewProperty=#d5a32b

We changed some parameters to show you how you can control the skin base options. As you can see, you can also define new properties to use inside the XCSS code (we'll use the myNewProperty value later).

The second thing we have to do is edit the .xcss files. As you can see on opening one of them, there are two different ways to edit CSS information by using plain CSS or XCSS language.

In the first case, we can insert our CSS inside the f:verbatim tag in this way:

<f:verbatim>
<![CDATA[
// my css code
]]>
</f:verbatim>

In the second case, we can use XCSS tags outside the f:verbatim section.

For example, let's open the tool-bar.xcss file and define a border for the rich:toolBar component in plain CSS, by just adding the following definition inside the .rich-toolbar selector:

border: 1px solid red;

Now we will use XCSS to redefine the background gradient. Add the following code after the f:verbatim block:

<u:selector name=".rich-toolbar">
<u:style name="padding" value="0px 5px 0px 5px" />
<u:style name="background-position" value="0% 50%" />
<u:style name="background-image">
<f:resource
f:key="org.richfaces.renderkit.html.CustomizeableGradient">
<f:attribute name="valign" value="middle" />
<f:attribute name="gradientHeight"
value="22px" />
<f:attribute name="baseColor"
skin="myNewProperty" />
<f:attribute name="gradientColor"
skin="headerGradientColor" />
</f:resource>
</u:style>
</u:selector>

As you can see, we have used the CustomizedGradient class to generate our gradient with the color set by the myNewProperty value.

The final version of the content of the tool-bar.xcss file is:

<?xml version="1.0" encoding="UTF-8"?>
<f:template xmlns:f="http://jsf.exadel.com/template"
xmlns:u="http://jsf.exadel.com/template/util"
xmlns="http://www.w3.org/1999/xhtml">
<f:verbatim>
<![CDATA[
.rich-toolbar {
border: 1px solid red;
}
.rich-toolbar-item {
}
.rich-toolbar-separator {
}
]]>
</f:verbatim>
<u:selector name=".rich-toolbar">
<u:style name="padding" value="0px 5px 0px 5px" />
<u:style name="background-position" value="0% 50%" />
<u:style name="background-image">
<f:resource f:key="org.richfaces.renderkit.html.CustomizeableGradient">
<f:attribute name="valign"
value="middle" />
<f:attribute name="gradientHeight"
value="22px" />
<f:attribute name="baseColor"
skin="myNewProperty" />
<f:attribute name="gradientColor"
skin="headerGradientColor" />
</f:resource>
</u:style>
</u:selector>
</f:template>