Bani Taha Blog

Sometimes we need to change the default look and feel for Oracle ADF components, In this example we will customize the selectors for ADF Table component. To get start we need to create a  skinFile.css inside the project, We can edit the  skinFile.css using ADF skin editor or the build in skin editor with JDeveloper. We can access the skin selectors using design or source tab at the end of editor window and you can start customization by set required attributes and styles from the property Inspector . We have change the header color, font style and table selector highlighted this applied for all project tables because we overwrite the global selectors while the JobId column has a custom selector, You can add your own style as you need, after we run the page the results will be like : You can download the sample source from here  -  Custom ADF Table Skin ( zip )  - JDev 11.1.2.4

The ADF skinning framework provides a range of selectors that you can specify in an ADF skin to customize the appearance of ADF Faces and ADF Data Visualization components. There are two types of selectors : 1 - Global selectors, A global selector defines style properties that you apply to one or more selectors. 2 - Component-specific selectors, A component-specific selector defines style properties that apply to one selector. The ADF skins provided by Oracle ADF define many global selectors (Global Selector Aliases in the user interface of the visual editor) that many ADF Faces components inherit. These ADF skins do not define global selectors inherited by the ADF Data Visualization components. For example, many ADF Faces components use the .AFDefaultFontFamily:alias selector to specify the font family. If you create an ADF skin that overrides this selector by specifying a different font family, that change affects all the components that have included the .AFDefaultFontFa