ADF Skinning : Change color and style of af:query buttons in ADF Faces (Jdev 12.1.3)

Sharing is Caring

Hello All,

This is another post about ADF Skinning, in this post, I am going to show you that how can we change button’s style in af:query component
Actually, this is very easy, if we define some styles for af:button component in our CSS file then it will be applicable on af:query’s buttons (Search, Reset, Advanced, Save etc) too

Suppose I have defined this in CSS file

af|button{
    color:navy;
    font-weight:bold;
}

Now it will change color of all buttons of application including af:query
See this snap after applying this skin

But if you have a requirement to use a different style in af:query buttons or you don’t want to change color of all buttons
Then it is not that much easy as it seems

There is a selector to style buttons of af:query – af|query::button 
But this works only if buttons are af:commandButton not af:button
See from docs-

af|query::button Styles the buttons of the query component. Note that this skin selector is only present when the skin selector -tr-button-type is set to ‘old’, and the query buttons are rendered as af:commandButtons. When the -tr-button-type is set to ‘unified’, the query buttons are rendered as af:buttons and have the default stylings for af:button applied, so that query buttons have the same look and feel as all other buttons. Tip: If you skin this selector’s background-image, you may also want to skin it for :hover, :active, :focus. The :disabled state is currently not supported. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.

So for this first i have to change -tr-button-type selector to old so that i can use af|query::button
Now see the css

af|query {
    -tr-button-type: old;
}

 af|query::button {
    color: red;
    font-weight:bold;
}

af|query::button:hover {
color: Orange;
font-weight:bold;
}

af|query::button:focus {
color: maroon;
font-weight:bold;
}

af|button{
color:navy;
font-weight:bold;
}

Check the output-

To use a specific style for af:query you can create styleClass in CSS file and put this in styleClass property of af:query
Suppose i have two af:query components on the page and I want to use the different style for both
For this, I have defined two different styleClass in CSS file like this-

af|query {
    -tr-button-type: old;
}
 .mystyle1 af|query::button {
    color: red;
    font-weight:bold;
}

.mystyle2 af|query::button {
color: darkgreen;
font-weight:bold;
}

and on the page put myStyle1 in styleClass property of first af:query component and myStyle2 in the second af:query
See how it looks now –

af:query

Cheers, Happy Learning  ☺

Related Posts

1 thought on “ADF Skinning : Change color and style of af:query buttons in ADF Faces (Jdev 12.1.3)”

Leave a Reply

Your email address will not be published. Required fields are marked *