how to override theme in primefaces on Dialog window and set user define CSS

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

enter image description here

but i dont know why my overrided theme not working i tried alot and i have output like that enter image description here

and my over rided css is this

.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;
}

and my xhtml file code is this

<h:form id="form6"> 
                            <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true"  /> 


        <h:button id="button1" onclick="ex.show();return false;" value="Ex alternis sermonibus" actionListener="#{indexBean.addInfo}"/>


        <h:button id="button2"  onclick="radicalis.show();return false;" value="Radicalis alternis sermonibus"/>

    <p:commandButton id="infoButton" value="Info" actionListener="#{indexBean.addInfo}"/>         

</h:form> 
        <h:form id="form1">
            <h:outputText id="hail"/>
        </h:form>

        <h:outputText id="hail-outside" />

        <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">
            <h:form id="form2">
                <h:outputText value="You have successfully complete the action" ></h:outputText>
                <p:commandButton value="ok" >

                </p:commandButton>
            </h:form>
        </p:dialog>

        <p:dialog id="dialog2"  appendToBody="true" modal="true" widgetVar="radicalis">
            <h:form id="form3">
              <h:outputText value="Welcome here every one"></h:outputText>
            </h:form>
        </p:dialog>

kindly tell me what is wrong with my css

Solution

Couple of things you are not doing ok:

to set the size of the dialog, don't use style. use 'width' and 'height' properties.
you shouldn't have to add classes to the dialog. you should only add one single class (one class of your own, not jquery classes) and then referecen this dialog using this class and all jquery classes.

Differences:

Width: as mentioned above, use the width property of p:dialog.
green border in the dialog body:there are several ways to accomplish this.
1) add border to .ui-dialog-content.ui-widget-content
2) add green background to .ui-dialog.ui-widget.ui-widget-content, then add white background and margin to .ui-dialog-content.ui-widget-content
shadow in title: remove it form .ui-dialog-titlebar.ui-widget-header.

This is how the dialog should look like:

<p:dialog id="dialog1" header="Success" modal="true" resizable="false" appendToBody="true"  widgetVar="ex" width="295" height="181"
     styleClass="customDialog">

And the styles in the css: (this is not all the css to make it work, just a sample of how you should be dealing with classes)

.customDialog {
    background: green;
}

.ui-dialog.customDialog .ui-dialog-content {
    padding: 0;
    margin: 20px 10px;
}
.ui-dialog-titlebar.ui-widget-header.customDialog {
    background: green;
    color: black;
    box-shadow: none;
}

This way you are editing the css for this particular dialog only.