If you have been actively using our ASP.NET components in your web applications for a long time, you probably cusotmized our themes for your needs. If you upgrade your custom theme to a new major version of our products, you can encounter difficulties with new version control appearance. This article will help you avoid these and thus save your time and booster productivity.
We introduce new features in all our major releases. Every new feature requires upgrading HTML markup of an ASP.NET control. As a result, CSS classes and styles are also modified according to changes made in the markup. This is not a problem if your application uses only default DevExpress themes. However, a custom theme created based on one of DevExpress themes should be upgraded manually. I would like to show you an approach that might help you make the process easier.
The easiest way to solve such issues is to deploy a base theme and customize it again. This is not a problem if you have implemented minor changes. However, if your customization is complex, you will need to merge a lot of default and custom CSS classes and styles.
Usually, text merge tools are very useful in such cases. ASPxThemeBuilder allows you to utilize a custom merge tool for merging.1. Make a backup copy of the custom theme.
2. Upgrade your custom theme to a required version of the DevExpress product. You can use Project Converter for this purpose.
3. Open a custom theme.
4. Specify a base theme:
5. Click a tab with style.css or sprite.css file content. Please note that there can be several style.css and sprite.css files belonging to different suits (GridView, Editors, Web, etc.).
6. Click the "Merge with original CSS" button at the bottom:
7. (Optional) If a merge tool is not set, ASPxThemeBuilder displays a dialog to set the tool.
8. Use the tool to merge CSS classes and styles in custom and default themes.
I have attached a video to illustrate this in action. I am using the WinMerge tool, while, you can use any tool you may find convenient.
Or even better...1. Make a backup copy of the original (old-version) custom theme.
2. Open the old theme builder.
3. Use the tool to compare the custom theme and its base ones as described above to see custom differences.
4. Open a new-version ASPxThemeBuilder and open the same brand new base theme in the tool.
5. Implement the same changes in the new-version theme that you see after performing step #3.
6. Save the custom theme and generate a theme assembly if required.
Please note that this way is useful to see what changes were implemented in the old theme. Since control markup of a new version can differ from the one of an old version, custom CSS rules may not match the new version markup. So, this way is useful to see what you need to do, but it is possible that you will not manage to apply the custom CSS rules to the new control as is. In this case, you will need to update the custom rules too.
Thom Unger found some issues*** using the previously described approach (see Where dxeValidStEditorTable and dxeRoot CSS rule are located ). We plan to improve ASPxThemeBuilder to avoid them in the future. However, currently we have only common ideas where we need to move to. If you encounter similar issues, try Thom's solution:1. Make a backup copy of the custom theme directory.
For the moment, I've figured out yet another workaround, modifying the steps from my suggested workaround in the comments above. See lines 1a and 6 for the pertinent changes:
1a - NEW) Create a new base theme using the new ThemeBuilder (eg. Moderno) and save it, using a different name than you used before by appending the version number (eg. Moderno141), then exit the ThemeBuilder.
2. Down convert your custom theme back to 13.2 (or whatever version the original theme came from).
3. Open up the old theme builder at C:\Program Files (x86)\DevExpress 13.2\Components\Tools\ASP.NET\ASPxThemeBuilder.exe
4. Then follow the process outlined in the article link above (but skip step #1: DON'T upgrade the theme to 14.1, just use the directions as they apply to using the merge tool to identify the differences between the original 13.2 theme and your 13.2 customized theme).
5. This will allow you to identify JUST the changes that you've made to the base theme, not including the hundreds of changes that Dev Express made between 13.2 and 14.1.
6 - MODIFIED) Use your favorite text editor, NOT the new ThemeBuilder, to open up the various css files for the new Theme (eg. Moderno141) that have changes.
6. Step through them adding back in the manual changes you've identified through steps 2 to 5.