ADF Basics: Using CSS to change appearance of application (Skins and Styles in ADF Faces)

Hello All
This is a basic post about using CSS in ADF applications, how can you change appearance of ADF application using Skins (.css file)
See the steps to create and apply css in your ADF applications

• Create a Fusion Web Application and create a page
• Add Some ADF Faces component (input text,button,panel box, panel collection etc)
• Now to change appearance of default ADF Faces components , create an ADF Skin
•  Right click on ViewController--->New--->Web Tier--->JSF/Facelets--->ADF Skin 





• By default ADF Skin name is like skin1,2 etc




• After creating ADF Faces skin open it and, on left you will see all components as Button, Layouts, Output text and so on. this is ADF Skin Editor





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





• After creating your ADF Skin ,open trinidad-config.xml file in Jdeveloper editor and your will see like this



<skin-family>skin1</skin-family>

This means that skin1 is applied on Application

• now if you another ADF Skin file- skin2 then in trinidad-config.xml, it will be changed to



<skin-family>skin2</skin-family>



• ADF automatically choose the most recent skin, so here this is done , now create and configure your ADF Skin and customize appearance of application
• For more details see Oracle Docs- http://docs.oracle.com/cd/E16764_01/web.1111/b31973/af_skin.htm

Cheers :-) Happy Learning