Customizing Theme Source Files
- 2 minutes to read
You might sometimes want to make minor changes to one or several of the shipped DevExpress AutoFormats and then use the modified theme(s) for theming a web page or an entire website. For instance, you might require the modification of some predefined color settings or may need changes to the images.
There are two approaches of applying a modified theme. You can use either of them, but note that we consider the first one to be more practical and straightforward.
Create and apply a custom theme (DevExpress recommended approach)
With the ASPxThemeBuilder tool, create a custom theme using any default theme (such as Aqua, DevEx, BlackGlass, etc.) as a base. Modify different visual element style settings as you desire. Save custom theme source files to any desired location on your computer. Generate a custom theme assembly - it will contain your custom theme’s required files (such as skins, CSS files, images, image sprites) as resources. Use the ASPxThemeDeployer tool to import your custom theme assembly and copy its theme files to your project. Apply your theme to a single web page or an entire site.
Modify theme files directly within a project (obsolete approach)
Use the ASPxThemeDeployer tool to copy all resource files of the required DevExpress AutoFormat to your project’s App_Themes folder. Rename the created theme folder - give it a unique custom name instead of the default DevExpress AutoFormat name. Modify all theme files that contain occurrences of the default DevExpress theme name - change this to your custom theme name given to the theme folder (Visual Studio’s Find and Replace dialog is useful in this case; it can be invoked via the ‘Edit - Find and Replace - Replace in Files’ menu item). Modify skin, CSS and image files within the theme folder as your application needs dictate. Apply the custom theme to a single web page or an entire site.