Styling and Theming (igDialog)

Topic Overview

Purpose

This topic demonstrates the different approaches of styling the igDialog™.

Required background

The following topics are prerequisites to understanding this topic:

• igDialog Overview: The topic introduces the user to the igDialog control’s main features.

• Adding igDialog: This topic demonstrates how to add the igDialog control to a web page.

In this topic

This topic contains the following sections:

• Style Configuration Summary
• Style igDialog Using jQuery Theme Switcher
  • Code
  • Example
• Related Content
  • Topics
  • Samples

Style Configuration Summary

The following table lists the configurable aspects of the igDialog control that will allow style modification. Additional details are available after the table.

Style igDialog Using jQuery Theme Switcher

Using the jQuery Theme Switcher is an easy way to style the igDialog control. This is possible because the igDialog CSS class naming follows the jQuery UI CSS Framework naming convention.

Code

The following code shows you how to initialize the jQuery Theme Switcher. You do not need to make additional configurations on the igDialog; the Theme Switcher will replace CSS rules automatically.

$("#themeSwitcher").themeswitcher();

<div id="themeSwitcher"></div>

Example

The screenshot below demonstrates the igDialog styled with Blitzer theme.

Related Content

Topics

The following topics provide additional information related to this topic:

• igDialog Overview: The topic introduces the user to the igDialog control’s main features.
• Adding igDialog: This topic demonstrates how to add the igDialog control to a web page.
• igDialog Header and Footer: This topic demonstrates how to enable the igDialog footer and header and how to customize them.
• CSS Class Reference (igDialog): The topic that introduces the user to the igDialog™ control’s CSS classes.

Samples

The following samples provide additional information related to this topic:

• Icons: This sample demonstrates you how to show igDialog icons.