Board index JavaServer Faces Themes Commandbutton default state css

Commandbutton default state css

Theme Framework

Post 16 Feb 2012, 12:03

Posts: 16
Hello everyone,

I have been banging my head with this one for quite some time now and hope some of you can help me.

My problem:
I want to override the css for command button when and only when the button is in default state.

What I've tried:
The whole button can be overridden with
.ui-widget .ui-button { /* css stuffs here*/ }

But I just want to override the default style so I thought it would work to just add the .ui-state-default the css like this
.ui-widget .ui-button .ui-state-default { /* css stuffs here*/ }

but that was a no go. The browsers didn't even acknowledged this.

Is there any css gurus out there that might help me with this kind of annoying thing?

Thanks

T.dot User avatar
Expert Member

Posts: 605
Location: Vienna/Austria
This won't work because .ui-button and .ui-state-default are applied to the same component. Your css would only work if they were in a hierachy.

But you could try the following:
.ui-widget button.ui-state-default { /* css stuffs here*/ }
or
.ui-widget input[type="button"].ui-state-default { /* css stuffs here*/ }
Using PF 3.3-5.0, Mojarra 2.1.-2.2, Tomcat 6-8, JBoss 5-7

Some of my issues won't get fixed #3423 #3489 ;)


Posts: 16
Hi T.dot and thanks for your answer.
The
.ui-widget button.ui-state-default
kind of works. Problem is that styling doesn't change when hovering or activating the button. I know this can be solved by
.ui-widget button.ui-state-hover
and
.ui-widget button.ui-state-active
.
But what I really want is just to change the css for all default components that has the .ui-button style class defined. Any leads on that?

T.dot User avatar
Expert Member

Posts: 605
Location: Vienna/Austria
I asked google how you can apply styles to parallel style classes and it should look something like this:

.ui-button.ui-state-default {
background-color: red !important;
}
.ui-button.ui-state-hover {
background-color: green !important;
}
.ui-button.ui-state-active {
background-color: blue !important;
}
Using PF 3.3-5.0, Mojarra 2.1.-2.2, Tomcat 6-8, JBoss 5-7

Some of my issues won't get fixed #3423 #3489 ;)


Posts: 16
Thank you T.dot!


Return to Themes