How to Apply CSS in ADF-ADF Skinning

We can change look and Feel of our page using skins in Oracle ADF, skin is a CSS file that we apply on page using Jdeveloper

• How to use CSS(ADF Skin) in an Application to enhance its Design, first Create a Fusion Web Application and create a page.
• Add some component to page as buttons ,panel collection , input text etc.
• Now we apply CSS on page , for that first create a ADF Skin
• Right Click on ViewController--->New--->Web Tier--->JSF/Facelets--->ADF Skin



• By default ADF Skin name is skin1,2...like this
• After creating skin open it and, at left side you will see all components as Button, Layouts, Output text and so on

• Now expand the components that you want to change , change it color(on active, focus , hover etc) and other properties. See in image below



• Now do this with other components that you want to change.
• Open trinidad-config.xml and you will see
  
  1. <skin-family>skin1</skin-family>
• This means skin1 is applied on application and if you create another skin as skin2, image shown below



• Then in trinidad-config.xml it change to
  
  1. <skin-family>skin2</skin-family>
  
  because ADF automatically choose the most recent skin.
• Here all is done and skin is applied on application.