2012-05-11 75 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而無需更改樣式並重新加載頁面。 –