Mehul Harry's DevExpress Blog

This Blog

News


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)

Archives

Easy Theme Customization for DevExpress ASP.NET Controls

Back in 2014, I announced a new set of themes for our DevExpress ASP.NET and MVC controls. It goes without saying that these themes looked great, but, perhaps even better, they allowed you to easily customize the theme's base font and color. This was a huge improvement over our traditional 'classic' themes because you could now quickly create a version of one of the new themes to suit your business needs and design.

The bad news was that, in order to take advantage of this feature, you had to use our 'Theme Builder' tool.

Settings - Web.Config, API, etc.

So now for some good news! You can now simply set that base font and color for DevExpress ASP.NET and MVC controls directly from the web.config file or by using our API! The following examples work with DevExpress ASP.NET v16.2 and above.

Web.config

In your web.config, specify the 'baseColor' and 'font' settings in the themes of DevExpress section:

<configuration>
  ...
  <devExpress>
    ...
    <themes enableThemeAssembly="true"
                 styleSheetTheme=""
                 theme="Metropolis"
                 customThemeAssemblies=""
                 baseColor="Green"
                 font="30px Calibri" />
    ...
  </devExpress>
  ...
</configuration>

Programmatic API

You can also set the base font and color using API calls:

protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
    ...
    DevExpress.Web.ASPxWebControl.GlobalThemeBaseColor = "Green";
    DevExpress.Web.ASPxWebControl.GlobalThemeFont = "30px 'Calibri'";
}

Or in ASP.NET MVC you use the following approach:

protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
    ...
    DevExpress.Web.MVC.DevExpressHelper.GlobalThemeBaseColor = "#00FF00";
    DevExpress.Web.MVC.DevExpressHelper.GlobalThemeFont = "30px 'Calibri'";
}

The value formats for the color work with RGB, Hexadecimal, and Color names too. Learn more here.

Limitations

Only the following themes support the changing both the base color and font: Mulberry, Moderno, Metropolis, Metropolis Blue, iOS, Material, and Material Compact.

These classic themes allow you to set the base font only: Aqua, Black Glass, Glass, Office2003Blue, Office2003Olive, Office2003Silver, PlasticBlue, RedWine, SoftOrange, and Youthful.

Documentation

Check out this excellent help documentation topic that gives even more detail:

Theming > Changing Theme Base Color and Font Settings

Demos

Try out the latest DevExpress ASP.NET demos online and experience the theme parameters change dynamically. You can use the theme options on the top right:

Then, drop me a line below on what you think about the easy way to customize a DevExpress ASP.NET theme. Thanks!


Your Next Great .NET App Starts Here

Year after year, .NET developers such as yourself consistently vote DevExpress products #1.

Experience the DevExpress difference for yourself and download a free 30-day trial of all our products today: DevExpress.com/trial (free support is included during your evaluation).

Published Jun 13 2017, 10:50 AM by
Filed under: , ,
Bookmark and Share

Comments

No Comments

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners