p:splitButton colored button doesn't work

[pfroy]

The Volt template provides different color styling for buttons. Ex.: GreenButton, RedButton, etc...

When I'm trying to apply the color styling to a Primefaces splitButton, nothing happends. The button color is not changed. Any idea why it doesn't work? Shouldn't the color could by applied to any type of buttons?

Code: Select all

<p:splitButton id="createButton" action="View?faces-redirect=true" value="Inspect" type="button" icon="ui-icon-plus fa fa-plus" styleClass="OrangeButton">

Best regards
Pierre

[mert.sincan]

Please try with;

Code: Select all

.OrangeButton .ui-button { background-color:#EF6C00;}
.OrangeButton .ui-button.ui-state-hover , .OrangeButton .ui-button.ui-state-focus {background-color:#FF7504 !important;}

We will add this fix into theme-variables.less for next release.

[pfroy]

Hi aragorn,

I did as you suggested, adding the css in a separate custom.css file. I'm keeping every overrides in a different css file. I'm looking forward a new release of Volt. when it is planned?

By the way the color is being changede to orange. But as soon as I apply the overridden class to the splitButton, it looses it's round corner. The button become totally square, unlike regular button. Please look at the screenshots.





Regards

[mert.sincan]

We decided not to add these changes in next release. Because, we saw some problems in our themes with my changes. So, please use OrangeButton(GreenButton, RedButton, etc.) for only buttons(p:commandButton, p:button).

You can try this code for your issue;

Code: Select all

.OrangeSplitButton .ui-button{
   background-color: #EF6C00;
}
.OrangeSplitButton.ui-state-hover .ui-button,
.OrangeSplitButton.ui-state-focus .ui-button{
   background-color: #FF7504 !important;
}

<p:splitButton styleClass="OrangeSplitButton" ...>

Screenshot;

[pfroy]

Dear aragorn,

Thanks for the fix. I'll keep the changes on a separate custom.css for now until Volt is updated.

Now I see the orange splitButton, but the hover is not working. The button is staying the same color even if css specify a different hover color.

Need more help .

Code: Select all

.OrangeSplitButton .ui-button{
    background-color: #EF6C00;
}
.OrangeSplitButton.ui-state-hover .ui-button,
.OrangeSplitButton.ui-state-focus .ui-button{
    background-color: #FF7504 !important;
}

[mert.sincan]

Sorry for my mistake. Please try with;

Code: Select all

.OrangeSplitButton .ui-button{
    background-color: #EF6C00;
}
.OrangeSplitButton .ui-button.ui-state-hover,
.OrangeSplitButton .ui-button.ui-state-focus{
   background-color: #FF7504 !important;
}

<p:splitButton styleClass="OrangeSplitButton" ...>

Happy new year