Modification générale du style par défaut dans Primefaces
Comment dois-je modifier et d'appliquer des modifications sur le style par défaut de primefaces à l'échelle mondiale et une seule fois?
.ui-widget,.ui-widget .ui-widget {
font-size: 90% !important;
}
Actuellement, je suis l'incorporation de ce bout de code CSS dans le head de chaque page XHTML.
<head>
<style type="text/css">
.ui-widget,.ui-widget .ui-widget {
font-size: 90% !important;
}
</style>
</head>
source d'informationauteur Oh Chin Boon
Vous devez vous connecter pour publier un commentaire.
Créer un fichier de feuille de style:
/resources/css/default.css
(veuillez noter que j'ai enlevé le
!important
"hack", voir aussi Comment puis-je remplacer l'option par défaut PrimeFaces CSS avec des styles personnalisés? pour une explication en profondeur de la façon de redéfinir PF styles)L'inclure dans le
<h:body>
de votre modèle à l'aide de<h:outputStylesheet>
(elle sera automatiquement déplacé à la fin du code HTML de tête, après tout PrimeFaces propres feuilles de style):Si vous n'êtes pas à l'aide d'un modèle de master et il faut donc les inclure dans chaque page, je vous recommande de revoir votre conception de page et d'utiliser JSF2 Facelets de template capacités. De cette façon, vous n'avez qu'un maître de fichier de modèle où toutes les valeurs par défaut de la tête et le corps sont réglés. Voir aussi cette réponse par un exemple concret: Comment faire pour inclure un autre format XHTML XHTML à l'aide de JSF 2.0 Facelets?
Je vous conseille d'utiliser:
au lieu de BalusC de l'approche, à moins que vous comme la taille de la police diminuer à mesure que vous imbriquez vos composants JSF ensemble.
Je serai d'accord avec BalusC que vous devez créer une feuille de style et d'envisager la création de modèles, mais je suis en désaccord avec la suggestion de CSS (même si je ne suis pas encore décidé sur l'utilisation de
!important
!).L'article 8.4 de la Primefaces 3.1 guide de l'utilisateur suggère d'utiliser
qui est similaire à BalusC de la suggestion, mais utilise
!important
.Cela va faire deux choses:
ui-widget
classe à 90%(de la mère)
ui-widget
classe et sont les enfants d'un autre composant avec la
ui-widget
classe à 90% (de la mère)
Voulez-vous vraiment pour définir la taille de la police de imbriquée
ui-widget
à 90%? Si vous avez 2 ou 3 niveaux d'imbrication desui-widget
s la taille de la police va continuer à diminuer. Essayez les solutions suivantes (Primefaces) JSF balisage et vous verrez mon point.Je crois que la raison
.ui-widget .ui-widget
a été requis par la norme jQuery CSS était de prévenir le problème inverse: taille de la police augmenter dans lesui-widget
s.Les styles par défaut sont généralement les suivantes:
Sans style défini pour
.ui-widget .ui-widget
la valeur par défautfont-size: 1.1em
style appliqué à.ui-widget
les causes de la taille de la police augmenter dans lesui-widget
s.Par l'ajout le plus spécifique
.ui-widget .ui-widget
sélecteur de taille de police définie à 100% (ou cadratin (1 em) vous devez vous assurer que vous obtenez une taille de police uniforme, peu importe à quelle profondeur vous imbriquez vos composants.Il fonctionne très bien avec le css suivant
Cela fonctionne bien.