PrimeFaces: how to override CSS class

Question

When a button is created, the class ui-corner-all is always applied. I tried the following:

<p:commandButton id="like" styleClass="ui-corner-right" />

but it didn't work. On Firebug, I saw both ui-corner-all and ui-corner-right:

<div id="form1:like" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-corner-right">

UPDATE 1:

Following the hint from JMelnik, I finally succeeded to change the style of ui-corner-all to ui-corner-right by adding the following script:

<style type="text/css">
    #myForm\:likeButton .ui-corner-all {
        border-radius: 6px 0px 0px 6px !important;
    }
</style>

and wrap the <p:commandButton> inside <h:panelGroup> as following:

<h:form id="myForm">
    <h:panelGroup id="likeButton">
        <p:commandButton />
    <h:panelGroup>
</h:form>

UPDATE 2:

Thanks to BalusC's suggestion, the following solution should be better:

<style type="text/css">
    .likeButton .ui-corner-all {
        border-radius: 6px 0px 0px 6px !important;
    }
</style>  

<h:panelGroup styleClass="likeButton">
    <p:commandButton />
<h:panelGroup>

Best regards,

try loading your css file in the end for example in the `` and also , make sure you override the needed attribute that are defined by `ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ` INMO in your case you better don't try manipulate css from js — Daniel, Jun 21 '12 at 09:44
The `\:` doesn't work in MSIE. Such a button can hardly be totally unique in your view. Rather use a classname. — BalusC, Jun 21 '12 at 11:02
Related: http://stackoverflow.com/questions/8768317/how-do-i-re-write-those-class-defined-in-primefaces-css and http://stackoverflow.com/questions/5878692/how-to-use-jsf-generated-html-element-id-in-css-selectors — BalusC, Jun 21 '12 at 11:20

d1e · Accepted Answer · 2012-06-21T09:54:18.017

5

Use a standard CSS override way.

Include a *.css in your page, where you redefine ui-corner-all and ui-corner-right classes.

.ui-corner-all {
    //ovverides to nothing, you can also define any properties you want here
}

.ui-corner-right {
    //define properties  which would override unwanted behaviour
}

You can also apply additional css class which would override undesired properties.

edited Jun 21 '12 at 09:54

answered Jun 21 '12 at 08:57

d1e

6,372
2
28
41

Hmm... you mean I have to override the properties of `ui-corner-all` with that of `ui-corner-right`? Are there any ways to delete the `ui-corner-all` from the generated HTML? – Mr.J4mes Jun 21 '12 at 09:14
1

You could use javascript/jquery to "removeClass('ui-corner-all')" on items that have it. That's a bit messy though and depends on the users having javascript enabled. You could also use firebug to grab the CSS styles that "ui-corner-all" applies and then overwrite them all in your own CSS. Just repeating what JMelnik said here though. – ConorLuddy Jun 21 '12 at 09:20
@Mr.J4mes which solution did you use? – d1e Jun 21 '12 at 11:07
@JMelnik which one are you talking about :) – Mr.J4mes Jun 21 '12 at 11:11
Did you override .ui-corner-all? – d1e Jun 21 '12 at 11:12
@JMelnik yes. check out the updates in my answer. That's what I have done. – Mr.J4mes Jun 21 '12 at 11:15

PrimeFaces: how to override CSS class

1 Answers1

Linked