Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Collapse]Common Concepts
    Web Application Project Templates
    Insert Extension Wizard
    Data Binding
   [Collapse]Applying Themes
     Applying Themes - The DevExpress Approach
     Applying Themes - The ASP.NET Approach
     Attaching a Custom Theme Assembly
    Client-Side API
    Declaring Server-Side Event Handlers
    Templates
    Using Callbacks
    Passing Values to a Controller Action through Callbacks
    Supported Attributes for Model Validation
    Using Extensions in Razor Views
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Applying Themes - The DevExpress Approach

DevExpress Extensions for ASP.NET MVC ship with a set of built-in predefined visual themes that allow you to provide a consistent appearance through your website. For a list of prepackaged themes, see the Available Themes topic. By default, theme elements of all available built-in themes are embedded as resource files into a specific ASPxThemes Assembly shipped within the installation. To learn more, please refer to the DevExpress Themes Overview topic.

Note

You can use the Project Wizard to specify a theme for your newly created web application. The wizard sets the Theme Name attribute in web.config.

Expanded Applying a Theme to a Website

To apply a theme to a web application, perform the following steps:

  1. Add the required style sheets to the View using the ExtensionsFactory.GetStyleSheets method.

    The following code demonstrates how to add style sheets for all DevExpress MVC Extensions:

    View code ("_Layout.cshtml"):

  2. Specify the extension theme in the Global.asax file or in web.config.

    The code sample below demonstrates how to specify a theme of DevExpress Extensions in Global.asax:

    Global.asax code:

    The code sample below demonstrates how to specify a theme of DevExpress Extensions in web.config:

    Web.config code:

Note that if you only call the ExtensionsFactory.GetStyleSheets method in this implicit manner (i.e., without specifying the theme name via a stylesheet object's StyleSheet.Theme property), and do not specify a global theme in web.config or via the DevExpress helper's static property, style sheets of the Default DevExpress theme will be attached. This Default DevExpress theme will automatically be applied to all DevExpress extensions.

Expanded Applying a Theme to an Extension

If you need to apply a theme to a standalone extension, perform the following steps:

  1. In the View code, add the style sheets for the required extension suite explicitly (by specifying the theme name via a stylesheet object's StyleSheet.Theme property), as it is shown in a code sample below:

    View code:

    Note that themes that are specified explicitly via the ExtensionsFactory.GetStyleSheets method are always rendered irrespective of which theme is specified globally (in web.config or via the DevExpress helper's Theme static property).

  2. Define the extension's Theme property value:

    Partial View code:

Note

When adding style sheets for the HtmlEditor, GridView and TreeList MVC Extensions, you should also add the style sheets for the Data Editors and Navigation and Layout extensions.

Expanded Theme Application Precedence

The order of precedence for applying a DevExpress theme (from lowest to highest priority) is as follows.

Expanded See Also

How would you rate this topic?​​​​​​​