Skinning in practice

Now that we know what skinning is and what it can do, let's create and apply a skin to the example application.

Creating a skin CSS file

The most important part of your skin is the special ADF CSS file that defines the look of all the components you use in your application.

To create the CSS file, follow the ensuing steps:

1. Select the CommonSkin project and navigate to File | New | From Gallery.... Under Web Tier | JSF/Facelets, choose ADF Skin. The Create ADF Skin dialog appears, as shown in the following screenshot:

   

2. Give your CSS file a filename that includes –skin (for example, xdm-skin.css). You can leave the location at its default setting, and you don't have to change the value for Family either.

   Tip

   Skin families

   Skins come in families—a collection of related skins. All skins in a family share the same family name, and each skin in the family has a unique Skin Id consisting of the family name and a platform suffix. You start with the .desktop member of the family—this...