Use CSS Styles

Building on the Quick Start example, you can change the colors and styles of the background, text, borders, and buttons using CSS styling. 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 includes the document ready function, add this style, which changes the colors and styles of the elements of the dialog.

CSS	Copy Code
<style type="text/css"> .wijmo-wijdialog { color: DarkGrey; background: BlueViolet; border-color: Black; border-width: thick; font-family: BlackadderITC; font-size: large; } .wijmo-wijdialog-captionbutton { background: Black; } </style>

CSS

Copy Code

<style type="text/css">
    .wijmo-wijdialog 
        {
            color: DarkGrey; 
            background: BlueViolet; 
            border-color: Black; 
            border-width: thick; 
            font-family: BlackadderITC; 
            font-size: large; 
        }
    .wijmo-wijdialog-captionbutton
        {
            background: Black;
        }
</style>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the widget.
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with the new styles in place.

Concepts

Widgets

Quick Start