我如何覆蓋primeface panelgrid頁腳css

我一直試圖重寫primeface panelgrid頁腳大部分時間，但我無法找到一種方法來工作。我想改變頁腳背景顏色。我如何覆蓋primeface panelgrid頁腳css

我的CSS：

.ui-panelgrid .ui-panelgrid-footer { 
    text-align: right; 
    padding: 2px 5px; 
    background-color: yellow; 
}

我的作文頁：

<ui:composition 
template="/templates/templateMain.xhtml" 
xmlns="http://www.w3.org/1999/xhtml" 
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:f="http://java.sun.com/jsf/core" 
xmlns:ui="http://java.sun.com/jsf/facelets" 
xmlns:p="http://primefaces.org/ui" 
xmlns:c="http://java.sun.com/jsp/jstl/core"> 
<ui:define name="navigatorWest"> 
    <ui:include src="pages/navigationMenu.xhtml"/> 
</ui:define> 
<ui:define name="bodyContent"> 

<h:form>  
<p:panelGrid columns="2" style="width:100%"> 
    <f:facet name="header"></f:facet> 
     <h:outputLabel value="" /> 
     <h:outputText id="currentWay" value="" /> 

     <h:outputLabel for="way" value="" /> 
     <p:selectOneMenu id="way" value="" style="width:200px"> 
      <f:selectItems value="" /> 
     </p:selectOneMenu> 

     <p:outputLabel for="time" value=" /> 
     <p:inputText id="time" value="" size="20" validator="#">  </p:inputText> 

    <f:facet name="footer"><p:commandButton value="Save" id="save"  actionListener="" ajax="false" /></f:facet>   
</p:panelGrid> 
</h:form> 
</ui:define> 
</ui:composition>

我的模板頁面：

<!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:ui="http://java.sun.com/jsf/facelets" 
    xmlns:p="http://primefaces.org/ui" 
    > 
<h:head> 
</h:head> 
<h:body> 
<h:outputStylesheet library="stylesheets" name="css/styles.css" /> 
    <p:layout fullpage="true" > 
     <p:layoutUnit position="west" resizable="true" size="245"> 
      <ui:include src="/pages/navigationMenu.xhtml"/> 
     </p:layoutUnit> 
     <p:layoutUnit id="center" position="center" resizable="true"> 
      <ui:insert name="bodyContent">default info</ui:insert> 
     </p:layoutUnit> 
    </p:layout>  
</h:body> 
</html>

我已經把樣式表在體內，因此將最後被加載並我查找選擇器檢查鉻中的特定元素，但仍然不會背景顏色並保留默認的顏色河在檢查元素時，我甚至可以看到我的顏色，但它已淡出。我不明白我做錯了什麼。正如你可以看到它背景顏色黃色但不起作用。我應該添加，對齊確實工作，我可以從左到右切換和按鈕移動，所以我想在CSS有一些東西。

檢查元素：

來源

2016-06-08 Spike

你看看這個答案嗎？ http://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles/ –

是的，我看過它，這就是爲什麼我有體式的樣式表，因此它加載最後，我擡頭看着鍍鉻檢查選擇器，所以我有具體的東西有針對性，但仍然nthing，我希望有人可能知道我做錯了，也許它不夠具體enought我不知道，這就是爲什麼我在這裏 – Spike

我設法解決我自己的問題。就像Shady Aziz在開始時所建議的那樣，我正在查看他的鏈接，並試圖通過檢查我想更改的這個特定元素來複制樣式選擇器，但這並不起作用。然後，最後我試圖自己查看元素並複製這些元素。例如，我要講的元素是class =「ui-panelgrid-footer」。

的CSS工作：

.ui-panelgrid-footer .ui-widget-header { 
text-align: right; 
padding: 2px 5px; 
background-color: white;}

正如你可以看到我把頁腳階級和階級，這是不是風格在它之下，是由元素我想改變，它的工作。

希望這可以幫助別人。

來源

2016-06-08 19:24:47 Spike

我不明白_「它而不是風格，「_你能詳細說明嗎？ – Kukeltje

當在鉻中檢查元素時，它提供了幾個窗口：元素，樣式等。一開始，我正在看樣式窗口，試圖從中獲得選擇器，但後來我意識到我必須查看元素窗口。 – Spike

我如何覆蓋primeface panelgrid頁腳css

回答

相關問題