如何覆盖PrimeFaces panelgrid页脚CSS

Question

I have been trying to override primeface panelgrid footer for most of day but I can't find a way for it to work. 我整天大部分时间都在尝试覆盖primeface panelgrid页脚，但是我找不到找到它的方法。 I want to change footers background color. 我想更改页脚的背景颜色。

My css: 我的CSS：

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

My composition page: 我的作品页面：

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

My template page: 我的模板页面：

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

I have placed style sheet in body so it will be loaded last and I looked up selectors inspecting particular element in chrome but still it doesn't color background and keeps default color. 我将样式表放置在主体中，以便最后加载它，我抬头检查选择器，检查chrome中的特定元素，但仍不对背景上色，并保留默认颜色。 I can even see my color while inspecting element but it's faded out. 在检查元素时，我什至可以看到我的颜色，但是它已淡出。 I don't understand what I'm doing wrong. 我不明白我在做什么错。 As you can see it's there backgroundcolor yellow but doesn't work. 如您所见，它的背景色为黄色，但不起作用。 I should add that alignment does work I can switch from left to right and button moves so I guess there is something right at css. 我应该补充一点，对齐确实有效，我可以从左切换到右，按钮移动，所以我猜css上有正确的东西。

Inspecting element: 检查元素：

Answer 1

I managed to solve my own problem. 我设法解决了自己的问题。 Like Shady Aziz suggested at start i was looking at his link and tried to copy selectors from styles by inspecting this particular element i wanted to change and that did not work. 就像Shady Aziz在开始时所建议的那样，我一直在查看他的链接，并通过检查我想要更改的特定元素来尝试从样式中复制选择器，但这种方法不起作用。 Then finally i tried to look at elements themselves and copy those. 最后，我尝试查看元素本身并将其复制。 Elements i am talking about are class="ui-panelgrid-footer" for example. 我正在谈论的元素例如是class =“ ui-panelgrid-footer”。

Css that worked : 工作的CSS：

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

As you can see i took footer class and class that was under it instead of styles, that made up element i wanted to change and it worked. 如您所见，我选择了页脚类和它下面的类而不是样式，这些元素组成了我想要更改的部分，并且可以正常工作。

Hope this helps someone else aswell. 希望这对其他人也有帮助。

如何覆盖PrimeFaces panelgrid页脚CSS

问题描述

1 个解决方案

解决方案1
0 2016-06-08 19:24:47

如何覆盖PrimeFaces panelgrid页脚CSS

问题描述

1 个解决方案

解决方案1 0 2016-06-08 19:24:47

解决方案1
0 2016-06-08 19:24:47