Estoy utilizando primefaces 3.5 y quiero mostrar la ventana de diálogo después de la realización de cualquier operación .
Y el cuadro de diálogo pantalla de este

cómo reemplazar tema en primefaces en la ventana de Diálogo y establecer el usuario definir CSS

pero no sé por qué mi overrided tema no funciona he probado un montón y he de salida, como que
cómo reemplazar tema en primefaces en la ventana de Diálogo y establecer el usuario definir CSS

y mi más rided css es este

.ui-widget-content{
    background-color:white;

}
.ui-helper-clearfix:after{
    background-color:green!important;

}
.ui-widget-header{
    background:green!important;

}
.ui-shadow{

    box-shadow:none;
}
.ui-dialog-content{
    background:white!important;

    padding: 0,0,0,0!important;
}

y mi xhtml archivo de código es este

<h:form id="form6"> 
                            <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true"  /> 


        <h:button id="button1" onclick="ex.show();return false;" value="Ex alternis sermonibus" actionListener="#{indexBean.addInfo}"/>


        <h:button id="button2"  onclick="radicalis.show();return false;" value="Radicalis alternis sermonibus"/>

    <p:commandButton id="infoButton" value="Info" actionListener="#{indexBean.addInfo}"/>         

</h:form> 
        <h:form id="form1">
            <h:outputText id="hail"/>
        </h:form>

        <h:outputText id="hail-outside" />

        <p:dialog id="dialog1" header="Success" modal="true" resizable="false" style="height: 121px!important;left: 18px!important;width: 295px!important;"   appendToBody="true"  widgetVar="ex"
         styleClass="ui-widget-content ui-helper-clearfix:after ui-widget-header ui-shadow .ui-dialog .ui-dialog-content">
            <h:form id="form2">
                <h:outputText value="You have successfully complete the action" ></h:outputText>
                <p:commandButton value="ok" >

                </p:commandButton>
            </h:form>
        </p:dialog>

        <p:dialog id="dialog2"  appendToBody="true" modal="true" widgetVar="radicalis">
            <h:form id="form3">
              <h:outputText value="Welcome here every one"></h:outputText>
            </h:form>
        </p:dialog>

por favor decirme lo que está mal con mi css

  • ¿has comprobado en firebug ¿qué está pasando? si sus estilos fueron aplicados, sino anular, o no se aplica en absoluto?
  • aplicado pero modicar en la imagen de arriba, a continuación, me había hecho en firebug
InformationsquelleAutor Engineer | 2014-02-26

2 Comentarios

  1. 6

    Par de cosas que no están haciendo bien:

    • para ajustar el tamaño del cuadro de diálogo, no usa el estilo. el uso de «anchura» y «altura» de las propiedades.
    • usted no debería tener que añadir clases para el diálogo. sólo debe agregar una sola clase (una clase de su propio, no jquery clases) y, a continuación, referecen este cuadro de diálogo uso de esta clase y todos jquery clases.

    Diferencias:

    • Ancho: como se mencionó anteriormente, el uso de la propiedad de ancho p:cuadro de diálogo.
    • borde verde en el cuadro de diálogo del cuerpo:hay varias maneras de lograr esto.

      1) agregar frontera .ui-dialog-content.ui-widget-content

      2) añadir el fondo verde para .la interfaz de usuario cuadro de diálogo.ui-widget.ui-widget-content, a continuación, añadir el fondo blanco y el margen .ui-dialog-content.ui-widget-content
    • sombra en el título: eliminar de forma .ui-dialog-barra de título.ui-widget-encabezado.

    Esta es la forma en que el diálogo debe verse como:

    <p:dialog id="dialog1" header="Success" modal="true" resizable="false" appendToBody="true"  widgetVar="ex" width="295" height="181"
         styleClass="customDialog">

    Y los estilos del css: (esto no es todo el css para que funcione, sólo una muestra de cómo debe ser el trato con las clases)

    .customDialog {
        background: green;
    }
    
    .ui-dialog.customDialog .ui-dialog-content {
        padding: 0;
        margin: 20px 10px;
    }
    .ui-dialog-titlebar.ui-widget-header.customDialog {
        background: green;
        color: black;
        box-shadow: none;
    }

    De esta manera se está editando el css para este cuadro de diálogo sólo.

  2. 0

    En Mi caso el css fue diferente, porque me gustaría cambiar las fronteras’color

    <p:dialog id="dialog1" header="Success" modal="true" resizable="false" appendToBody="true"  widgetVar="ex" width="295" height="181"
         styleClass="customDialog">

    CSS

    .customDialog {
        color : white;
    }
    
    .customDialog .ui-dialog-titlebar.ui-widget-header {
        background: green !important;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here