Apply CSS Styles

Building on the Quick Start and Add Headers examples, you can change the appearance of the headers using CSS styles.

In the <body> section of your HTML file, replace the markup with this, which adds headers for each page.

Markup	Copy Code
<div id="wizard1"> <ol> <li><h1>Header 1</h1></li> <li><h1>Header 2</h1></li> <li><h1>Header 3</h1></li> </ol> <div>Page 1 content</div> <div>Page 2 content</div> <div>Page 3 content</div> </div>

In the <head> section of your HTML file, above the script that includes the document ready function, add this style section, which changes the color and style of the headers and the back and next buttons.

Styles	Copy Code
<style type="text/css"> .wijmo-wijwizard .ui-button { background: CornflowerBlue; border-color: Black; border-width: medium; } .wijmo-wijwizard .ui-button-text { color: Black; font-family: Algerian; } .wijmo-wijwizard .ui-widget-header { background: CornflowerBlue; font-family: Algerian; border-color: Black; border-width: medium; } .wijmo-wijwizard-content { background-color: White; border-color: Black; border-width: medium; } .wijmo-wijwizard-steps h1 { color: Black; } </style>

Styles

Copy Code

<style type="text/css">
.wijmo-wijwizard .ui-button
{
    background: CornflowerBlue;
    border-color: Black;
    border-width: medium;
}
.wijmo-wijwizard .ui-button-text
{
    color: Black; 
    font-family: Algerian;
}
.wijmo-wijwizard .ui-widget-header
{
    background: CornflowerBlue; 
    font-family: Algerian;
    border-color: Black;
    border-width: medium;
}
.wijmo-wijwizard-content
{
    background-color: White; 
    border-color: Black;
    border-width: medium;
}  
.wijmo-wijwizard-steps h1
{
    color: Black;
}
</style>

No changes are necessary in the script. The basic script is sufficient to create the wizard.
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with CSS styles applied to the header and button text and background colors.

Concepts

Style Options

Themes and Styles

ThemeRoller

Reference

wijwizard API