Use CSS Styles

Building on the Quick Start example, you can use CSS styling to quickly change a few aspects of the Dialog widget's appearance. This same method applies to all Wijmo widgets.

Note: You can also use jQuery's ThemeRoller to roll your own theme.

In the <head> section of your HTML file, between the references and the script that contains the document ready function, add these CSS style tags to change the color, background, border, and font for the dialog.

CSS Styles	Copy Code
<style type="text/css"> .wijmo-wijdialog { color: #0088FF; background: #9933FF; border-color: #000000; border-width: thick; font-family: BlackadderITC; font-size: large; } .wijmo-wijdialog-captionbutton { background: #1892BA; } </style>

CSS Styles

Copy Code

<style type="text/css">
       .wijmo-wijdialog 
            {
                color: #0088FF; 
                background: #9933FF; 
                border-color: #000000; 
                border-width: thick; 
                font-family: BlackadderITC; 
                font-size: large; 
            }
            .wijmo-wijdialog-captionbutton
            {
                background: #1892BA;
            }
   </style>

In the <body> section of your HTML file, there is no need to make any changes to the <div> tags that create the dialog.
Save your HTML file and open it in a browser. The dialog appears like the one in the image below.

See Also

Concepts

Widgets