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
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"/>
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.