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

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 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 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 page and i want to use different style for both
For this i have define 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 page put myStyle1 in styleClass property of first af:query component and myStyle2 in second af:query
See how it looks now -

Cheers, Happy Learning  ☺