One fairly common remark on ADF Faces applications is their Look and Feel. The default look and feel is the Oracle BLAF, and either you love it or you hate it or so it seems. I get people hardly looking at the functionality of the application, the wild richness of the UI widgets and the flashy Ajax style partial page refresh but immediately starting to complain about those vague greenish/brownish/blueish/Oracle-ish colors. Another frequently heard comment is that a BLAF interface has so little useful real estate, as the BLAF components take up so much space. A typical Oracle BLAF User Interface would be something like the following:

Oracle has some excellent articles on the internet that describe how you can define your own custom look and feel through the use of Skins. So if you do not like Oracle BLAF – skins are your solution. Custom skins take the Simple look and feel as starting point, that custom skins extend from or override.

However, creating a custom Skin can be a quite elaborate task. The Oracle BLAF has quite a number of cool features – such as dynamic button generation, a well thought out set of icons in tree, tree-table and other complex components, etc. – that can be quite cumbersome to recreate in a custom skin . Besides, not all ADF Faces components can be customized using a custom Skin, for example the Tree component’s icons can not be set.

If all you want to customize in the ADF Faces look and feel are Fonts and Colors and you would like to benefit from all other Oracle BLAF features, you do not need to take the long road of creating a custom skin. This article demonstrates how you can easily achieve an Oracle BLAF based UI with your own color-scheme and font selection. With minimal effort, we turned the above application into this one:

The Oracle BLAF – or any other Skin such as Minimal or Simple or any Skin you create yourself – is configured in the WEB-INF\adf-faces-config.xml file:

If we want to change the Skin, this is where to do it. However, we want to modify the Oracle skin itself but still use it as a starting point, so the setting shown above should not be changed. It turns out that ADF Faces has separate render classes for the three major skins – Minimal, Simple and Oracle. To benefit from for example the icons in the tree-component, we have no choice but to leverage the Oracle skin as only the render-classes associated with the that skin render these icons. I was surprised to find out how large distinction between the three skins is in terms of code. I naively had expected each Skin to basically consist of a set of configurations, icons and a stylesheet. But apparently there are many specific classes tied in with each specific core Skin. Note that any custom skin builds from Simple and therefore automatically leverages the "code fork" for Simple.

The Oracle skin can be configured to a certain extent from the file oracle-desktop.xss. This file can be found in the jar adf-faces-impl.jar.

The first step to customizing the Oracle skin is extracting oracle-desktop.xss from the jar-file. Save this file in a directory called WEB-INF\lib\META-INF\adf\styles, like this:

Now when you run your ADF Faces application, it will use this file to dynamically generate a CSS, at runtime. In this file, we can specify colors and fonts, thereby influencing the Oracle BLAF. Here is a fragment from the oracle-desktop.xss that we customized in order to give our application an AMIS look and feel:

Note: when you rerun the application, you should Clear the Browser Cache, as it is likely to retain the old CSS file based on the original Oracle BLAF configuration!

<?xml version="1.0"?>

<!-- The oracle-desktop.xss style sheet defines the styles that are specific to the desktop implementation of the Oracle Browser Skin. The styles defined here are automatically layered on top of the styles defined by simple-desktop.xss. As such, this style sheet should only contain new BLAF-specific styles that are not defined by base-desktop.xss, or BLAF-specific overrides of styles that are defined by base-desktop.xss.-->

We have searched so long for exactly this. Finally i got. I tried this. But there is no change while executing the things. I will listout what i have done. 1)I extract the adf-faces-impl.jar 2)i created a folder structre as you have mentiond (WEB-INF\lib\META-INF\adf\styles) and pasted the xss file here. 3) i made changes in xss file(oracle-desktop.xss) 4)I cleared the cache. 5)I excecuted the page. But there is no change. Please help me out regardsing this.

Hmmm, just one follow-up issue … We occasionally get the Oracle BLAF images making a comeback, i.e finding their way into the browser cache to spoil the look of our customised version. I guess because the image file names are not changed, different customisations can’t coexist cleanly in the same browser instance with the original BLAF or with each other. The first version of an image that gets into the browser cache will dictate the look of that image until such time as the user clears the browser cache. Do you perhaps have a Cunning Plan to get around this? E.g. force bypassing of the cache, or somehow rename the image files, etc?

Hi,can u tell me if i can make a new new-desktop.xss file and make the changes in that.If I can do that please tel me what to change in the config file.Should i set hte skin-family name to new instead of oracle?

Hi, I found a solution, I hope it’s not the best, in the jsp in #MyColor & #0D3F96 in . Then, :), I modified adf-faces-impl-ea17\oracle\adfinternal\view\faces\ui\laf\oracle\desktop\cImages\cctts.gif with a paint-like to replace the transparent zone with #MyColor. Then re-make the .jar, delete the (tomcat cache -> …/work), give a kick in the cat and you have a panel box with the good color. I realy hope there’s an other solution…

There is a responsibility provided by Oracle ‘Custom Look and Feel’ using which we can change the appearance .i.e. define the custom fonts and colours etc. These changes are sotred in .xss files in the server.

Hi, We are customisating the look n feel for oracle web module. Which methdod is the better and latest do achieve this? We can achieve this using ‘skins’ or we can also achieve using ‘Custom LAF’ responsibility provided by ORacle. Pls suggest

Adrian, you’ll need to copy the styles you want from base-desktop.xss into oracle-desktop.xss and modify them there. Santiago, you’ll want to do the same as Adrian, copying AFTableCellDataBackgroundColor and AFTableCellDataBandedBackgroundColor.

I have had some serious problems with this approach. It seems like some ADF components in the oracle skin don’t use the colours as you’d expect. Here are the ones I’ve found: – panelBox has an image for the rounded top-left corner that seems to be generated from AFDarkAccentBackground plus #251f37 instead of from the background you specify for the panelBox. This is fine with the Oracle colours as it’s the same thing by default, but causes very undesirable results if you want to change the offset for AFLightAccentBackground. – ‘messages’ panel seems to ignore the background set on its body completely and just use AFDarkAccentBackground.

This works great but I also want to override base-desktop.xss as well do that I can override base styles like AFFieldText when I modify it there I see no change. Any suggestions ? what am I doing wrong?

Yes you can. Please study the oracle-desktop.xss and base-desktop.xss to find the proper styles to override. Alternatively, look in the On Line Help for JDeveloper at “Selectors for Skinning ADF Faces Components” . You will find af:panel… selectors and af:table selectors that should help you get what you want.