html - 如何在对话框窗口中覆盖 primefaces 中的主题并设置用户定义 CSS

Question

我使用 primefaces 3.5，我想在完成任何操作后显示对话窗口。对话框应该像这样显示

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

我的 CSS 是这个

.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

有几件事你做得不好:

• 要设置对话框的大小，不要使用样式。使用“宽度”和“高度”属性。
• 您不必向对话框中添加类。您应该只添加一个类(您自己的一个类，而不是 jquery 类)，然后使用该类和所有 jquery 类引用此对话框。

区别:

• Width:如前所述，使用p:dialog的width属性。
• 对话框主体中的绿色边框:有几种方法可以实现。
  1) 添加边框到 .ui-dialog-content.ui-widget-content
  2) 为 .ui-dialog.ui-widget.ui-widget-content 添加绿色背景，然后为 .ui-dialog-content.ui-widget-content 添加白色背景和边距
  
• 标题中的阴影:将其从 .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。