Configure ADF Skin in Jdeveloper

Sharing is Caring

In JDeveloper there is no option to create and configure ADF Skin declaratively
In order to apply the skin, we have to create a simple CSS file and then configure the application to use this CSS file as skin. JDeveloper doesn’t do this for us 🙁 we have to do it manually

So the 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 support 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

Configure ADF Skin

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 "";


But you’ll see that there is no change in the look of the 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="">

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="">

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

Cheers 🙂 Happy Learning

Related Posts

0 thoughts on “Configure ADF Skin in Jdeveloper”

Leave a Reply

Your email address will not be published. Required fields are marked *