Appearance Customization - Theming
- 3 minutes to read
DevExpress ASP.NET MVC Extensions ship with predefined visual themes (DevExpress Themes) that allow you to provide a consistent appearance across all DevExpress MVC components. Refer to the following help topic to see a list of DevExpress Themes: Available Themes.
Since DevExpress Themes are based on Microsoft’s theme and skin technology (see the following topic for details: ASP.NET Themes and Skins), if you are familiar with standard ASP.NET Theme implementation, you can work with DevExpress Themes in a similar way. Use the ASPxThemeDeployer tool to apply a DevExpress theme to a specific web page or an entire project. See the following help topic to learn more: Apply a Theme with the ASP.NET Mechanism.
We added a mechanism to simplify the maintenance and application of DevExpress themes in v12.1. These themes can be applied to an individual DevExpress MVC component, or to an entire website. This approach to theming is detailed below.
Maintain DevExpress Themes
All pre-packaged DevExpress Themes are included in the ASPxThemes assembly, which is registered in the GAC. This does not include the Default Theme found within our control-related DLLs.
All DevExpress Themes exposed by ASPxThemes.dll are automatically available within web projects via the DevExpress ASPxHttpHandlerModule. This module retrieves required theme resource files from the assembly (when requested), without the need to store these files within an application’s App_Theme folder.
The benefits of maintaining themes in an assembly and obtaining theme resources as required are as follows.
Ease of Upgrade
When you upgrade a project to a newer version of DevExpress ASP.NET MVC Extensions, you do not need to redeploy resource files (for predefined themes) to the App_Theme folder.
Ease of Application
You can apply predefined DevExpress Themes in different ways (via different resources) based on your objective. See the following section for more details.
Apply DevExpress Themes
We introduced programmatic (in view code or via the Global.asax file) and declarative (via the *Web.config file’s configuration options) approaches to apply a DevExpress Theme to a single MVC extension, all extensions, or an entire website - in v12.1. See the table below for details.
| Member | Description |
|---|---|
| Extension settings’ property: SettingsBase.Theme | Gets or sets the name of the theme to be applied to the extension. |
| Static property: ASPxWebControl.GlobalTheme | Gets or sets the name of the Theme to be globally applied to all DevExpress web controls across the entire web site. |
| Static property: ASPxWebControl.GlobalStyleSheetTheme | Gets or sets the name of the style sheet theme to be globally applied to all DevExpress web controls across the entire web site. |
| Static property: ASPxWebControl.GlobalThemeBaseColor | Gets or sets the base color for the theme to be globally applied to all DevExpress web controls across a web page or entire web site. |
| Static property: ASPxWebControl.GlobalThemeFont | Gets or sets the font settings of the theme to be globally applied to all DevExpress web controls across a web page or entire web site. |
| Web.config option: Theme Name | Specifies the name of a default or custom visual theme that is globally applied to all DevExpress controls within a website. |
| Web.config option: Style Sheet Theme Name | Specifies the name of a default or custom style sheet theme that is applied to all DevExpress controls within a website. |
| Web.config option: Theme Base Color | Specifies the name of a theme’s base color that is globally applied to all DevExpress controls within a website. |
| Web.config option: Theme Font Settings | Specifies a theme’s font that is globally applied to all DevExpress controls within a website. |
Refer to the following help topic for detailed information on DevExpress theme application: Apply a Theme with the DevExpress Mechanism.