Primefaces styling component class with CSS

Question

How can I change properties of component using CSS?

Let's say I have two buttons:

<p:commandButton id="mySmallButton" styleClass="smallButton">
<p:commandButton id="myButton">

I want all my buttons to have font-size: 14px; so I added this rule:

.ui-button .ui-button-text{
   font-size:14px;
}

But my smallButton should have different size, so I added:

.smallButton{
   font-size:11px;
}

Unfortunatelly this doesn't work. This is produced HTML:

<button class="ui-button ui-widget ui-state-default ui-corner-all
    ui-button-text-only smallButton" (...)>
    <span class="ui-button-text ui-c">MY TEXT</span>
</button>

The text on this button is stil 14px size. How should CSS look like to have all my smallButton font-size: 11px ?

Answer 1

Your problem is related to the loading order of all the CSS. CSS are cascading style sheets. So if you want your .smallButton style to be applied, it must be the last in the css chain, in order to override any previous matching styles.

Check the order of the CSS (see generated source header in your browser)

If you want your CSS to be the last one, you can use this inside your page or template:

<f:facet name="last">
  <h:outputStylesheet library="default" name="css/yourstyles.css" />
</f:facet>

This avoids overuse of !important tag, that works either.

EDIT

This works fine for me on chrome. Chrome says font-size is 11px for ui-button-text embeded span, and displays the first button smaller than the second one, which font-size is 14px.

<style>
.ui-button-text{
   font-size:14px;
}
.smallButton .ui-button-text {
   font-size:11px;
}
</style>

<p:commandButton id="mySmallButton" styleClass="smallButton"/>
<p:commandButton id="myButton"/>

Also, please notice that the generated html buttons do not have any ui-button class.

Answer 2

I found the solution to my problem. All I need is this:

.smallButton.ui-button-text-only .ui-button-text {
    font-size: 11px;
}

So now ui-button-text-only .ui-button-text only apply to the smallButton. I tried it before but with space after .smallButton so it didn't work. Now it is working properly. Thanks for your answers.

Answer 3

PrimeFaces overrides your css with the default rules for the parent form.

You can define your css for the form like this:

form .smallButton{
   font-size:11px;
}

or you can use the !important keyword:

.smallButton{
   font-size:11px !important;
}

See also:

• PrimeFaces: how to override CSS class
• PrimeFaces overrides my custom CSS style