CODEWITHSUNDEEP
cssjsfjsf-2primefacesxhtml
steven0529
steven0529

Reputation: 1563

JSF Primefaces ConfirmDialog

I am working on improving/polishing my primefaces ConfirmDialog but I cant seem to put some nice image on it or improve some of its looks. Also I cant seem to find some documentation on how to use its attributes, I have downloaded the primefaces user manual, but it seem to be missing some things. Here is my code. 

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

Here is a screenshot

enter image description here

I cant seem to remove the small ! icon there, if I put severity none, it still shows up a wierd "^" image. I want to completely change the icon and somehow modify some of its look.

Also, I tried having this css. Still its not working. 

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

Am I doing something wrong? And if you have a complete primefaces documentation, that would also help. Thanks

Upvotes: 4

Views: 9282

Answers (1)

David H.
David H.

Reputation: 963

You have 2 possibilities :

You can directly replace the icon overriding the Primefaces CSS like this :

CSS

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

or you could do it like this : Inside the component which trigger the dialog :

XHTML

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

Example Here : 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;
}

Upvotes: 4

Related Questions