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>

這是一個截圖

我似乎無法刪除小！ 圖標那里，如果我把嚴重性沒有，它仍然會顯示一個奇怪的“^”圖像。 我想完全改變圖標，並以某種方式修改它的一些外觀。

此外，我嘗試了這個CSS。 仍然沒有用。

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

難道我做錯了什么？ 如果你有一個完整的primefaces文檔，這也會有所幫助。 謝謝

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

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