implementing custom css with primefaces 3.1

Question

I am working with Primefaces 3.1 and I am trying to implement custom css for button.

I have my page defined like following:

<h:head>
<title>Primefaces 3.1</title>
<f:facet name="last">             
    <meta http-equiv="X-UA-Compatible" content="EmulateIE8" /> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>                           
    <link type="text/css" rel="stylesheet" href="../resources/Styles/stylesheet.css" />
    <link rel="stylesheet" href="../resources/Styles/pfOverride.css" type="text/css" />
    </f:facet> 
</h:head>

CommandButton looks like this:

<p:commandButton id="button1" styleClass="custButton"....

pfOverride.css has following:

.ui-button {
    background-color: #b2f5g3;
    border-color: black;    
}

.ui-button-text {
    background-color: #b2f5g3;
.ui-button-text-only .ui-button-text {
    font-size: 9pt; 
    color: black;
}

And custButton also has different values set,

My problem is pfoverride.css is working but stylesheet is not. Can somebody tell me what I am missing or doing wrong, I tried putting !important also but no luck.

Any help is appreciated.

Matt Handy · Accepted Answer · 2012-05-11 06:55:37Z

1

This should work if you add the closing bracket to the .ui-button-text and use a correct hexadecimal value (g is not a hex digit):

.ui-button-text {
    background-color: #b2f5f3;
}
.ui-button-text-only .ui-button-text {
    font-size: 9pt; 
    color: black;
}

edited May 11, 2012 at 6:55

answered May 11, 2012 at 6:46

Matt Handy

30.1k3 gold badges91 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1226447 Over a year ago

Sorry for the typo but I said already pfOverride.css is working fine but my stylesheet class .custButton inside styleclass.css is not. How do I load stylesheet so that I can only use stylesheet. Looks like its ignoring my stylesheet.

Matt Handy Over a year ago

I tried the code in my IDE and it works fine. The only difference is that I included the styles direclty on the page and not from a separate file.

user1226447 Over a year ago

I was looking not to use the .ui-button-text class or .ui-button-text-only .ui-button-text class like above but only use the custom class like .custCutton class from stylesheet and change the look n feel of the P:commandButton, Is it possible?

Collectives™ on Stack Overflow

implementing custom css with primefaces 3.1

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related