Creating a New Theme

• Dec 16, 2021
• 6 minutes to read

This tutorial will help you learn how to create a new theme based on a DevExpress theme, customize this new theme and save it for further use in your ASP.NET applications.

The tutorial contains the following steps.

1. Create Theme
2. Modify Theme
3. Save Theme
4. Open Theme

In this lesson, you will create a custom theme based on the DevEx theme. You will customize the presentation of the ASPxNavBar control by making the following adjustments.

• You will customize the appearance of group headers by changing the font style and modifying the color of expand/collapse glyphs.
• You will change the spacing between groups and increase side paddings.
• You will also alter the background color of a hovering item.

Create Theme

1. Run ASPxThemeBuilder (see the Launching the Theme Builder topic to learn more).

2. In the Name box, you can enter the name of a newly created theme. In this lesson, type MyDevExTheme.

3. In the Based on combo box, select a DevExpress theme to be the base for the new theme. In this lesson, leave it set to the DevEx theme.

4. In the Products check box list, select the DevExpress products to which the created theme should be applied. Click to clear the All check box and select just the Navigation and Layout Controls check box.

5. Click OK to close the dialog.

The DevEx theme will be cloned for the selected products. The cloned copy will be placed into a temporary directory. Later on, you can save the theme files into a custom location by using the Save or Save As… menu item and specifying the path you desire.

Modify Theme

1. In the leftmost Control Navigator Pane of the opened application window, select the control whose appearance should be modified. Click ASPxNavBar. In the Control Preview Pane, you can see a preview for the control you are customizing.

2. To change the font of all group headers to bold, do the following.

3. Change the left and right paddings of a group header using the text editor of the CSS Rules Tab.

4. To change the expand/collapse button images, do the following.

5. Some control properties cannot be specified in a CSS, so you should set them in a skin.

6. To change a navigation bar item hover color, do the following.

You can see the result in the image below.

Save Theme

1. To save your theme, click the Save button ( ) in the toolbar or on the File menu, click Save or press the CTRL + S keyboard shortcut.
2. In the opened Save Theme dialog box, select or type the path to a folder where you want to save your theme and click OK.

Open Theme

You can open a previously saved theme to modify it.

To open a custom theme, do one of the following.

• Run ASPxThemeBuilder and click the Open Theme in the displayed start-up dialog box.
• On the File menu, click Open…
• Press CTRL + O keyboard shortcut.

As a result, the Open Theme dialog will be displayed.

• In the Location box, select or type the folder where the theme is placed.
• The Theme combo box lists themes contained within the selected location. Select a theme you desire to open.
• Click OK to close the dialog.

Note

We recommend that you use ASPxThemeBuilder to open custom themes, but not shipped DevExpress themes. If you wish to slightly modify one of the predefined DevExpress themes, do not open it directly. Instead, create a new custom theme based on the desired DevExpress one, and then make required changes within this custom theme.

Concepts

To learn how to create a theme assembly, follow the Generating a Custom Theme Assembly topic.

To learn how to apply the created theme assembly, follow the Using a Custom Theme Assembly topic.