Themes

Creating a theme

Themes should be defined in the special App_Themes folder.

1. Right-click your website in Solution Explorer, click Add ASP.NET Folder, and then click Theme.
2. Within the App_Themes folder, you define an individual folder for each theme in your application. Example: Professional or Simple

You can then create skin files or style sheets in each of these theme folders.

Applying the theme

This can be done either on the page level by using the attributes Theme or StyleSheetTheme in the @Page directive.  The difference between Theme and StyleSheetTheme is that StyleSheetTheme sets properties before the page's controls properties are set, while Theme properties are set after the page sets the controls properties.

This means that if in the theme folder, we have set the label colour to Red and in the page we set the label colour to Green, the label will be red if using Theme but green if using StyleSheetTheme.

Or as commonly used, apply it to the whole website through the web.config in the system.web section

<pages Theme=”themeName”>

or

<pages StyleSheetTheme=”themeName”>

Changing theme at runtime programattically

In order to change the theme by code, use the PreInit event to change either the 'Theme' of the page.  If you want that the user changes the theme upon a button click or a change in dropdown, just store the value in  a session variable, and then set the session variable's value to the page.theme in the preinit event

protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = "Simple";
}

To change StyleSheetTheme at runtime, you can't do the same as the above or you will get the error

The StyleSheetTheme property cannot be set, please override the property instead.

In order to apply the StyleSheetTheme at runtime, you must override the property like so:

public override String StyleSheetTheme
{
    get { return "Simple"; }
}

Ideally, use the above code in a base page which all your pages derive from.