6

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 ?

Tom Lensburry
  • 74
  • 11
Demiurg
  • 347
  • 1
  • 4
  • 14

3 Answers3

10

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.

Stephane Lallemagne
  • 1,246
  • 11
  • 21
  • I already made sure that my **yourstyles.css** is loaded as last. Actually when I checked button in chrome I can see that `smallButton` has `font-size: 11px` but when I inspected text on this button I noticed that this property is totally ignored and font size is taken from `.ui-button .ui-button-text`. I think I need something like `.smallButton .ui-button .ui-button-text` but this doesnt work. – Demiurg Jan 05 '14 at 10:57
  • 2
    `` isn't relevant for ``. Get rid of it. – BalusC Jan 05 '14 at 16:48
  • Put it either in `` or in ``. See also http://stackoverflow.com/questions/8768317/how-do-i-override-those-classes-defined-in-primefaces-css/8774997#8774997 – BalusC Jan 05 '14 at 19:21
  • Follow-up question for @BalusC ... I had this working with Primefaces 4 by putting it in the `` section. After upgrading to Primefaces 5.1, my css appears to not be loaded last anymore. I tried putting it in the ``, but with the same results. Have you heard of this with PF 5.1? – Doug Dec 31 '14 at 18:05
  • I was able to zero in on the problem... the css with PF 5.1 adds a class to the `` cells -- something that wasn't there in 4.0. After making my css more specific, it is now looking as it was before. – Doug Dec 31 '14 at 21:48
5

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.

stefan-dan
  • 586
  • 5
  • 19
Demiurg
  • 347
  • 1
  • 4
  • 14
2

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:

Community
  • 1
  • 1
unwichtich
  • 13,712
  • 4
  • 53
  • 66
  • I already tried that. Please check my comment to @StephaneLallemagne anserw for more information. – Demiurg Jan 05 '14 at 10:58