¿Cómo anulo el PrimeFaces CSS predeterminado con estilos personalizados?

Creé mi propio tema como un proyecto separado de Maven, y está cargado correctamente.

Ahora quiero cambiar el tamaño de un componente. Por ejemplo, a

. Tiene una clase llamada ui-orderlist-list que se define en primefaces.css con una dimensión fija de 200×200. No importa lo que haga en mi theme.css , este atributo lo sobreescribe y no hay manera de que pueda hacer que el contenido sea parte de un

más amplio.

Para otros componentes, es posible que desee anular solo una instancia de un componente, no todos.

¿Puede alguien decirme cómo puedo hacer todo esto?

Hay varias cosas que debe tener en cuenta de cuáles una o más podría ser relevante para su caso específico

Cargue su CSS después de PrimeFaces uno

Debe asegurarse de que su CSS esté cargado después del de PrimeFaces. Puede lograr esto colocando la referencia a su archivo CSS dentro de lugar de :

  ...    ...  

JSF reubicará automáticamente la hoja de estilo al final del HTML generado y esto asegurará que la hoja de estilos se cargue después de los estilos predeterminados de PrimeFaces. De esta manera, los selectores en su archivo CSS que son exactamente los mismos que en el archivo CSS de PrimeFaces tendrán prioridad sobre el de PrimeFaces.

Probablemente también vea sugerencias para ponerlo en of que es entendido por HeadRenderer específico de HeadRenderer , pero esto es innecesariamente torpe y se rompería cuando tenga su propio HeadRenderer .

Comprender la especificidad de CSS

También debe asegurarse de que su selector de CSS sea al menos tan específico como el selector de CSS predeterminado de PrimeFaces en el elemento en particular. Debe comprender las reglas de Especificidad de CSS y Cascading and Heifer . Por ejemplo, si PrimeFaces declara un estilo por defecto de la siguiente manera

 .ui-foo .ui-bar { color: pink; } 

y lo declaras como

 .ui-bar { color: purple; } 

y el elemento particular con class="ui-bar" tiene un elemento padre con class="ui-foo" , entonces el de PrimeFaces aún tendrá precedencia porque esa es la combinación más específica.

Puede usar las herramientas de desarrollador del navegador web para encontrar el selector de CSS exacto. Haga clic con el botón derecho en el elemento en cuestión en el navegador web (IE9 / Chrome / Firefox + Firebug) y elija Inspeccionar elemento para verlo.

Anulación parcial

Si necesita anular un estilo para solo una instancia específica del componente y no todas las instancias del mismo componente, agregue un styleClass personalizado y enganche en su lugar. Es otro caso donde se usa / aplica la especificidad. Por ejemplo:

  
 .ui-datatable.borderless tbody, .ui-datatable.borderless th .ui-datatable.borderless td { border-style: none; } 

Nunca lo use! Importante

En caso de que no cargue correctamente el archivo CSS en orden o para encontrar el selector de CSS correcto, es probable que obtenga la solución !important . Esto es claro. Es una solución fea y no una solución real. Solo confunde sus reglas de estilo y usted más a largo plazo. El !important solo debe utilizarse para anular los valores codificados en el atributo de style del elemento HTML desde un archivo de hoja de estilos CSS (lo que a su vez también es una mala práctica, pero en algunos casos raros, desafortunadamente inevitable).

Ver también:

  • ¿Cómo hacer referencia al recurso CSS / JS / image en la plantilla Facelets?
  • Mozilla Developer Network> CSS> Especificidad (¡gran artículo, debe leerlo!)
  • Comprender la precedencia del estilo en CSS: especificidad, herencia y la cascada

puede crear un nuevo archivo CSS, por ejemplo, cssOverrides.css

y coloque todas las anulaciones que desee en su interior, de esa manera la actualización de la versión de las primefas no lo afectará,

y en tu h: head agrega algo así

  

si no funciona intente agregarlo a la h: body

para comprobar si funciona, pruebe este sencillo ejemplo dentro del archivo css

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

esto reducirá el tamaño de todos los componentes / texto de las primetas

Estoy usando PrimeFaces 6.0. Aquí hay información que me hubiera gustado tener con respecto a esto:

Si usa , funcionará, pero su CSS no se cargará por última vez, incluso si está último en las tags (otros archivos CSS se incluirán más adelante). Un truco que puedes hacer, que aprendí aquí es colocarlo dentro de , que debe ir dentro del cuerpo , así:

     ... 

Entonces su CSS será el último cargado. Nota: aún tendrá que cumplir con las reglas de especificidad como se describe en BalusC.

Coloqué “MyCSS.css” en WebContent / resources / css /.

Más información sobre la orden de carga de recursos: http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces

Los estilos utilizados por PrimeFaces / jQuery UI pueden ser bastante complejos. Un elemento puede recibir su estilo de múltiples reglas de CSS. Es bueno saber que puede usar el filtrado en la pestaña de estilo del inspector DOM para buscar en la propiedad que desea personalizar:

Esta captura de pantalla se tomó con Chrome, pero el filtrado también está disponible en Firefox y Safari.

Cuando haya encontrado la regla que desea personalizar, puede simplemente crear una regla más específica prefijada con html . Por ejemplo, podría anular .ui-corner-all como:

 html .ui-corner-all { border-radius: 10px; }