¿Cómo puedo anular la configuración predeterminada de PrimeFaces CSS con estilos personalizados?

He creado mi propio tema como por separado un proyecto de Maven, y está cargado correctamente.

Ahora quiero cambiar el tamaño de un componente. Por ejemplo, un <p:orderList>. Tiene una clase llamada ui-orderlist-list que se define en primefaces.css con un fijo de 200×200 dimensión. No importa lo que yo haga en mi theme.css, que se sobrescribe con este atributo y no hay manera de que pueda hacer la parte de contenido de un <p:orderList> más amplio.

Para otros componentes podría reemplazar sólo una instancia de un componente, no todos.

Puede alguien por favor decirme cómo puedo hacer todo esto?

OriginalEl autor Samuel Tian | 2012-01-07

4 Kommentare

  1. 104

    Hay varias cosas que usted necesita tomar en cuenta de que uno o más pueden ser pertinentes a su caso específico

    De carga de tu CSS después de PrimeFaces uno

    Usted necesita para asegurarse de que su CSS se carga después de la PrimeFaces. Usted puede lograr esto mediante la colocación de la <h:outputStylesheet> que hacen referencia a su archivo CSS dentro de <h:body> en lugar de <h:head>:

    <h:head>
        ...
    </h:head>
    <h:body>
        <h:outputStylesheet name="style.css" />
        ...
    </h:body>

    JSF automáticamente reubicar la hoja de estilos a la final del HTML generado <head> y esto será así asegurar que la hoja de estilo está cargado después de la PrimeFaces’ estilos predeterminados. De esta manera los selectores en el archivo CSS que son exactamente las mismas que en PrimeFaces archivo CSS obtendrá prioridad sobre el PrimeFaces.

    Probablemente se vea sugerencias para poner en <f:facet name="last"> de <h:head> que se entiende por PrimeFaces específicos HeadRenderer, pero este es innecesariamente torpe y rompería cuando usted tiene su propio HeadRenderer.

    Entender la especificidad de CSS

    Usted también necesita asegurarse de que su selector CSS es al menos tan específico como el PrimeFaces’ default selector CSS del elemento en particular. Usted necesita entender La Especificidad de CSS y En cascada y las reglas de Herencia. Por ejemplo, si PrimeFaces declara un estilo por defecto de la siguiente manera

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

    y se declara como

    .ui-bar {
        color: purple;
    }

    y el elemento particular con class="ui-bar" sucede que tiene un elemento principal con class="ui-foo", entonces el PrimeFaces’ uno todavía tendrá prioridad, ya que es el más específico de partido!

    Puede utilizar el navegador web de desarrollador de herramientas para encontrar la exacta selector CSS. Botón derecho del ratón en el elemento en cuestión en el webbrowser (IE9/Chrome/Firefox+Firebug) y elegir Inspeccionar Elemento a ver.

    ¿Cómo puedo anular la configuración predeterminada de PrimeFaces CSS con estilos personalizados?

    Parcial primordial

    Si usted necesita para reemplazar un estilo sólo para una determinada instancia del componente y no todas las instancias del mismo componente, a continuación, añadir una costumbre styleClass y gancho en ese lugar. Es otro caso donde la especificidad es utilizada o aplicada. Por ejemplo:

    <p:dataTable styleClass="borderless">
    .ui-datatable.borderless tbody,
    .ui-datatable.borderless th
    .ui-datatable.borderless td {
        border-style: none;
    }

    Nunca se uso !importante

    En caso de no cargar correctamente el archivo CSS en la orden o a la figura de la derecha selector CSS, usted probablemente va a agarrar la !important solución. Esto es absolutamente Incorrecto. Es un feo solución y no una solución real. Sólo confunde a su estilo de reglas y más en el largo plazo. El !important debe sólo ser utilizados para reemplazar los valores codificados en HTML del elemento style atributo de una hoja de estilos CSS archivo (que es a su vez también una mala práctica, pero en algunos casos raros, por desgracia inevitable).

    Véase también:

    Un buen truco es el prefijo de la PrimeFaces selectores con html con el fin de hacerlos más específicos.

    OriginalEl autor BalusC

  2. 4

    puede crear un nuevo archivo css por ejemplo cssOverrides.css

    lugar y todas las modificaciones que desee en su interior, que manera de actualizar el primefaces versión no afecta a usted, a

    y en su h:cabeza agregar algo como que

    <link href="../../css/cssOverrides.css" rel="stylesheet" type="text/css" />

    si no funciona, trate de añadir a la h:cuerpo

    con el fin de comprobar si su trabajo pruebe este sencillo ejemplo, en el archivo css

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

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

    OriginalEl autor Daniel

  3. 2

    Estoy utilizando PrimeFaces 6.0. Aquí hay algo de información que me hubiera gustado tener con respecto a esta:

    Si utiliza <h:outputStylesheet/>, va a trabajar, pero tu CSS no será cargado último, incluso si es la última en la <h:head></h:head> etiquetas (otros archivos CSS serán incluidos posteriormente). Un truco que puedes hacer lo que he aprendido de aquí 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 tu CSS será la última carga. Nota: usted todavía tiene que cumplir con la especificidad de las reglas como BalusC descritos.

    Puse «MyCSS.css» en WebContent/resources/css/.

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

    OriginalEl autor Andrew

  4. 0

    Los estilos usados por PrimeFaces /jQuery interfaz de usuario puede ser bastante complejo. Un elemento puede recibir su estilo de varias reglas de CSS. Es bueno saber que usted puede utilizar filtros en el DOM inspector de estilo de la pestaña búsqueda en la propiedad que desea personalizar:

    ¿Cómo puedo anular la configuración predeterminada de PrimeFaces CSS con estilos personalizados?

    Esta imagen fue tomada usando Chrome, pero el filtrado también está disponible en Firefox y Safari.

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

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

    OriginalEl autor Jasper de Vries

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea