ADF Skinning: Skin an ADF Pop-up

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

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.