skin UI CDK Guide

# Skinnability

One of the significant features of the Component Development Kit (CDK) is a skins-based technology which helps you to create a modern rich user interface look-and-feel. RichFaces has a number of predefined skins you could use wtih the <inputDate> component. But if you want to create your own skin, please, read carefully the "Skinnability" section of the RichFaces Developer Guide. You could find all neccesary information about Built-in skinnability in RichFaces, XCSS file format, Plug-n-Skin feature, etc. there.

It's time to create XCSS file. You should go to the src/main/resources/org/mycompany/renderkit/html/css and create inputDate.xcss file there with the following skeleton:

    <?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:template>

According to the <inputDate> markup you need to define following selectors and classes in the inputDate.xcss:

- `.my-inputDate-input`, `.my-inputDate-icon` selectors

      ...
      <u:selector name=".my-inputDate-input">
      	<u:style name="border-color" skin="panelBorderColor"/>
      	<u:style name="background-color" skin="controlBackgroundColor"/>
      	<u:style name="color" skin="controlTextColor"/>
      	<u:style name="font-family" skin="generalFamilyFont"/>
      	<u:style name="font-size" skin="generalSizeFont"/>
      </u:selector>
      <u:selector name=".my-inputDate-icon">
      	<u:style name="border-color" skin="panelBorderColor"/>
      	<u:style name="background-image">
      		<f:resource f:key="/org/mycompany/renderkit/html/images/inputDate.png" />
      	</u:style>
      </u:selector>
      ...

- `.my-inputDate-input`, `.my-inputDate-icon`, and `.my-inputDate-caption` classes

      ...
      .my-inputDate-input{
      background-color: #EBEBE4;
      border: 1px solid #7F9DB9;
      float:left;
      }
      .my-inputDate-icon{
      margin-left: 3px;
      }
      .my-inputDate-caption{
      color: #000000;
      }
      ...

You could find a complete inputDate.xcss in inputDate.xcss file.