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

New Gallery > JSF Facelets > ADF Skin

Provide a file name and the skin family

Enter FileName for ADF Skin

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

Inherit skyros in ADF Skin 

Add your custom classes to the MyDemoSkin.css file

Add custom class to ADF Skin


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
Review ADF Skin

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>

Review ADF Skin


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.

Captive
Code