ADF - Customize a <af:commandButton> width the property styleClass

Question

I all, I'm new to the ADF language and after a long search and failed tries, I have to ask how can I change a button layout - background, border, ... - using the CSS and the property "styleClass" of the ADF?

In my .jspx I have something like:

<af:commandButton action="#{backing_test.echoAction}" id="echo1"  text="Save 1" styleClass="commandButton.buttonSaveTest" />

The thing is, after opening firebug, I found out that instead of a regular button, I have an image!

Thanks for you help!

Answer 1

You can't rely on what generated HTML you'll get for a specific component in ADF. The best way to get your own look and feel is to implement your own 'skin', which extends one of those already provided by ADF (eg, 'blafplus', or 'fusion', the new default). You then use the CSS selectors for the component you want, eg

af|inputText::content {
         background-color: red;
}

Check out the following link to learn about skinning http://download.oracle.com/docs/cd/E17904_01/web.1111/b31973/af_skin.htm#BAJFEFCJ

The hosted demo is an excellent way of finding out how to skin specific components. Eg, for your command button, check out:

http://jdevadf.oracle.com/adf-richclient-demo/faces/components/skinningKeys/commandButton.jspx