ADF: Skinning: Creating a custom skin for an ADF Application

Applying style to your ADF application can radically change its look and feel. Here’s the basics on how!

Creating a Skin File

Using the new component wizard à JSF/Facelets à ADF Skin

Provide a file name and the skin family

Select the base skin custom skin (MyDemoSkin.css) will be based on

 

Add your custom classes to the MyDemoSkin.css file

Understanding the Impact

An entry is made in the trinidad-skins.xml

• You can define multiple skin files within the trinidad-skins.xml file
• You can define multiple skin files within the skin family

An entry is created the trinidad-config.xml file defining the skin family that is used by the application.

• You can have multiple skin families defined within your application. The <skin-family> tag specifies the skin family that is currently being used by the application.
• You can use EL expression to programmatically apply skin family programmatically  here:
• <skin-family> #{mybean.value}</skin-family>

Learn how to define custom style classes and apply them to ADF Faces components in my next post.


Hope you find this information useful. Please share your feedback below. I would love to hear from you.

CaptiveCode