title: how to override theme in primefaces on Dialog window and set user define CSS
body: <p>Im using primefaces 3.5 and i want to show dialog window after completion of any operation .
  And the dialog box should display like this</p>
  
  <p><img src="https://i.stack.imgur.com/AvGjm.png" alt="enter image description here"></p>
  
  <p>but i dont know why my overrided theme not working i tried alot and i have output like that
  <img src="https://i.stack.imgur.com/u57gM.png" alt="enter image description here"></p>
  
  <p>and my over rided css is this</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>and my xhtml file code is this</p>
  
  <pre><code>&lt;h:form id="form6"&gt; 
                              &lt;p:messages id="messages" showDetail="true" autoUpdate="true" closable="true"  /&gt; 
  
  
          &lt;h:button id="button1" onclick="ex.show();return false;" value="Ex alternis sermonibus" actionListener="#{indexBean.addInfo}"/&gt;
  
  
          &lt;h:button id="button2"  onclick="radicalis.show();return false;" value="Radicalis alternis sermonibus"/&gt;
  
      &lt;p:commandButton id="infoButton" value="Info" actionListener="#{indexBean.addInfo}"/&gt;         
  
  &lt;/h:form&gt; 
          &lt;h:form id="form1"&gt;
              &lt;h:outputText id="hail"/&gt;
          &lt;/h:form&gt;
  
          &lt;h:outputText id="hail-outside" /&gt;
  
          &lt;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"&gt;
              &lt;h:form id="form2"&gt;
                  &lt;h:outputText value="You have successfully complete the action" &gt;&lt;/h:outputText&gt;
                  &lt;p:commandButton value="ok" &gt;
  
                  &lt;/p:commandButton&gt;
              &lt;/h:form&gt;
          &lt;/p:dialog&gt;
  
          &lt;p:dialog id="dialog2"  appendToBody="true" modal="true" widgetVar="radicalis"&gt;
              &lt;h:form id="form3"&gt;
                &lt;h:outputText value="Welcome here every one"&gt;&lt;/h:outputText&gt;
              &lt;/h:form&gt;
          &lt;/p:dialog&gt;
  </code></pre>
  
  <p>kindly tell me what is wrong with my css</p>