4.2. Skinnability
Keywords: RichFaces

### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

## 4.2. Skinnability

The Photo Album application employs such feature of RichFaces framework as skinnability. If you have a look at the web.xml you will see that the `org.richfaces.SKIN` parameter has "photoalbum" value.

    ...

        <context-param>

            <param-name>org.richfaces.SKIN</param-name>

            <param-value>photoalbum</param-value>

        </context-param>

    ...

This means that the application uses the custom "photoalbum" skin. The skin parameters are stored in the `photoalbum.skin.properties` file that is located in the `photoalbum\source\web\src\main\resources\META-INF\skins\` folder.

Each visual RichFaces component has a XCSS file where some CSS selectors are defined with style properties mapped to the skin parameters. Here is a fragment of the XCSS file of <rich:calendar>.

    ...

         <u:selector name=".rich-calendar-header">

            <u:style name="border-bottom-color" skin="panelBorderColor"/>

            <u:style name="background-color" skin="additionalBackgroundColor"/>

            <u:style name="font-size" skin="generalSizeFont"/>

            <u:style name="font-family" skin="generalFamilyFont"/>

        </u:selector>

        ...

This code sets style for upper part of the calendar. Hence, for example, `font-family` property is mapped to the `generalFamilyFont` property which in its turn has `Arial, Verdana, sans-serif` value.

These are all values the `.rich-calendar-header` has.

    ...

    panelBorderColor=#636363

    additionalBackgroundColor=#F2F2F2

    generalSizeFont=11px

    generalFamilyFont=Arial, Verdana, sans-serif

    ...

You can find more information about the Skinnability feature in RichFaces Developer Guide.

- Prev4.1. Used Components
- Top of page
- Front page
- Next4.3. Navigation tree