0

I have been trying to override primeface panelgrid footer for most of day but I can't find a way for it to work. I want to change footers background color.

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

Inspecting element:

chrome inspect element

Cœur
  • 37,241
  • 25
  • 195
  • 267
Spike
  • 1
  • 3
  • do you take a look on this answer ?. http://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles/ – Shady Hussein Jun 08 '16 at 15:50
  • Yes i did look at it, thats why i have stylesheet in body so it loads last and i looked up selectors in chrome with inspect so i have specific thing targeted but still nthing, i was hoping someone maybe knows what i do wrong maybe its not specific enought i dont know, thats why im here – Spike Jun 08 '16 at 15:55

1 Answers1

0

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. Then finally i tried to look at elements themselves and copy those. Elements i am talking about are class="ui-panelgrid-footer" for example.

Css that worked :

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

Spike
  • 1
  • 3
  • I fail to understand _"it instead of styles,"_ Can you elaborate? – Kukeltje Jun 09 '16 at 00:02
  • When inspecting element in chrome it offered me several windows: elements, styles and so on. At start i was looking at styles window, trying to get selectors from that, but later i realized i have to look at elements window. – Spike Jun 12 '16 at 15:10