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 ASP.NET Approach

If you are familiar with standard ASP.NET Themes and use them widely across web projects, you can use DevExpress Themes in a similar way, if required. In this case, to apply a prepackaged or custom theme, copy the required theme source files (such as skins, cascading style sheets and images) to your project's App_Themes folder. The ASPxThemeDeployer tool will also help if you need to deploy theme resource files from a theme assembly (ASPxThemes or a custom theme assembly).

Expanded Deploying Skin Files to a Website

  1. Launch the ASPxThemeDeployer tool.
  2. If you already have the custom theme assembly, do the following.

    • In the Theme Deployer window, click the File menu, and then click Import Custom Themes...
    • In the invoked Open dialog box, select the required assembly and click Open.

  3. Specify the path to your site in the Site path box.
  4. Select the required MVC version from the MVC version combo box. Note that projects created using the DevExpress Template Gallery target ASP.NET MVC 5 by default.
  5. In the Products check box list, select the required product (MVC Extensions).
  6. In the Themes check box list, select the required pre-packaged or custom theme.
  7. Since the assembly contains all required images and CSS files, you only need to add skin files to your project, so leave the Only skin files option checked.
  8. Click Copy Files and close the Theme Deployer after copying is finished.
  9. Click the Refresh button () in Solution Explorer. You can see that the required pre-packaged or custom theme is added to the App_Themes folder of your application.

You can now apply the theme to an extension or an entire website.

Expanded Applying a Theme to a Website

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

  1. Add the required stylesheets 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 for DevExpress Extensions in Global.asax:

    Global.asax code:

    The code sample below demonstrates how to specify a theme for 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. As a result, 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 stylesheets for the required extension suite explicitly (by specifying the theme name via a stylesheet object's StyleSheet.Theme property), as shown in the code sample below.

    View code:

    Note that themes that are specified explicitly via the ExtensionsFactory.GetStyleSheets method are always rendered regardless 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 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?​​​​​​​