How To Apply ADF Skinning In Your Fusion Web Application By Rahul Sharma

What is CSS?

CSS stands for Cascading Style Sheets.Basically it is a style language which is used for defines
the layout of html documents.It covers fonts, colors, margins, lines, height, width, background images, advanced positions and many other things.

Steps to apply CSS in Fusion Web Application(ADF).

1.) Create your Fusion Web Application(ADF).
2.) Create an xml file called trinidad-skins.xml under view-controller WEB-INF and put this below
code.

<?xml version="1.0" encoding="windows-1252" ?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>lspskin.desktop</id>
<family>sharmaskin</family>   //must be same as you defined in trinidad-config.xml
<extends>blafplus-rich.desktop</extends>
<style-sheet-name>css/my.css</style-sheet-name>
</skin>
</skins>

3.) In trinidad-config.xml, add the below 3rd line.

<?xml version="1.0" encoding="windows-1252"?>

<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>sharmaskin</skin-family>
</trinidad-config>

4.) my.css file code.

body
{
background :white ;
}
af|inputText.lspCustomSkin::content  
{
background-color: Fuchsia;
}
af|inputText.lspCustomSkin::label
{
background-color: Orange;
color: Aqua;
}

If you getting any error in you css file then Go to - Tools - Preferences - CSS Editor - Check ADF
Extension Check Box - Press OK.

5.) Test.jspx Page Code.

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1">
<af:form id="f1">
<af:inputText label="Rahul Sharma" id="it1" styleClass="lspCustomSkin"/>
</af:form>
</af:document>
</f:view>
</jsp:root>

You want to see the your modify CSS results without restarting the web application.
Go to web.xml file context parameters set this context parameter value true.

org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION = true.

Now just deploy your application with this parameter and modify your CSS code then press
F5.You can see the changes.