wake-up-neo.net

Globaler Standardstil in Primefaces ändern

Wie kann ich den Standardstil von Primefaces global und nur einmal ändern und ändern?

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

Derzeit baue ich dieses CSS-Snippet im Kopf jeder XHTML-Seite ein. 

<head>
    <style type="text/css">
        .ui-widget,.ui-widget .ui-widget {
            font-size: 90% !important;
        }
    </style>
</head>
11
Oh Chin Boon

Erstellen Sie eine Stylesheet-Datei:

/resources/css/default.css

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

(bitte beachten Sie, dass ich !important "hack" entfernt habe, siehe auch Wie überschreibe ich PrimeFaces-CSS mit benutzerdefinierten Stilen? Eine ausführliche Erklärung, wie PF-Stile neu definiert werden)

Fügen Sie es mit <h:body> in den <h:outputStylesheet> Ihrer Vorlage ein (es wird automatisch zum end des HTML-Heads verschoben, nachdem alle PrimeFaces-eigenen Stylesheets verwendet wurden):

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

Wenn Sie keine Master-Vorlage verwenden und diese daher auf jeder einzelnen Seite verwenden müssen, empfehle ich Ihnen, Ihr Seitendesign zu überdenken und die Vorlagenfunktionen von JSF2 Facelets zu nutzen. Auf diese Weise haben Sie nur eine Master-Vorlagendatei, in der alle Standardwerte für Kopf und Körper definiert sind. Siehe auch diese Antwort für ein konkretes Beispiel: Wie kann ein weiteres XHTML in XHTML mit JSF 2.0-Facelets eingefügt werden?

35
BalusC

Ich würde empfehlen:

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

anstelle von BalusCs Ansatz, es sei denn, Sie wiedie Schriftgröße nimmt ab, wenn Sie Ihre JSF-Komponenten zusammenfügen.

Ich stimme mit BalusC überein, dass Sie ein Stylesheet erstellen und eine Vorlage in Betracht ziehen sollten, aber ich stimme dem vorgeschlagenen CSS nicht zu (obwohl ich mich immer noch nicht für die Verwendung von !important entschieden habe.).

Abschnitt 8.4 des Primefaces 3.1-Benutzerhandbuchs schlägt die Verwendung von vor

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

dies ähnelt dem Vorschlag von BalusC, verwendet jedoch !important.

Dies wird zwei Dinge tun:

  1. setzen Sie die Schriftgröße von Komponenten mit der Klasse ui-widget auf 90% (des übergeordneten Elements). 
  2. setzen Sie die Schriftgröße von Komponenten mit der ui-widget Klasse undsind Kinder einer anderen Komponente mit der ui-widget Klasse auf 90% (der übergeordneten Komponente).

Möchten Sie die Schriftgröße eines verschachtelten ui-widget wirklich auf 90% setzen? Wenn Sie über 2 oder 3 verschachtelte ui-widgets-Ebenen verfügen, nimmt die Schriftgröße weiter ab. Probieren Sie das folgende (Primefaces) JSF-Markup aus und Sie werden meinen Punkt sehen.

    <h:form>
        <p:button value="Normal"></p:button>
        <p:panel>
            <p:button value="A bit smaller"></p:button>
            <p:panel>
                <p:button value="Even smaller again"></p:button>
                <p:panel>
                    <p:button value="Tiny"></p:button>
                </p:panel>
            </p:panel>
        </p:panel>
    </h:form>

Ich glaube, der Grund, dass .ui-widget .ui-widget in der Standard-jQuery-CSS erforderlich war, bestand darin, das umgekehrte Problem zu verhindern: Die Schriftgröße nimmt in verschachtelten ui-widgets zu.

Die Standardstile sind normalerweise die folgenden:

.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }

Ohne den für .ui-widget .ui-widget definierten Stil bewirkt der auf font-size: 1.1em angewendete Standardstil .ui-widget, dass die Schriftgröße in verschachtelten ui-widgets zunimmt.

Durch Hinzufügen des spezifischeren .ui-widget .ui-widget-Selektors mit einer auf 100% (oder 1em) festgelegten Schriftgröße stellen Sie sicher, dass Sie eine konsistente Schriftgröße erhalten, unabhängig davon, wie tief Sie Ihre Komponenten verschachteln.

17
James Bassett

Das funktioniert gut.

.ui-g {
    font-size: 13px;
}
0
Gustavo Mahecha

Es funktioniert gut mit folgenden CSS 

body {
    font-size: 75% !important;

}

.ui-widget,.ui-widget-header,.ui-widget-content,.ui-widget-header .ui-widget-header,.ui-widget-content .ui-widget-content,.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button
    {
    font-size: 100% !important;
}
0
myset