我如何覆盖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

回答

相关问题