Shay Shmeltzer's Oracle Development Tools Tips

Styling Specific ADF Components with CSS and Skin

Shay Shmeltzer
Director of Product Management - Oracle

So you need one instance of a component in your ADF application to have a different color. Your first instinct would be to just go to the style area in the property inspector and change it. Well, you might want to rethink this, a better way would be to define your style in a central location for easier future maintenance, and an even better way might be to use an ADF Skin for this. This way you have one location for your global skinning and specific styles.

Here is a demo of how to go about doing this.

Also in this demo a quick explanation of the difference between InlineStyle, ContentStyle and StyleClass.

Join the discussion

Comments ( 8 )
  • Hamed Tuesday, March 27, 2012

    hi i want write css in jdevloper no make css?

  • guest Wednesday, September 19, 2012

    Thank you. Very helpful.

  • guest Thursday, December 6, 2012


    I created a simple web page using ADF components with CSS and skins. However I am having trouble adding images to this page. Is there any material or videos that can help me with this? Appreciate your help.



  • Shay Thursday, December 6, 2012

    Sally, I'm not sure what issues you are having and what specifically you are trying to do - I would suggest you post your question on the ADF discussion forum on OTN.

    In general you can add images to an ADF application with the af:image component.

    You can also have images as background components for areas of your page if you need a nicer background.

  • Candace Phelps Wednesday, November 27, 2013

    Hi Shay,

    Could you update this post? The content seems to have disappeared for the differences between InlineStyle, ContentStyle and StyleClass.


  • Shay Tuesday, December 3, 2013

    Candace - post updated with the video again.

  • Phil Friday, August 21, 2015

    Hi Shay,

    Is it possible to use this technique for server-side properties too? Specifically I am trying to change cell padding for one af:table in my application.

    I followed the information in the skinning guide and this works:



    -tr-padding-left-width: 8;

    -tr-padding-right-width: 8;


    But this does not seem to work (I have styleClass="PaddedTable" on my af:table component):

    .PaddedTable af|table


    -tr-padding-left-width: 8;

    -tr-padding-right-width: 8;




  • Shay Friday, August 21, 2015

    Phil - I believe this should work - use the browser developer mode to check which style is associated with your table at runtime and see if anything overwrites your changes.

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.