PrimeFaces componentes de personalización CSS

Question

Como veo en la documentación PrimeFaces,

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

tengo 2 preguntas sobre esto:

1. ¿Por qué el .ui-widget tres veces escrita en el código anterior?

2. Para dos instancias diferentes de tabView Quiero personalizar el color de fondo del encabezado de manera diferente, pero no pude encontrar una manera de hacerlo. ¿Es eso posible?

Answer 1

En la declaración de estilo, son una coma que delimita la lista de anulaciones de clase diferentes. Específicamente esta pieza de css dice:

Clases ui-widget y ui-widget elementos secundarios de un elemento que tiene la clase ui-widget.

En cuanto al fondo del encabezado, puede que no tenga suerte usando CSS simples para modificar el color de fondo, ya que creo que es probable que use varias imágenes GIF o JPG amplias de 1px repetidas en lugar de un color sólido contiguamente declarado .

Si desea personalizar los temas predeterminados de los componentes Primefaces con sus propias hojas de estilo, es mejor buscar en una herramienta como Firebug, https://addons.mozilla.org/en-US/firefox/addon/firebug/ para inspeccionar las clases, estilos y modificarlas en tiempo real en CUALQUIER página web que Firefox actualmente viendo. Incluso ha incorporado depuración de JavaScript.

Answer 2

Para dos instancias diferentes de tabView Deseo personalizar el color de fondo del encabezado de forma diferente, pero no pude encontrar una manera de hacerlo. ¿Es eso posible?

tabView, como todos los demás componentes PrimeFaces tiene el atributo styleClass. Con eso, puede asignar su propia clase de estilo CSS a una instancia de tabView (o cualquier instancia de un componente diferente).

Para que pueda crear dos clases de estilo con diferentes colores de fondo.

XHTML:

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

css:

.myClass { 
    background-color: yellow; 
} 

Es posible que tenga un selector más específico, leer sobre css specificity

Answer 3

Tal vez un poco subjetivo, pero a menos que usted está mirando para personalizar los ID de Jquery UI existentes dentro de un tema Primefaces preexistente/pre-rodado, entonces te encuentras en un escondite para nada. PanelGroups, PanelGrids y TabViews, por ejemplo, reventaron sus contenedores y ni siquiera un desbordamiento: el auto puede repararlo.

Una de las cosas más infurating sobre la biblioteca Primefaces es como los componentes no pasan la validación del W3C, lo que lleva a las horas de "La lucha contra el Marco".