如何在Dialog窗口中覆盖primefaces中的主题并设置用户定义CSS

Question

我使用primefaces 3.5,我希望在完成任何操作后显示对话框窗口.对话框应该像这样显示

但我不知道为什么我的主题不起作用我尝试了很多,我有这样的输出

而我的过度骑行就是这个

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

我的xhtml文件代码是这个

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

请告诉我我的CSS有什么问题

Answer 1

有些事情你做得不好:

• 要设置对话框的大小,请不要使用样式.使用'width'和'height'属性.
• 您不必在对话框中添加类.你应该只添加一个单独的类(你自己的一个类,而不是jquery类),然后使用这个类和所有jquery类来引用这个对话框.

区别:

• 宽度:如上所述,使用p:dialog的width属性.
• 对话框体中的绿色边框:有几种方法可以实现此目的.
  1)将边框添加到.ui-dialog-content.ui-widget-content
  2)将绿色背景添加到.ui-dialog.ui-widget.ui-widget-content,然后将白色背景和边距添加到.ui-dialog- content.ui小部件内容
  
• 标题中的阴影:将其从.ui-dialog-titlebar.ui-widget-header中删除.
  

这是对话框的样子:

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

而且css中的样式:(这不是让它工作的所有css,只是你应该如何处理类的一个示例)

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

这样,您只能编辑此特定对话框的css.