2012-05-11 91 views
2

我想覆盖来自primefaces 3.1的CSS类,我正在寻找一个类名覆盖的模式。 我想:覆盖的primefaces 3.1 css的datatable

.ui-datatable table {} 
.ui-datatable .ui-datatable-header,.ui-datatable .ui-datatable-footer {} 
.ui-datatable .ui-datatable-header {} 
.ui-datatable th,.ui-datatable tfoot td {} 
.ui-datatable .ui-datatable-data td,.ui-datatable .ui-datatable-data-empty td{} 

但只有行内容得到了集中,但无法改变的bgcolor头和其他的东西。 然后我意识到可能是我重写的类可能没有被使用过。 出人意料的是,我发现生成的源代码没有使用这些作为类...

<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget"> 
<table role="grid"><thead><tr role="row"> 
    <th id="form:j_id1915418705_722af8cd:j_id1915418705_722af894" class="ui-state-default" role="columnheader"> 
     <div class="ui-dt-c"> 
      <span><span class="outputText">Model</span></span> 
     </div> 
    </th> 
    <th id="form:j_id1915418705_722af8cd:j_id1915418705_722af942" class="ui-state-default" role="columnheader"> 
     <div class="ui-dt-c"> 
      <span><span class="outputText">Color</span></span> 
     </div> 
    </th></tr></thead><tfoot></tfoot> 

    <tbody id="form:j_id1915418705_722af8cd_data" class="ui-datatable-data ui-widget-content"> 
     <tr data-ri="0" data-rk="BMW" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false"> 
      <td role="gridcell"> 
       <div class="ui-dt-c"> 
        <span class="outputText">BMW</span> 
       </div> 
      </td> 
      <td role="gridcell"> 
       <div class="ui-dt-c"> 
        <span class="outputText">Black</span> 
       </div> 
      </td> 
     </tr> 
     <tr data-ri="1" data-rk="Audi" class="ui-widget-content ui-datatable-odd" role="row" aria-selected="false"> 
      <td role="gridcell"> 
       <div class="ui-dt-c"> 
        <span class="outputText">Audi</span> 
       </div> 
      </td> 
      <td role="gridcell"> 
       <div class="ui-dt-c"> 
        <span class="outputText">White</span> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table><input type="hidden" id="form:j_id1915418705_722af8cd_selection" name="form:j_id1915418705_722af8cd_selection" value="" autocomplete="off" /> 

谁能告诉我如何我可以改变表头,边框,交替行的颜色.. 有人可以为我提供一个模式,让我知道如何知道PF中的什么类来重写查看生成的源代码。

在此先感谢。

回答

3

类首先这里包括在标记:

<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget"> 

其他子类自动应用于其他元素。

如果您将这些样式包含在从头链接的单独CSS文件中,那么您的自定义CSS实际上可能会被Primefaces CSS样式覆盖。

要确保您的自定义CSS自身适用于页面,请尝试将自定义CSS内联添加到页面主体,然后查看它是否适用于此。

+0

我认为我的CSS是适用的,因为列值是集中的。但我认为我没有在这里使用正确的类名。我应该在自定义css中写入什么类来对表头进行更改。你能为我写2-3行吗? – user1226447

+2

@ user1226447我无法告诉你做错了什么,因为我不知道你的CSS更改是什么。您需要了解如何使用Firebug工具来评估将哪些CSS类和样式应用于给定元素。它将允许您直接修改页面上的样式,以便测试CSS而无需更改样式并重新加载页面。 –