Primefaces composants CSS personnalisation

Que je vois dans le primefaces documentation,

    1) To change the font-size of PrimeFaces components globally, use the `.ui-widget` style class. 
       An example with 12px font size.

        .ui-widget,
        .ui-widget .ui-widget {
               font-size: 12px !important;
         }

J'ai 2 questions à ce sujet:

  1. Pourquoi le .ui-widget écrit trois fois dans le code ci-dessus?
  2. Pour deux instances différentes de tabView je veux personnaliser son en-tête arrière-plan-couleur différemment, mais je ne pourrais pas trouver un moyen de le faire. Est-il même possible ?

OriginalL'auteur Rajat Gupta | 2011-06-10

  1. 3

    Dans la déclaration de style, ils sont la virgule de délimitation de la liste de classe différente des remplacements. Précisément ce morceau de css états:

    Classes ui-widget et ui-widget les éléments enfants de l'élément qui a la classe ui-widget.

    Aussi loin que l'en-tête arrière-plan est considéré comme vous pourriez ne pas avoir de la chance en utilisant de simples CSS pour modifier la couleur d'arrière-plan que je crois que c'est probablement à l'aide de différents 1px de large GIF ou JPG images répétées par opposition à un solide de manière contiguë déclaré la couleur.

    Si vous souhaitez personnaliser les thèmes par défaut des composants Primefaces avec vos propres feuilles de style, alors vous êtes mieux de regarder dans un outil comme Firebug, https://addons.mozilla.org/en-US/firefox/addon/firebug/ pour l'inspection des classes, de styles et de les modifier en temps réel sur n'IMPORTE quelle page web que Firefox est en cours d'affichage. Il a même construit dans débogage Javascript.

    OriginalL'auteur maple_shaft

  2. 2

    Pour deux instances différentes de tabView je veux personnaliser son en-tête arrière-plan-couleur différemment, mais je ne pourrais pas trouver un moyen de le faire. Est-il même possible ?

    tabView, comme tous les autres composants PrimeFaces a l'attribut styleClass. Ainsi, vous pouvez assigner votre propre feuille de style CSS de la classe à un tabView instance (ou d'une instance de composant différent).

    De sorte que vous pouvez créer deux classes de style avec des couleurs de fond différentes.

    xhtml:

    <p:tabView styleClass="myClass">
   ...
</p:tabView>

    css:

    .myClass {
   background-color: yellow;
}

    Vous pourriez avoir besoin d'un plus spécifiques sélecteur, lire à ce sujet css spécificité

    OriginalL'auteur Sebi

  3. 0

    Peut-être un peu subjectif, mais si vous cherchez à personnaliser existant Jquery UI Id dans une pré-existant/pré-roulé Primefaces thème alors vous êtes un peu de la clandestinité pour rien. PanelGroups, PanelGrids et TabViews, par exemple, l'éclat de leurs contenants et même pas un overflow:auto peut le réparer.

    L'un des plus infurating choses au sujet de la Primefaces bibliothèque est la façon dont les composants ne passe pas la validation W3C, conduisant à des heures de "Lutte contre le Cadre".

    OriginalL'auteur 8bitjunkie