ADF Skinning in JDeveloper 11G

With JDeveloper 11G you can change every ADF Rich faces component with CSS. This is called Skinning. In this blog I made an example workspace and I will show you what to do if you want to apply Skinning in your web application.
Here is an image of the main page where I have a custom PanelTabbed which contains some inputtext items, PanelGroup with custom corporate branding selectors and two PanelBoxes with some buttons

First we can add a new css file to the project.


Create a new file called trinidad-skins.xml in the WEB-INF folder. Make sure it extends from blafplus-rich

<?xml version="1.0" encoding="windows-1252" ?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
  <id>myskin.desktop</id>
  <family>myskin</family>
  <extends>blafplus-rich.desktop</extends>
  <style-sheet-name>css/layout.css</style-sheet-name>
</skin>
</skins>

We need to change the trinidad-config.xml file so it will use the new skin

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

If you want to test your css the you should change the CHECK_FILE_MODIFICATION context parameter to true. ( This is located in the web.xml ).
Now you can change the css file and press F5 to refresh the page to see the result without restarting the web application.

We need to use CSS level 3 and enable ADF faces Extension. ADF will automatically converts this to a level 2 css file. Open the JDeveloper preferences window to change this.

There are some great reference resources for Skinning, the first resource is located in the JDeveloper help.


The second reference is the demo page of Oracle where you can test the Skinning features of every JSF component

JDeveloper provides some css tools to help you, but these tool does not work so well. Oracle must take a look at Adobe Flex, that's is working perfectly ( maybe next version). Here is an image of the css structure window.
JDeveloper also has a property window. It will show you all the css properties and not the properties which can be used by component selector.
The only what works is to open the css file and do it yourself. JDeveloper helps you with the possible options.

Here is my example workspace which you can use and test it yourself.