Configure ADF Skin in Jdeveloper 11.1.1.7

In Jdeveloper 11.1.1.7 there is no option to create ADF Skin declaratively
In order to apply skin we have to create a simple CSS file and then configure application to use this CSS file as skin. Jdeveloper doesn't do this for us :( we have to do it manually

So first step is to enable Skin Selectors for ADF Faces, Without enabling this CSS editor doesn't show ADF Faces component tags
CSS files by default supports HTML tags  only

Go to Tools > Preferences > CSS Editor and set CSS level to level 3 and check the box to support ADF Faces Components

Now create a CSS file -
Right Click on View Controller project > Select New > Web Tier > HTML > CSS File 

 
Provide a name for CSS file and click OK

Created a page and dropped af:commandButton in that and added this code in CSS file

@namespace af "http://xmlns.oracle.com/adf/faces/rich";

af|commandButton{
    color:blue;
    font-weight:bold
}

But you'll see that there is no change in look of button , it means CSS is not working as of now

This is because that there is no change in trinidad-config.xml file and we have to do it manually
Replace trinidad-config.xml with this code

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
   <skin-family>MyCss</skin-family>
  <skin-version>v1</skin-version>
</trinidad-config>

and create a new XML file called trinidad-skins.xml , this file manages skins in ADF Application

<?xml version="1.0" encoding="windows-1252" ?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
   <id>skin1.desktop</id>
   <family>MyCss</family>
   <extends>skyros-v1.desktop</extends>
   <style-sheet-name>css/skin1.css</style-sheet-name>
</skin>
</skins>

<skin-family> of trnidad-config.xml and <family> attribute of trinidad-skins.xml should be same
Now check again, CSS is now become ADF Skin ;)

Cheers :) Happy Learning