OAF: Creating custom CSS in Oracle Application Framework.

Recently I saw a question in OTN Forum on how to create custom CSS in OA Framework. Its long time I have done some custom CSS for OA Framework. So thought of putting a blog on how to add custom CSS for OAF Pages.

Refer the below link for Standard CSS available : Text (CSS) Standards
To get the HTML Color Codes : HTML Color Codes and Names

To add custom style sheet to your application, you need to modify the custom.xss file. The file is available under $OA_HTML/cabo/styles.

#1. Using custom.css

• Take a backup of the custom.xss
• Add the code between the below lines in the custom.css

 <!-- Please start your customizations here -->  
  // Add the custom code here  
 <!-- Please end your customizations here -->  

• Sample code

 <!-- Please start your customizations here -->  
      <style name="CustomStyle1">  
           <property name="color">#0000FF</property>  
           <property name="background-color">#FFFF00</property>  
      </style>  
      <style selector=".XXCustomStyle1">  
        <includeStyle name="CustomStyle1"/>  
      </style>  
     <style name="CustomStyle2">  
           <property name="color">#FF0000</property>  
           <property name="background-color">#00FF00</property>  
           <property name="font-weight">bold</property>  
      </style>  
      <style selector=".XXCustomStyle2">  
        <includeStyle name="CustomStyle2"/>  
      </style>  
 <!-- Please end your customizations here -->  

• Now you can refer the new style in the page using "XXCustomStyle1" for the CSS Class property of the beans in the page.

#2. Writing code in Controller

 import oracle.cabo.style.CSSStyle;  

 CSSStyle customStyle = new CSSStyle();  
 customStyle.setProperty("color", "#FFA500");  
 customStyle.setProperty("font-size", "13pt");
   
 OAMessageDateFieldBean dateBean = (OAMessageDateFieldBean)webBean.findChildRecursive("DateBean");  
 dateBean.setInlineStyle(customStyle);  

• Find the screen shot below to see the output of the above code. First column is based on the controller code and the 2nd and 3rd columns are based on the custom.xss.
  
• Now, you can also make use of the OADataBoundValueViewObject class to dynamically change the CSS.  I have modified the View Object query to add an extra column 'CustomCssStyleAttr'. I am getting the Custom CSS Style Class as an attribute. In the below query, we will get 3 different values, XXCustomStyle1, XXCustomStyle2, NULL. The query is as below.

 select creation_date start_date  
     ,user_id Hours  
     ,decode(mod(rownum,3),0,NULL,1,'XXCustomStyle1',2,'XXCustomStyle2') CUSTOM_CSS_STYLE_ATTR  
 from fnd_user  

• Also, modifed the controller code as below.

 CSSStyle customStyle = new CSSStyle();  
 customStyle.setProperty("color", "#FFFFFF");  
 customStyle.setProperty("background-color", "#FF00FF");  
 customStyle.setProperty("font-size", "11pt");
   
 OAMessageDateFieldBean dateBean = (OAMessageDateFieldBean)webBean.findChildRecursive("DateBean");  
 dateBean.setInlineStyle(customStyle);
  
 OAColumnBean customStyleCol = (OAColumnBean)webBean.findChildRecursive("CustomStyleCol");  
 OADataBoundValueViewObject customStyleCSS = new OADataBoundValueViewObject(customStyleCol, "CustomCssStyleAttr");  
 customStyleCol.setAttributeValue(oracle.cabo.ui.UIConstants.STYLE_CLASS_ATTR,customStyleCSS);  

• Now see the output.
  

If your changes are not reflecting in the page, remove the files from  $OA_HTML/cabo/styles/cache directory and bounce the server.

References :
https://community.oracle.com/thread/600398?start=0&tstart=15
https://community.oracle.com/thread/1056912?tstart=0
http://abhayappssolution.blogspot.com.au/2013/03/custom-font-for-message-text-items-on.html

Feel free to point out if anything is missing/wrong in this blog.