CODEWITHSUNDEEP
cssjsf-2primefaces
user1226447
user1226447

Reputation: 153

implementing custom css with primefaces 3.1

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.

Upvotes: 1

Views: 3402

Answers (1)

Matt Handy
Matt Handy

Reputation: 30025

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;
}

Upvotes: 1

Related Questions