PrimeFaces: how to override CSS class


Tags: css,jsf-2,primefaces,styling

Problem :

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,



Solution :

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.


    CSS Howto..

    Trying to show two different images depending on two media queries

    How to Change blue background selection color from image using css

    How do I remove the gap between div tags?

    How long can a webpage be?

    jQuery or CSS - How do you make a link in a table row appear underlined even when the cursor is in a neighbouring cell?

    How do I organize imports in Compass/Blueprint?

    How can I conditionally change css styles with js?

    how to apply css to a specific element of a table?

    With media queries, how to prevent the browser from downloading a smaller background-image if a larger image has already been downloaded?

    How to move the POV of an image when using overflow: hidden?

    How to get the css with in inline styles using jquery

    How to wrap table cell at a maximum width in full width table

    how to format a single html a href text to have multiple css properties (two different font families)

    How to change opacity suddenly without transition (without fade) using keyframes

    How to float 3 LI's to the left and 3 to the right and maintain original sequence?

    How to make a HTML spinner with CSS

    How to change color of the selected item from a Xul listbox?

    how to load the content onclik menu?

    bar graph with CSS, how to get it filling in from bottom to top, not top to bottom?

    How do I loop a css animation with multiple keyframe definitions?

    How to set MenuItem to corrent width in asp.net

    JavaFX: How not to fill background outside the rounded borders of a Label within a ScrollingPane

    How to extend the border-top on my nav_bar class

    How to stop css class on textbox

    By CSS, how to make page height not change when an element is moved down

    rails redirect_to notice - how to apply css

    How to absolute position imageless corners with css

    How to force div width with CSS to stretch to its content but not to be restricted by its container?

    How to slide content opening up with jquery

    How to create a sliding navigation with either jquery or css? [closed]