How to Update a Custom Theme to a Newer Version

  • 3 minutes to read

A major update of DevExpress ASP.NET controls usually includes changes to HTML markup. You should update the references to DevExpress assemblies and CSS styles (optionally) to use your custom theme with a newer version of DevExpress ASP.NET controls.

We recommend that you make a backup of your custom theme before you update.

Update References

You can use the Project Converter or Theme Builder to update references to DevExpress assemblies in a custom theme. Click Yes to update references to DevExpress assemblies in the theme’s skin files.

Update References Message

Use the “Save” and “Create Assembly …” menu items to save the theme and recreate the theme assembly.

File Menu

Important

The Project Converter only updates the DevExpress themes’ .skin files. However, this tool does not apply changes in the new version of CSS styles to custom themes. The next section explains how to update CSS styles in your theme.

Update CSS Styles

You can use any of the following ways to update CSS classes and styles in your custom theme:

Copy Your Theme Settings to New Theme

Use this approach if an update includes numerous changes to DevExpress themes or if your custom theme has minor changes.

Follow the steps below to create a new theme that merges changes in your old custom theme with the new version of the base theme.

  1. Use Theme Builder to create a new custom theme with the same base theme as in your current custom theme.

    Theme Properties - Base Theme Dialog

  2. Launch another instance of Theme Builder and open your old custom theme. Do not update the theme.

  3. For the old custom theme, click the “Merge with original CSS” button to open a merge tool to review style changes between the custom and default themes. The Theme Builder displays a dialog to set the merge tool, if this tool is not set.

    Merge with Original Theme Command

    CSS Tab

    This tool displays the changes between your old custom and the base themes.

  4. Move these changes to the new custom theme. Use the “Save” and “Create Assembly …” menu items to save the theme and recreate the theme assembly.

Copy Changes to Your Custom Theme

We recommend this solution if your custom theme has numerous modifications in comparison to an original theme, or if you do not want to create a new theme.

Follow the steps below to copy changes from a new version of the base theme to your custom theme:

  1. Open the custom theme in the Theme Builder.

  2. Open the Theme Properties dialog and specify a base theme.

    Theme Properties Command

    Theme Properties - Base Theme Dialog

  3. Click the “Merge with original CSS” button to open a merge tool.

    Merge with Original Theme Command

    CSS Tab

  4. Merge all the changes between the custom and the base themes. Use the “Save” and “Create Assembly …” menu items to save the theme and recreate the theme assembly.