JSF Primefaces ConfirmDialog

Question

我正在改进/优化我的PrimeFaces ConfirmDialog，但我似乎无法在上面放置一些漂亮的图像或改善它的外观。此外，我似乎找不到有关如何使用其属性的文档，我已经下载了PrimeFaces用户手册，但似乎缺少一些内容。以下是我的代码。

<p:confirmDialog header="Confirm" severity="alert" closeOnEscape="true" widgetVar="confirmationDialog" showEffect="fold" >
    <f:facet name="message">
          <h:outputText value="Are you sure all details 
                           are correct and proceed in creating the Account?" />        
    </f:facet>
    <p:commandButton value="Yes" actionListener="#{marketingPersonController.create}" 
                     oncomplete="confirmationDialog.hide()" icon="ui-icon-check"
                     update="propertyPanel accountPanel marketingPersonPanel">
         <f:ajax rendered="propertyPanel accountPanel marketingPersonPanel"/>
    </p:commandButton>

    <p:commandButton value="No" onclick="confirmationDialog.hide()" type="button" 
                     icon="ui-icon-close"/>
</p:confirmDialog>

这段文本的意思是：这里有一个屏幕截图。我无法移除那个小的感叹号图标，即使我将severity设置为none，它仍然显示为一个奇怪的“^”图像。我想完全改变图标并修改其外观。此外，我尝试了这种CSS代码，但它仍然不起作用。

  .ui-dialog-content p span { 
            background-image: url('path to image here')
               no-repeat !important;
  }

我做错什么了吗？如果您有完整的PrimeFaces文档，那也会很有帮助。谢谢。

- steven0529

Answer 1

您有两种选择：

您可以直接替换图标，覆盖Primefaces CSS，代码如下：

CSS

.ui-icon.ui-confirm-dialog-severity {
    background-position: 0 0 !important; 
    background-image: url('PATH TO IMAGE HERE') !important;
}

或者你可以这样做：在触发对话框的组件内部：

XHTML

 <p:confirm header="HEADER" message="MESSAGE" icon="ui-icon-alert" />

示例： http://www.primefaces.org/showcase/ui/confirmDialog.jsf

CSS

CSS（层叠样式表）是一种用于描述网页上元素如何展示的语言。它可以控制字体、颜色、布局和其他视觉效果，以使网站更美观和易读。CSS可以在HTML标签上使用，也可以作为单独的外部文件链接到HTML中。

.ui-icon.ui-confirm-dialog-severity.ui-icon-alert {
    background-position: 0 0 !important; 
    background-image: url('PATH TO IMAGE HERE') !important;
}

- David H.

---

我尝试了第一个CSS解决方案，它有效了。谢谢！另外，我能否修改标题，比如加入一些颜色？ - steven0529