on css overriding fail even full path css (Primefaces)

Question

I am trying to override background of PF slider with following codes

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:p="http://primefaces.org/ui"
   xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
   <link rel="shortcut icon" type="image/x-icon"
      href="#{request.contextPath}/images/favicon.ico" />
   <title></title>

</h:head>
<body>
    <f:facet name="last">
      <h:outputStylesheet library="css" name="css.css" />
   </f:facet>

relevant part of css.css

.usagePanels.myslider.ui-widget-content,
html body div form#formData div#sliderDIV.ui-panel div#sliderDIV_content.ui-panel-content table tbody tr td table tbody tr td div#wwwpanel.ui-panel div#wwwpanel_content.ui-panel-content table#j_idt29.ui-panelgrid tbody tr.ui-widget-content td div#j_idt31.myslider
{
background-color: black!important;
}

It produces following html, but slider background is not black.

 <html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/DataUsageCalculator/faces/javax.faces.resource/theme.css?ln=primefaces-blitzer" />
<link type="text/css" rel="stylesheet" href="/DataUsageCalculator/faces/javax.faces.resource/css.css?ln=css" />
<link type="text/css" rel="stylesheet" href="/DataUsageCalculator/faces/javax.faces.resource/primefaces.css?ln=primefaces" />
<script type="text/javascript" src="/DataUsageCalculator/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces"></script>
<script type="text/javascript" src="/DataUsageCalculator/faces/javax.faces.resource/primefaces.js?ln=primefaces"></script>

when I inspect applied styles on sliders and disable line

.ui-widget-content { *background: url("/DataUsageCalculator/faces/javax.faces.resource/images/ui-bg_flat_75_ffffff_40x100.png?ln=primefaces-blitzer") repeat-x scroll 50% 50% #FFFFFF;*

}

with firebug it works. Even I use full path css it does not work normally. What am I doing wrong?

Applied Styles (Firebug output)

element.style {
    width: 300px;
}
.usagePanels.myslider.ui-widget-content, html body div form#formData div#sliderDIV.ui-panel div#sliderDIV_content.ui-panel-content table tbody tr td table tbody tr td div#wwwpanel.ui-panel div#wwwpanel_content.ui-panel-content table#j_idt29.ui-panelgrid tbody tr.ui-widget-content td div#j_idt31.myslider {
    background-color: black !important;
}
.usagePanels .ui-widget-content {
    background-color: #F5FAFF !important;
}
.sliderDIV .ui-widget-content {
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-slider-horizontal {
    height: 0.8em;
}
.ui-slider {
    position: relative;
    text-align: left;
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-corner-all {
    border-radius: 6px 6px 6px 6px;
}
.ui-widget-content {
    background: url("/DataUsageCalculator/faces/javax.faces.resource/images/ui-bg_flat_75_ffffff_40x100.png?ln=primefaces-blitzer") repeat-x scroll 50% 50% #FFFFFF;
    border: 1px solid #EEEEEE;
    color: #333333;
}
.ui-widget {
    font-family: Arial,sans-serif;
    font-size: 1.1em;
}
.ui-widget-content {
    color: #333333;
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-panelgrid {
    border-collapse: collapse;
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-widget {
    font-family: Arial,sans-serif;
    font-size: 1.1em;
}
.ui-widget-content {
    color: #333333;
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-widget-content {
    color: #333333;
}
.ui-widget {
    font-family: Arial,sans-serif;
    font-size: 1.1em;
}
.ui-widget-content {
    color: #333333;
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-widget-content {
    color: #333333;
}
.ui-widget {
    font-family: Arial,sans-serif;
    font-size: 1.1em;
}
element.style {
    text-align: center;
}
body {
    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans","Verdana,Arial,sans serif";
}

score 3 · Accepted Answer · edited May 23 '17 at 11:43

3

This is wrong.

<h:head>
    ...
<h:head>
<body>
    <f:facet name="last">
        <h:outputStylesheet library="css" name="css.css" />
    </f:facet>
    ...
</body>

The <body> is not a JSF component and the PrimeFaces-specific <f:facet name="last"> should go inside the <h:head>.

You should use either

<h:head>
    ...
    <f:facet name="last">
        <h:outputStylesheet library="css" name="css.css" />
    </f:facet>
<h:head>
<h:body>
    ...
</h:body>

or

<h:head>
    ...
<h:head>
<h:body>
    <h:outputStylesheet library="css" name="css.css" />
    ...
</h:body>

in order to get it to load after PrimeFaces' one.

Unrelated to the concrete problem, you're not using the library attribute the right way. Please carefully read What is the JSF resource library for and how should it be used? and cleanup your wrong resource library approach.

edited May 23 '17 at 11:43

Community

1
1

answered Dec 17 '12 at 16:17

BalusC

1,082,665
372
3,610
3,555

I had already tried that too. No change. And also I read that page too http://www.mkyong.com/jsf2/primefaces/how-to-override-primefaces-css/. he says contrary. May be I am misunderstanding. Anyway, none of two cases worked. Because my css is loaded after theme.css, before primefaces.css. Style in theme.css (comes from primefaces theme), ui-widget-content can not overwritten. – nsumer Dec 17 '12 at 17:13
Sorry, works just fine for me: http://www.screencast.com/t/7lbvZl8Gfo Your problem is caused elsewhere than in the information provided so far. Perhaps your CSS selector is just wrong. The `.usagePanels` looks suspicious. – BalusC Dec 17 '12 at 17:41
I posted a comment at that mkyong article. – BalusC Dec 17 '12 at 17:54
You deserve the biggest thanks as usual. I will check everything from the beginning. I would like to read your comment about mkyong article, however I could not find it. – nsumer Dec 17 '12 at 19:19

on css overriding fail even full path css (Primefaces)

1 Answers1