web-dev-qa-db-fra.com

Modification globale du style par défaut dans Primefaces

Comment dois-je modifier et appliquer des modifications au style par défaut des primefaces globalement et une seule fois?

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

Actuellement, j'intègre cet extrait de code CSS dans l'en-tête de chaque page XHTML. 

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

Créez un fichier de feuille de style:

/resources/css/default.css

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

(notez que j'ai supprimé le !important "hack", voir aussi Comment remplacer le CSS PrimeFaces par défaut avec des styles personnalisés? pour une explication détaillée de la façon de redéfinir les styles PF)

Incluez-le dans le <h:body> de votre modèle à l'aide de <h:outputStylesheet> (il sera automatiquement déplacé vers le end de l'en-tête HTML, après que toutes les feuilles de style de PrimeFaces soient propres):

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

Si vous n'utilisez pas de modèle maître et que vous devez donc l'inclure dans chaque page, je vous recommande de reconsidérer la conception de votre page et d'utiliser les fonctionnalités de modélisation de JSF2 Facelets. De cette façon, vous n’avez qu’un seul fichier de gabarit principal dans lequel toutes les valeurs par défaut de la tête et du corps sont définies. Voir aussi cette réponse pour un exemple concret: Comment inclure un autre XHTML en XHTML en utilisant JSF 2.0 Facelets?

35
BalusC

Je recommanderais d'utiliser:

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

au lieu de l’approche de BalusC, à moins que like ne diminue la taille de la police à mesure que vous imbriquez vos composants JSF.

Je conviens avec BalusC que vous devriez créer une feuille de style et envisager de créer des modèles, mais je ne suis pas d'accord avec le CSS suggéré (bien que je ne sois pas encore décidé sur l'utilisation de !important!).

La section 8.4 du guide de l'utilisateur Primefaces 3.1 suggère d'utiliser

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

ce qui est similaire à la suggestion de BalusC mais utilise !important.

Cela fera deux choses:

  1. définir la taille de police des composants avec la classe ui-widget à 90% (du parent) 
  2. définir la taille de la police des composants avec le ui-widget classe et sont les enfants d'un autre composant avec le ui-widget classe à 90% (du parent)

Voulez-vous vraiment définir la taille de la police d'un ui-widget imbriqué à 90%? Si vous avez 2 ou 3 niveaux de ui-widgets imbriqués, la taille de la police va continuer à diminuer. Essayez le balisage JSF suivant (Primefaces) et vous verrez ce que je veux dire.

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

Je crois que la raison pour laquelle .ui-widget .ui-widget était requise dans le CSS standard jQuery était d'empêcher le problème inverse: la taille de la police augmentait dans les ui-widgets imbriqués.

Les styles par défaut sont généralement les suivants:

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

Sans le style défini pour .ui-widget .ui-widget, le style par défaut font-size: 1.1em appliqué à .ui-widget entraîne une augmentation de la taille de la police dans ui-widgets imbriqué.

En ajoutant le sélecteur plus spécifique .ui-widget .ui-widget avec une taille de police définie à 100% (ou 1em), vous vous assurerez d'obtenir une taille de police cohérente, quelle que soit la profondeur d'imbrication de vos composants.

17
James Bassett

Cela fonctionne bien.

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

Cela fonctionne bien avec le css suivant 

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