Mastering the art of ADF Skinning can help you change the look and feel of your application. Please view some of my prior blogs to get acquainted with the basics - How to create an ADF Skin, Applying custom class to ADF Faces
Today, we will discuss a specific use case. I have been asked the question – How to apply a border to an ADF popup? Let’s figure out how!
Skinning a PopUp
1. Create a custom skin MyDemo.css (Refer this post if you don’t know how to do this)
2. Identify the root component within the popUp. For this example, I am considering it to be an dialog box.
2. Add the following class to MyDemo.css
af|dialog.myClass {
border: solid;
border-width: thick;
border-style: solid;
border-color: Red;
}
3. Apply the class to the popup component
<af:popup childCreation="deferred" autoCancel="disabled" id="p1">
<af:dialog id="d2" styleClass="myClass">
<af:outputText value="This is my dialog box" id="ot2"/>
</af:dialog>
</af:popup>
4. Run the page. And here’s how the popUp should look
Hope you find this information useful.Please share your feedback below. I would love to hear from you.
No comments:
Post a Comment