CSS in ADF

ADD CSS in ADF Application(ADF Skin )




In this Post I will Tell you How to use CSS(ADF Skin) in an Application to enhance its Design.

1. First Create a Fusion Web Application and create a page.
2. Add some component to page as buttons ,panel collection , input text etc.
3. Now we apply CSS on page , for that first create a ADF Skin
4. Right Click on ViewController--->New--->Web Tier--->JSF/Facelets--->ADF Skin
5. By default ADF Skin name is skin1,2...like this
6. After creating skin open it and, at left side you will see all components as Button, Layouts, Output text and so on
   
   
   
   
   
   7.Now expand the components that you want to change , change it color(on active, focus , hover etc) and other properties. See in image below
   
   
   
   
   
   
   
   
   
   
   
   
   
   8. Now do this with other components that you want to change.
   9. Open trinidad-config.xml and you will see <skin-family>skin1</skin-family>
   10. This means skin1 is applied on application and if you create another skin as skin2
   11. Then in trinidad-config.xml it change to <skin-family>skin2</skin-family> because ADF automatically choose the most recent skin.
   12. Here all is done and skin is applied on application.