truncar - ¿Cómo anulo el PrimeFaces CSS predeterminado con estilos personalizados?
truncar texto con puntos suspensivos (4)
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 <p:orderList> . Tiene una clase llamada ui-orderlist-list que se define en primefaces.css con una dimensión fija de 200x200. 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 <p:orderList> 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?
Estoy usando PrimeFaces 6.0. Aquí hay información que me hubiera gustado tener con respecto a esto:
Si usa <h:outputStylesheet/> , funcionará, pero su CSS no se cargará por última vez, incluso si está último en las etiquetas <h:head></h:head> (otros archivos CSS se incluirán más adelante). Un truco que puedes hacer, que aprendí here es colocarlo dentro de <f:facet name="last"></f:facet> , que debe ir dentro del cuerpo , así:
<h:body>
<f:facet name="last">
<h:outputStylesheet name="css/MyCSS.css" />
</f:facet>
...
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
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 <h:outputStylesheet> referencia a su archivo CSS dentro de <h:body> lugar de <h:head> :
<h:head>
...
</h:head>
<h:body>
<h:outputStylesheet name="style.css" />
...
</h:body>
JSF reubicará automáticamente la hoja de estilo al final del HTML <head> 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 <f:facet name="last"> of <h:head> 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:
<p:dataTable styleClass="borderless">
.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:
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;
}
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í
<link href="../../css/cssOverrides.css" rel="stylesheet" type="text/css" />
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