Wie überschreibe ich primitive panelgrid footer css

Ich habe versucht, den Hauptteil panelgrid footer für den größten Teil des Tages zu überschreiben, aber ich finde einen Weg, damit es funktioniert. Ich möchte Footers Hintergrundfarbe ändern.Wie überschreibe ich primitive panelgrid footer css

Meine CSS:

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

Meine Komposition Seite:

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

Meine Vorlage Seite:

<!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-Stylesheet in Körper platziert haben, so dass es zuletzt geladen und Ich habe Selektoren nachgeschlagen, die ein bestimmtes Element in Chrom untersuchen, aber es hat immer noch keinen Hintergrund und behält den Standardfarbton bei r. Ich kann sogar meine Farbe sehen, während ich das Element überprüfe, aber es ist ausgeblendet. Ich verstehe nicht, was ich falsch mache. Wie Sie sehen können, ist es gelb hinterlegt, funktioniert aber nicht. Ich sollte hinzufügen, dass die Ausrichtung funktioniert Ich kann von links nach rechts wechseln und die Schaltfläche bewegt sich, so dass ich denke, es ist etwas richtig bei CSS.

Inspizieren Element:

Quelle

2016-06-08 Spike

Werfen Sie einen Blick auf diese Antwort? http://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles/ –

Ja, ich habe es angeschaut, deshalb habe ich stylesheet in Körper, so dass es lädt zuletzt und ich sah Selektoren in Chrom mit inspizieren, so habe ich bestimmte Sache gezielt, aber immer noch Nthing, ich hoffte jemand vielleicht weiß, was ich falsch mache vielleicht seine nicht spezifisch genug ich weiß nicht, das ist, warum ich hier bin – Spike

ich es geschafft, mein eigenes Problem zu lösen. Wie Shady Aziz am Anfang vorgeschlagen hatte, schaute ich auf seinen Link und versuchte, Selektoren aus Stilen zu kopieren, indem ich dieses bestimmte Element, das ich ändern wollte, inspizierte und das nicht funktionierte. Dann habe ich versucht, Elemente selbst zu betrachten und diese zu kopieren. Elemente, über die ich spreche, sind beispielsweise class = "ui-panelgrid-footer".

Css, die funktioniert:

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

Wie man sehen kann ich nahm Fußzeile Klasse und Klasse, die unter ihm statt der Stile war, das Element aus i und es funktionierte ändern wollte.

Hoffe, das hilft auch jemand anderen.

Quelle

2016-06-08 19:24:47 Spike

Ich verstehe nicht _ es statt Stile, "_ Können Sie es ausarbeiten? – Kukeltje

Beim Inspizieren von Elementen in Chrome bot es mir mehrere Fenster an: Elemente, Stile und so weiter. Zu Beginn habe ich mich mit dem Styles-Fenster beschäftigt und versucht, Selektoren daraus zu ziehen, aber später wurde mir klar, dass ich das Elementfenster betrachten muss. – Spike

Wie überschreibe ich primitive panelgrid footer css

Antwort

Verwandte Themen