Cannot change Primefaces p:commandButton font properties

Question

I need some customized buttons on my site which look differently than the others. I've created a css class for these buttons but it behaves strangely.

this is the class:

.regCommandButton { 
    color: #ffffff;
    background: #29b6a0;
    border-color: #23a38f;

    width: 100%; 
    height: 25px; 

    font-family: 'pluto_sansthin';
    font-size:1.4em;    
}

font import in the same css file:

@font-face {
font-family: 'pluto_sansthin';
src: url(#{resource['fonts/plutosansthin-webfont.eot']});
src: url(#{resource['fonts/plutosansthin-webfont.eot?#iefix']}) format('embedded-opentype'),
     url(#{resource['fonts/plutosansthin-webfont.woff']}) format('woff'),
     url(#{resource['fonts/plutosansthin-webfont.ttf']}) format('truetype');
font-weight: normal;
font-style: normal;

}

html implementation:

<p:outputPanel>
  <p:commandButton styleClass="regCommandButton" value="Save" action="#{URBean.saveNewUser}" update="regPanel" />
</p:outputPanel>

My problem is that the font related properties (font-family, font-size) are not being set if the button is inside of an p:outputpanel . All the others applies on the button.

If I put the button outside of the outputpanel, everything goes as expected.

EDIT: Using !important for the font properties doesn't help eather.

Have your read this [link](http://stackoverflow.com/questions/8768317/how-do-i-override-those-classes-defined-in-primefaces-css/8774997#8774997)? — mrganser, Oct 10 '14 at 13:18
@mrganser: Yes, I did and I load my stylesheet accordingly. In any other case I can override PF style classes. But in case of the button's font it just doesn't work. — bakcsa83, Oct 10 '14 at 13:25
nice finding. it actually solved the color issue. unfortunatelly I still cant modify the size of the font and the font type. — bakcsa83, Oct 10 '14 at 13:56
And do you have that `pluto_sansthin` font imported as @font-face or something? — mrganser, Oct 10 '14 at 14:05
Replace `.regCommandButton` class to `.ui-button .regCommandButton`. And if it don't work try to inspect the button (i'm using chrome to do that) and you will see a `span` `css`class of `p:commandButton` text, try that too. — Cold, Oct 10 '14 at 14:57
@Cold: It did the trick! Except that I had to remove the space which is between the two class name. So, the correct class definition is `.ui-button.regCommandButton{...}` and the correct html implementation remains `` Please post it as an answer and I accept it. Thanks!! — bakcsa83, Oct 10 '14 at 22:27

score 2 · Accepted Answer · answered Oct 11 '14 at 13:52

You can solve this replacing .regCommandButton with .ui-button.regCommandButton.

Doing that you telling taht every element with .ui-button AND .regCommandButton will have the described proprieties:

.ui-button.regCommandButton { 
    color: #ffffff;
    background: #29b6a0;
    border-color: #23a38f;

    width: 100%; 
    height: 25px; 

    font-family: 'pluto_sansthin';
    font-size:1.4em;    
}

Cannot change Primefaces p:commandButton font properties

1 Answers1