Create new RichFaces Documentation Jira issue

This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.orgCommunity Documentation

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.