p:confirmDialog如何更改图像和文本颜色

时间:2012-10-10 16:11:30

标签: css image primefaces modal-dialog graphic

我需要使用主要面孔显示确认对话框。但我需要一个自定义图标(黄色三角形)和红色文本。通过使用以下我得到一个黑色文本的蓝色三角形,我不知道如何使用我的图标以及样式对话文本。

    <p:column id="billing_address_unassign"
    headerText="#{billingAccount_msgs['addresses.table.column.unassign']}"
    styleClass="col10">
    <p:commandButton immediate="true" id="address_unassign"
        styleClass="cart-button-class" icon="delete"
        title="#{billingAccount_msgs['unassign.address.tooltip.text']}"
        oncomplete="unassignBillingAddressConfirmationDialog.show()">
        <f:setPropertyActionListener value="#{billingAddress}"
            target="#{billingAddressBean.selectedBillingAddress}" />
    </p:commandButton>
</p:column>
  </p:dataTable>

  <p:confirmDialog appendToBody="true"
id="unassignBillingAddressConfirmationDialog"
styleClass="confirm-dialog"
message="#{billingAccount_msgs['unassignBillingAddress.confirmation']}"
header="#   
    {billingAccount_msgs['unassignBillingAddress.confirmation.dialog.header']}"
   severity="alert" widgetVar="unassignBillingAddressConfirmationDialog">

1 个答案:

答案 0 :(得分:2)

您必须创建自己的黄色图标,然后在确认对话框中放置图标而不是默认图标。只需使用css即可将文本更改为红色。

将以下内容添加到您的css文件中:

/*Red text in confirm dialog*/
.ui-confirm-dialog .ui-dialog-content p { color: red; }

/*Yellow triangle in confirm dialog */
.ui-confirm-dialog .ui-dialog-content p span { background-image: url("#resource['images:yellow-triangle.png']}") no-repeat}