[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Collapse]Common Concepts
  [Expand]Web.config Modifications
  [Expand]Callback Exception Handling
  [Expand]Client-Side Functionality
  [Expand]Cookies Support
  [Collapse]Appearance Customization - Theming
    DevExpress Themes Overview
    Available Themes
    ASPxThemes Assembly
    Modifying Themes
    Changing Theme Base Color and Font Settings
    ASPxThemeDeployer Tool
    ASPxThemeBuilder Tool
    Apply a Theme with the DevExpress Mechanism
    Apply a Theme with the ASP.NET Mechanism
    Attaching a Custom Theme Assembly
    DevExpress Resource Management Mechanism
   [Expand]Obsolete Approaches (prior to 2012.1)
   Icon Collection
  [Expand]Performance Optimization
  [Expand]CSS Image Sprites
   Data Annotation Attributes
   Supported Document Types
  [Expand]Accessibility Support
   Right to Left Support
   HTML Encoding
  [Expand]SharePoint Support
   Mobile Support
  [Expand]Office Document Management
   Cloud Storage Account Management
  [Expand]Web Farm and Web Garden Support
 [Expand]ASP.NET WebForms Controls
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Apply a Theme with the ASP.NET Mechanism

If you are familiar with standard ASP.NET Themes and use them widely across web projects, you can utilize DevExpress Themes in a similar way. To apply a pre-packaged DevExpress Theme or a custom theme, copy the required skin files to your project's App_Themes folder. The DevExpress ASPxThemeDeployer tool can assist you in deploying theme resource files from a theme assembly (for ASPxThemes or a custom theme assembly).

Expanded Deploying Skin Files to a Website

  • Launch the ASPxThemeDeployer tool.
  • If you already have a custom theme assembly, do the following.

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

  • Specify the path to your site in the Site path box.
  • Select the required products from the Products check box list.
  • In the Themes check box list, select the required pre-packaged or custom theme.
  • 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.
  • After copying is complete, click Copy Files and close the Theme Deployer window.
  • Click the Refresh button () in Solution Explorer, to see that the required pre-packaged or custom theme has been added to the App_Themes folder of your application.

Other theme resources (such as CSS and images) can be placed in the same folder as the skin files for the theme, or they can be added elsewhere in the Web application (e.g., within a theme assembly).

You can now apply the theme to a web page or an entire website.

Expanded Apply a Theme to a Web Page

  • Declarative approach:

    To specify a theme for a page, set the Theme attribute of the @Page directive to the theme name.

  • Programmatic approach:

    Specify the page's Page.Theme property in the Page.PreInit event handler.

Expanded Apply a Theme to a Website

  • Declarative approach:

    Set the theme attribute to the name of the required theme in the pages element within the web.config file.

We recommend that you utilize the DevExpress theming mechanism instead of the ASP.NET mechanism. Note that if both mechanisms are used to specify a theme, the DevExpress mechanism will be applied. If you wish to utilize the ASP.NET theming mechanism instead, ensure that the theme attribute of the themes DevExpress section is empty.

Expanded See Also

Is this topic helpful?​​​​​​​