Applying Themes - The ASP.NET Approach

• Dec 17, 2020
• 4 minutes to read

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).

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 other required image and CSS files, leave the Only skin files option checked - to add skin files to the project.
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.

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.

   Razor (_Layout.cshtml)

   @Html.DevExpress().GetStyleSheets( 
       new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout, Theme="Aqua" }, 
       new StyleSheet { ExtensionSuite = ExtensionSuite.Editors, Theme="Aqua" }, 
       new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor, Theme="Aqua" }, 
       new StyleSheet { ExtensionSuite = ExtensionSuite.GridView, Theme="Aqua" }, 
       new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid, Theme="Aqua" },
       new StyleSheet { ExtensionSuite = ExtensionSuite.Chart, Theme="Aqua" },
       new StyleSheet { ExtensionSuite = ExtensionSuite.Report, Theme="Aqua" },
       new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler, Theme="Aqua" },
       new StyleSheet { ExtensionSuite = ExtensionSuite.TreeList, Theme="Aqua" }
   )
   

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:

   C# (Global.asax)

   protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
       DevExpressHelper.Theme = "Aqua";
   }
   

   The code sample below demonstrates how to specify a theme for DevExpress Extensions in Web.config.

   XML (Web.config)

   <system.web>
       <pages theme="Aqua" />
       <!-- ... -->
   </system.web>
   

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.

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.

   Razor (View)

   @Html.DevExpress().GetStyleSheets( 
       new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor, Theme="MetropolisBlue" },
       new StyleSheet { ExtensionSuite = ExtensionSuite.Editors, Theme="MetropolisBlue" },
       new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout, Theme="MetropolisBlue" }
   )
   ...
   

   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 static Theme property).

2. Define the extension’s Theme property value.

   Razor (Partial View)

   @Html.DevExpress().HtmlEditor(settings =>
    {
        settings.Name = "HtmlEditor";
        ...
        settings.Theme = "MetropolisBlue";
        ...
    }).GetHtml()
   

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.

Theme Application Precedence

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

• The standard pages.theme Web.config option;
• The static DevExpressHelper.Theme property;
• The SettingsBase.Theme property of individual extensions.