[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[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]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Expand]Concepts
 [Expand]Design-Time Features
 [Expand]Deployment
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]Actions
  [Expand]Navigation
  [Expand]Views
  [Expand]List Editors
  [Expand]Property Editors
  [Expand]Templates
  [Expand]Filtering
  [Expand]Reporting
  [Expand]Dashboards
  [Expand]Scheduler and Notifications
  [Expand]Maps Module
  [Expand]Security
  [Expand]Workflow
  [Expand]Localization
  [Expand]Testing
  [Collapse]Miscellaneous UI Customizations
    How to: Add a Button to a Detail View Using a Custom View Item
    How to: Add an XAF Mobile Custom Module
    How to: Adjust the Size and Style of Pop-up Dialogs (ASP.NET)
    How to: Adjust the Windows' Size and Style
    How to: Change an Application Logo and Info
    How to: Create a Custom Control Detail Item
    How to: Customize a Window Caption
    How to: Customize ASP.NET Layout Elements Using Custom CSS Classes
    How to: Customize Export Options of the Printing System
    How to: Customize the Conditional Appearance Module Behavior
    How to: Customize Window Status Messages (WinForms)
    How to: Enable High DPI Support in a WinForms Application
    How to: Implement a Custom Messaging Class
    How to: Implement Client-Side Logic in Mobile Applications
    How to: Include an Action to a Detail View Layout
    How to: Raise XAF Callbacks from Client-Side Events and Process these Callbacks on Server
    How to: Set Images and Captions for Enumeration Values
    How to: Show a Custom Window with an Embedded XAF View
    How to: Show a Custom Windows Form
    How to: Use a Custom Plugin in a Mobile Application
    How to: Use a DevExtreme Chart in a Mobile Application
    How to: Use Custom Themes in ASP.NET Applications
  Frequently Asked Questions (FAQ)
 [Expand]API Reference
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Customize ASP.NET Layout Elements Using Custom CSS Classes

This topic describes the most popular uses of CSS classes in an XAF ASP.NET application. They can be helpful when performing customization of several layout elements for a particular Detail View. The examples from this topic show the customization of the Contact Detail View layout from the MainDemo demo project.

To add a new CSS class for the target element, specify the IModelViewLayoutElementWeb.CustomCSSClassName property of layout group, or item node in the Model Editor to this class name. Run the application, find the newly created class name on the proper Detail View page using page Inspector tools and choose the classes of elements which you want to customize. Edit and add the necessary CSS rules to this new class in the Default.aspx file.

Tip

If you want to use rules to change a layout element's color or visibility, you should use the Conditional Appearance Module.

Expanded Group Header's Customization

This section describes how a group header can be customized. For instance, create the ContactPersonInfoGroupStyle CSS class and rules with the Person's group header text color and background color customization. In this example, the items with the GroupHeader and Label classes are customized.

  • Change a header's font color

  • Change a header's background color

Save changes and refresh the Contact's Detail View page to see the result.

Expanded Property Editors Customization

It is possible to customize Property Editors for both the View and Edit Detail View mode (see the DetailView.ViewEditMode topic). CSS rules for these modes may be different, for instance, the ContactFirstNameStyle CSS class and its rules are created to customize the Property Editor's caption and text for the different modes. In the Model Editor, set the CustomCSSClassName property of the FirstName layout item to the ContactFirstNameStyle CSS class name. The code snippets below demonstrate these customization rules.

  • Change caption's text color and font

  • Change editor's text color

The result of this customization shows in the image below.

Expanded Tabbed Group Customization

You can customize the background and caption color of active and inactive tabs in the tabbed group. For example, in the Model Editor, set the CustomCSSClassName of the Tabs tabbed group to ContactTabsStyle and add new CSS rules to this class in the Default.aspx file.

The tabs style changes according to the customization code above.

Expanded Action Customization

You can customize the Action appearance using the CustomCssClassName property in the Model Editor or set the required CSS class name by Controller. Actions are not usually associated with a particular View, so, when you set a CSS class name to the CustomCssClassName property of an Action, an adjustment is applied to the Action in all Views where it appears.

  • Using the CustomCssClassName property

    For example, change the background color of the New action. In the Model Editor, find the Application | ActionDesign | Actions | New Action node, set its CustomCSSClassName property to the NewActionStyle CSS class name and add the following CSS rules in the Default.aspx file:

    The image below demonstrates the customized New Action.

  • Using a ViewController

    To apply a CSS rule to an Action on the particular View, create a new Controller for DetailView which is a descendant of the ViewController<ViewType>.

    Note that this approach forces menu rendering that may reduce the layout drawing. Thus, use this method if you want to customize several Views. Use the Model Editor's global settings and manage them using the Controller if you want to customize an Action in most Views.

    For example, the following Controller customizes the text color and caption using the CSS rules, demonstrated in the previous paragraph, for the New Action displayed only in the Contact Detail View. This Controller uses the ActionBase.CustomizeControl event.

    The following image demonstrates how this Controller manages an Action's customization:

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