ADF: Skinning: Applying a custom style class to an ADF Faces component

In my previous post we learnt how to create and apply a skin file to an ADF application. In this post, we shall learn how to add custom style classes and make your application look great!

Define your custom style class in the myDemoSkin.css file

.myFirstClass{      
        Color: Red;
Font-weight: bold;
}

• You can use the property inspector on the right to edit your style class

Applying the skin to a ADF Faces Component

Set the style class property of the ADF Faces component to your custom class' name

    <af:outputText value="This is how my styling looks on an outputText component." id="ot1" styleClass="myFirstClass"/>

This is how the result looks:


ADF 12c supports CSS 3.0 standards and is very powerful. You can do a range of things using CSS style your components, programmatically apply style classes and use expressions within style classes to control property values. We will discuss further more in my upcoming posts.


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

CaptiveCode