How to apply the CSS in the ADF Application

ADF applications are provided by three default skins :-

1) oracle 2) simple 3) minimal. thought these skins provide good look and feel but what if you have to add your own skin in your ADF applications......

A skin consists of the following artifacts:
-> A CSS file that defines the actual look of the components
-> A configuration file. In our case it will be "adf-faces-skins.xml" which lists up all skins available for our application (not including Oracle, Minimal, and Simple). This file has to be located in your applications WEB-INF directory
-> An entry in the ADF Faces configuration file - adf-faces-config.xml

Creating a CSS file:

1) Right-click the project that contains the code for the user interface and choose
2) New to open the New Gallery.
3) In the New Gallery, expand the Web Tier node and select HTML.
4) Double-click CSS File.
5) Complete the Create Cascading Style Sheet dialog by giving CSS name.
6) Add various styles according to your requirement in the CSS

Register the CSS file:

1) Right-click your view project and choose New to open the New Gallery.
2) The New Gallery launches. The file launches in the Source editor.
In the Categories tree on the left, select XML. If XML is not displayed, use the
Filter By dropdown list at the top to select All Technologies.
3) In the Items list, select XML Document and click OK.
4) Name the file adf-faces-skins.xml, place it in the /WEB-INF directory, and click OK.
5) Replace the generated code with the code shown in

<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://xmlns.oracle.com/adf/view/faces/skin">
<skin>
<id>id name</id>
<family>family name</family>
<render-kit-id>oracle.adf.desktop</render-kit-id>
<style-sheet-name>path to CSS</style-sheet-name>
</skin>
</skins>

For example

Configure an application to use a skin:

1) Open the adf-faces-config.xml file.
2) Replace the <skin-family&gt value with the family name for the skin you wish to use