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

June 2017 - Posts

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

  • DevExtreme React Now Available on GitHub

    DevExtreme React Grid

    In May 2017, we announced our CTP of the DevExtreme React Grid. And since then, we've released the DevExtreme React Grid on GitHub in the DevExtreme Reactive repo:

    Your feedback helps us improve these controls. So please click the 'Star' and 'Watch' links on this repo and let us know your thoughts. You'll also get updates about other future DevExtreme React controls too. So by 'watching' the repo you'd get the latest updates like this: we're about to release new Material UI templates and demos:

    DevExtreme React Grid - Material UI

    Distribution

    The DevExtreme React Controls are only available on the NPM distribution and the development will be on this GitHub repo. They will not be included in the DevExtreme installation that you find at https://js.devexpress.com. The React framework and other supporting libraries are on GitHub and we intend to be in the same ecosystem. In fact, we've also moved DevExtreme to GitHub but DevExtreme will still have an installation available at https://js.devexpress.com.

    Webinar Recap

    Check out the recent 'New in v17.1: DevExtreme' webinar to learn about the DevExtreme React Grid:

    More controls!

    The DevExtreme React Grid was only the first of other controls that we have planned. What's next? Stay tuned to find out.

    Please try the excellent DevExtreme React Grid and then let us know what you think of it.

    Email: mharry@devexpress.com

    Twitter: @mehulharry


    Create highly responsive web apps for touch-enabled devices and traditional desktops.

    From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

    Download a free and fully-functional version of DevExtreme now: Download DevExtreme

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