How to create custom CSS file for ADF Web application

How to  create custom CSS  file for ADF Web Application

Here is the step by step process .. Before that create a view controller project in the ADF Web Application

1) create trinidad-skins.xml(If you don't find ) in this path (..\ViewController\public_html\WEB-INF\trinidad-skins.xml)
   
<?xml version="1.0" encoding="windows-1252" ?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
  <skin>
     <id>MyOwn.desktop</id>
    <family>MyOwn</family>
    <extends>blafplus-rich.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>css/sample.css</style-sheet-name>  
  </skin>
</skins>

2)trinidad-config.xml

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
  <skin-family>MyOwn</skin-family>
</trinidad-config>


2) CSS file is in the path
    \ViewController\public_html\css\sample.css
   
   
3) The below property can be set in the view controller project web.xml. This will check the automatic changes in your css file and reflect in the Adf UI after refresh.
   This should not be used in Production environment..    By Default this property is set to false.
<context-param>
    <description>If this parameter is true, there will be an automatic check of the modification date of your JSPs, and saved state will be discarded when JSP's change. It will also automatically check if your skinning css files have changed without you having to restart the server. This makes development easier, but adds overhead. For this reason this parameter should be set to false when your application is deployed.</description>
    <param-name>org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION</param-name>
    <param-value>true</param-value>
  </context-param>
 
 
Thats it !!! Its done.

Test it with the below steps

1)content in sample.css
   
    af|commandButton {
        color: red;
        font-weight: bold;
        font-size: 12px;
        text-decoration: none;
    }
2)create a button in jspx page and run  .
    <af:commandButton text="Search" id="cb1"/>