suchmaschinen - Wie überschreibe ich Standard-PrimeFaces CSS mit benutzerdefinierten Stilen?



title tag (3)

Die von PrimeFaces / jQuery UI verwendeten Stile können sehr komplex sein. Ein Element kann sein Styling aus mehreren CSS-Regeln erhalten. Es ist gut zu wissen, dass Sie auf der Registerkarte "Stil" des DOM-Inspektors filtern können, um nach der Eigenschaft zu suchen, die Sie anpassen möchten:

Dieser Screenshot wurde mit Chrome erstellt, aber die Filterung ist auch in Firefox und Safari verfügbar.

Wenn Sie die Regel gefunden haben, die Sie anpassen möchten, können Sie einfach eine spezifischere Regel erstellen, indem Sie sie mit html . Zum Beispiel könnten Sie .ui-corner-all überschreiben:

html .ui-corner-all {
  border-radius: 10px;
}

https://src-bin.com

Ich habe mein eigenes Thema als separates Maven-Projekt erstellt und es wird korrekt geladen.

Jetzt möchte ich die Größe einer Komponente ändern. Zum Beispiel eine <p:orderList> . Es hat eine Klasse namens ui-orderlist-list die in primefaces.css mit einer festen 200x200 Dimension definiert ist. Egal, was ich in meiner theme.css , es wird von diesem Attribut überschrieben und ich kann den Inhalt eines <p:orderList> erweitern.

Für andere Komponenten möchte ich vielleicht nur eine Instanz einer Komponente überschreiben, nicht alle.

Kann mir bitte jemand sagen, wie kann ich das alles machen?


Answer #1

Es gibt mehrere Dinge, die Sie berücksichtigen müssen, welche eine oder mehrere für Ihren speziellen Fall relevant sein könnten

Laden Sie Ihr CSS nach PrimeFaces eins

Sie müssen sicherstellen, dass Ihr CSS nach dem PrimeFaces geladen wird. Sie können dies erreichen, indem Sie das <h:outputStylesheet> auf Ihre CSS-Datei verweist, in <h:body> anstelle von <h:head> <h:outputStylesheet> :

<h:head>
    ...
</h:head>
<h:body>
    <h:outputStylesheet name="style.css" />
    ...
</h:body>

JSF verschiebt das Stylesheet automatisch an das Ende des generierten HTML <head> und stellt so sicher, dass das Stylesheet nach den Standardstilen der PrimeFaces geladen wird. Auf diese Weise erhalten die Selektoren in Ihrer CSS-Datei, die genau der PrimeFaces-CSS-Datei entsprechen, Vorrang vor PrimeFaces.

Sie werden wahrscheinlich auch Vorschläge sehen, die es in <f:facet name="last"> von <h:head> HeadRenderer , was von PrimeFaces-spezifischen HeadRenderer verstanden wird, aber das ist unnötig HeadRenderer und würde brechen, wenn Sie Ihren eigenen HeadRenderer .

Kenntnis der CSS-Spezifität

Sie müssen außerdem sicherstellen, dass Ihr CSS-Selektor mindestens so spezifisch ist wie der Standard-CSS-Selektor von PrimeFaces für das jeweilige Element. Sie müssen CSS-Spezifitäts- und Kaskadierungs- und Vererbungsregeln verstehen. Zum Beispiel, wenn PrimeFaces standardmäßig einen Stil wie folgt deklariert

.ui-foo .ui-bar {
    color: pink;
}

und du erklärst es als

.ui-bar {
    color: purple;
}

und das bestimmte Element mit class="ui-bar" zufällig ein Elternelement mit class="ui-foo" , dann wird das PrimeFaces immer noch Vorrang haben, weil das die spezifischste Übereinstimmung ist!

Sie können die Webbrowser-Entwicklerwerkzeuge verwenden, um den genauen CSS-Selektor zu finden. Klicken Sie mit der rechten Maustaste auf das fragliche Element im Webbrowser (IE9 / Chrome / Firefox + Firebug) und wählen Sie Element prüfen , um es zu sehen.

Teilüberschreibung

Wenn Sie einen Stil für nur eine bestimmte Instanz der Komponente und nicht alle Instanzen derselben Komponente styleClass , fügen styleClass stattdessen eine benutzerdefinierte styleClass und haken Sie diese an. Es ist ein weiterer Fall, in dem Spezifität verwendet / angewendet wird. Beispielsweise:

<p:dataTable styleClass="borderless">
.ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td {
    border-style: none;
}

Niemals benutzen! Wichtig

Für den Fall, dass Sie die CSS-Datei nicht richtig laden oder den richtigen CSS-Selektor nicht finden, greifen Sie wahrscheinlich auf die !important Problemumgehung zurück. Das ist schlicht falsch. Es ist ein hässlicher Workaround und keine echte Lösung. Es verwirrt nur deine Stilregeln und dich selbst längerfristig. Der !important sollte nur verwendet werden, um die Werte zu überschreiben, die im style Attribut des HTML-Elements aus einer CSS-Stylesheet-Datei festgeschrieben sind (was wiederum eine schlechte Übung ist, aber in einigen seltenen Fällen leider unvermeidbar ist).

Siehe auch:


Answer #2

Sie können eine neue CSS-Datei zum Beispiel cssOverrides.css erstellen

und platziere alle gewünschten Überschreibungen darin, auf diese Weise wird das Aktualisieren der presefaces-Version dich nicht beeinflussen,

und in deinem h: head füge so etwas hinzu

<link href="../../css/cssOverrides.css" rel="stylesheet" type="text/css" />

Wenn es nicht funktioniert, versuche es dem h: body hinzuzufügen

Um zu überprüfen, ob es funktioniert, versuchen Sie dieses einfache Beispiel in der CSS-Datei

.ui-widget {
   font-size: 90% !important;
}

Dies reduziert die Größe aller Oberflächenkomponenten / Texte





override