Styling Specific ADF Components with CSS and Skin

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.

Comments:

hi i want write css in jdevloper no make css?

Posted by Hamed on March 26, 2012 at 06:52 PM PDT #

Thank you. Very helpful.

Posted by guest on September 19, 2012 at 08:42 AM PDT #

Hi,
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.

Thanks,

Sally

Posted by guest on December 06, 2012 at 01:44 PM PST #

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.

Posted by Shay on December 06, 2012 at 01:51 PM PST #

Hi Shay,

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

Thanks

Posted by Candace Phelps on November 27, 2013 at 09:15 AM PST #

Candace - post updated with the video again.

Posted by Shay on December 03, 2013 at 10:23 AM PST #

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:

af|table
{
-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;
}

Thanks
Phil

Posted by Phil on August 21, 2015 at 10:26 AM PDT #

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.

Posted by Shay on August 21, 2015 at 04:03 PM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

me
I'm a Director of Product Management for the Oracle Mobile and Development Tools.
Follow me:
Search

Archives
« August 2015
SunMonTueWedThuFriSat
      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
     
Today