Ticket T292465
Visible to All Users

How to change the color schema or customize the current theme in XAF Web UI

created 9 years ago (modified 9 years ago)

Hi,

is it possible to change the color theme of the new style. If so can you direct me to some tutorials, documentation?

Regards.

UPDATED:
No, not looking for the theme chooser kind of thing. More like customizing the theme to have more colour.
is that possible to customize the theme using theme builder? Or some other way.

Answers approved by DevExpress Support

created 8 years ago

Hello Amin,

>>is it possible to change the color theme of the new style…not looking for the theme chooser kind of thing. More like customizing the theme to have more colour.
With v16.2, this process became much easier with the new options for changing the base color and font in code or configuration files of your app + better integration with the ASPxThemeBuilder & ASPxThemeDeployer tools. Please refer to the 50 shades of grey or thoughts on making the XAF Web UI closer to its clients blog post for more details.
If you are unsatisfied with the XAF Web UI or are looking forward to Bootstrap instead, I would greatly appreciate your taking the time to answer a couple of questions in the post I referred to. Thanks in advance.

    created 9 years ago (modified 8 years ago)

    Classic Web UI themes
    You can use the approaches from the Task-Based Help > How to: Use Custom Themes in ASP.NET Applications (Classic Web UI)  article.

    New Web UI (XafTheme)
    Starting with v16.2 you can use the approaches described in the following articles:
        Task-Based Help > How to: Use Custom Themes in ASP.NET Applications (New Web UI)
        Concepts > UI Construction > ASP.NET Web Application Appearance
        How could I enable Skin Selection option in XAF web project

    Common ASP.NET customization approaches

    1. Declare required CSS rules in the Default.aspx file directly. For instance, in the simplest case, you can locate a required element on the web page using Developer Tools (F12) of your browser and then customize its style as required (see the attached video for an example). You can integrate your style sheets into the Default.aspx page using the standard Web approaches described in MSDN, StackOverFlow, and other public community resources. Attached you will find a modified version of our XCRM demo, which has a green background just for the main page. Take special note of the modified Default.aspx and StyleSheet1.css files that are responsible for this customization. You can apply a similar approach for other elements.
    2. Create custom page templates as described here: How to: Customize an ASP.NET Template.

    Should you have specific difficulties styling your XAF web site, please provide us with screenshots showing the UI elements you want to customize. I am looking forward to hearing from you.

      Show previous comments (3)
      DevExpress Support Team 9 years ago

        To customize colors of elements used in an XAF web site, you can use the approaches from the How to: Use Custom Themes in ASP.NET Applications article for older themes.
        For the new XAF theme, I am afraid we do not offer similar documentation at the moment. Our team understands your desire to personalize your apps and will take your request into account for the future.
        Right away, for the new XAF web theme, you can use standard ASP.NET approaches.

        For instance, in the simplest case, you can locate a required element on the web page using Developer Tools (F12) of your browser and then customize its style as required. You can integrate your style sheets into the Default.aspx page using the standard Web approaches described in MSDN, StackOverFlow, and other public community resources.

        CR CR
        Chris Royle (LOBS) 9 years ago

          @Konstantin "We will provide this capability in version 15.2. "
          Was this ever done for 15.2 ? Is this perhaps  IModelViewLayoutElementWeb.CustomCSSClassName ?

          DevExpress Support Team 9 years ago

            Hello Chris,

            I'm afraid that in the current minor release of version 15.2 no improvements were made in this area so far.
            At present please use the standard ASP.NET approach to accomplish this task as described in our previous answer.

            Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

            Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.