How to implement CSS in ADF

Hello all,

This is a small post regarding "Implementation of CSS in ADF". Implementation of CSS in ADF application is very common and is also very useful as well, as it enhance the User Interface (UI) of Application.

JDeveloper supports two options for applying style information to your ADF Faces components:

• Build a skin and a cascading style sheet (CSS) using defined style selectors and configure your ADF application to use the skin and style sheet.
• Use style properties to override the style information from the skin CSS to set specific instances of component display.

Here, we are going to use a CSS file to change the look and feel of ADF components.

Steps are as follows:

 1) First, create a Fusion Web Application (ADF). I have created CssInAdf.

Then, create a *.jspx page as showing above.

2) Now, you can add ADF faces components on your *.jspx page, so that we could apply CSS on those components. I have used ADF's outputtext component for the same.

Type outputtext in component palette (appears right side of your screen by default) &
Drag & drop Output Text (ADF Faces.Common Components) from component palette to your *.jspx page.

To provide space between two outputtext or any other components, you may use Spacer (ADF Faces.Layout) and can set its width or height as shown in the following image.

Here I haven't applied any panel or from on this *.jspx page. However, you may use PanelGroupLayout or PanelFormLayout to customize your page as per your requirement.

3) Now, right click on ViewController and go to New option. Create CSS file and give a name to it.

Now, there will be a CSS file under your Web Content section on your Application Navigator (left side of your screen). This CSS file comes up with some default text which you can delete if you do not need that.

Here, I have created 3 new CSS classes mycss1, mycss2 & mycss3 respectively. See below:

4) Now, create trinidad-skins.xml file. Right click on WEB-INF & choose New option. Now, select  XML Document (XML) from the list.

Now, paste the following code in trinidad-skins.xml file:

<?xml version="1.0" encoding="windows-1252" ?> <skins xmlns="http://myfaces.apache.org/trinidad/skin">; <skin> <id>myskin.desktop</id> <family>myskin</family> <extends>blafplus-rich.desktop</extends> <style-sheet-name>css/style.css</style-sheet-name> </skin> </skins>
**Note: Please note one thing that skin-family should be same in both XML file (trinidad-config.xml & trinidad-skins.xml). Like I have used skyros in both the files.

In above image style.css (text in red circle) is the name of the CSS file which we had created earlier and css is the name of the directory under which it exists.

5) Now, go to your *.jspx page and find resource component in your component palette. Drag & drop it on form of your *.jspx page and select type as CSS.

6) Now, select resource component from you *.jspx's Structure panel and go to its Property Inspector. Provide the source of your CSS file as shown below :-

After clicking on Edit button you can choose your style.css file and press OK. Now, you would be able to see something like below:

7) Now, select the the OutputText component from your *.jspx page and go to its Property Inspector and provide the CSS class name in StyleClass section. Changes will be shown on your JSPX page. Like below:

Repeat the same thing for next two OutputText component & run your JSPX page. JOB DONE...!!
Here is the final screen....

--> You can download the sample application from here


Here we done....Thanks , Happy Learning :)