Apply to

Overview

A theme is a collection of appearance property settings that allow you to define the appearance of pages and controls, and then apply the appearance consistently across pages. In ASP.NET 1.x, theme is usually applied by using different CSS files, which is called style sheet theme. ASP.NET 2.0 introduces skin files to implement page theme. By using a page theme, you are free to use either inline CSS editor or CSS class name to define appearance settings.

EO.Web navigation controls support both page theme and CSS style sheet theme.

Switch theme by using skin

A console skin is the same type of control from which other controls can inherit appearance settings. Please refer to Control Skin for details on how to use a built-in skin or create a custom skin.

Here is a code sample to dynamically switch the appearance of a menu:

[C#]
// Switch to yellowskin.
Menu1.ControlSkinID = "yellowskin";

[Visual Basic]
' Switch to yellowskin.
Menu1.ControlSkinID = "yellowskin"

The advantage of using skin is you can leverage Control Builder to design the appearance. Control Builder allows you to define CSS style and preview it immediately without editing the styles in a file.

You can also switch themes by using different CSS files.

Switch themes by using CSS

There is a limitation to switch themes by using CSS: you must use CSS class to define styles instead of using inline CSS text. One benefit of using inline CSS editor is result can be previewed inside the Control Builder. If using CSS class, you need to switch to CSS class editor, change the style, and run the page to see the result.

Here is a code sample to dynamically switch the appearance of a menu by using a different CSS file:

[C#]
// Switch to yellowskin.
Menu1.CssFile = "yellowskin.css";

[Visual Basic]
' Switch to yellowskin.
Menu1.CssFile = "yellowskin.css"

Note that inline CSS text takes precedence over CSS class. Please clear inline CSS text if you want to use CSS class.

ASP.NET 2.0 Theme support

Both ControlSkinID and CssFile are supported in ASP.NET 1.1 and 2.0.

Specifically when you define a .NET 2.0 page theme, both ControlSkinID and CssFile properties acquire values from the theme based on the value of the control's SkinID. These two properties are then interpreted by EO.Web navigation controls at rendering time to render the appearance defined in the skin or CSS file.