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


Tags: html,css,jsf-2,primefaces

Problem :

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.


    CSS Howto..

    How to change the color of Bootstrap links

    how to make zurb foundation framework off canvas look flat

    How do I access separate points/sections on a single image in html/javascript?

    How can i make an element from a bottom stacking context stays in front of another higher stacking context? [duplicate]

    Captions after 1st slide doesnt show for flexslider

    How can I move a div with direction in JavaScript?

    How to insert a comma in the following code

    How to programmatically download all contents of webpage, not only the source code in Java

    How to use CSS with JS [duplicate]

    How to style drop down list? [duplicate]

    HTML, CSS: How to override settings from *{}(!important is not working) [closed]

    How do you create a scrollbar that recognizes scrolling only for the current topmost container using css?

    How to not display css padding when span element is empty

    How to get the element background image in html using javascript

    How do I move this label inside my textarea?

    How do i put text under an img icon in a menu?

    How to put the table inside the box

    How to give reference to static resources like css,images,java script in JSP?

    How to design a full width bar with HTML and CSS [closed]

    How to remap CSS shortcut key in Mac Bluefish text editor

    How to make layout like notes in Google Keep using CSS?

    How can I scale the space taken by a scaled element

    How to add hover text on D3 disign?

    How to use a text file's contents in HTML as text [duplicate]

    Show/Hide (Read More) Text Depending on Number of Character Pure CSS

    How to center a container and make webpage fit on mobile?

    How to detect CSS translate3d without the webkit context?

    how do I apply a class to the header cell for a column in slickgrid

    How do you name these tags in CSS? [closed]

    Any ideas how to display divs vertically in bootstrap container?