0

次のコードで PF スライダーの背景をオーバーライドしようとしています

    <!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>

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

次の html が生成されますが、スライダーの背景が黒ではありません。

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

スライダーに適用されたスタイルを調べて行を無効にすると

.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; *

}

firebug で動作します。フルパスcssを使用しても正常に動作しません。私は何を間違っていますか？

適用されたスタイル (Firebug 出力)

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

1 に答える 1

3

これは間違っています。

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

は<body>JSF コンポーネントではなく、PrimeFaces 固有のもの<f:facet name="last">は 内に配置する必要があり<h:head>ます。

どちらかを使用する必要があります

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

また

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

PrimeFaces のものの後にロードするために。

具体的な問題とは関係ありませんが、library属性を正​​しい方法で使用していません。JSF リソース ライブラリの目的と使用方法をよくお読みください。間違ったリソース ライブラリ アプローチをクリーンアップします。

于 2012-12-17T16:17:53.013 に答える