Community Server 2.1 is almost ready for release. Because of this, I have recently spent some time updating 2.0 site themes to work with 2.1 for some of the websites that we manage at Telligent. I thought it would be helpful to post the process that I used to help others that will soon be making the switch to 2.1 but want to keep their custom themes.
Between versions of Community Server, the skin files are modified to reflect changes to existing features and the additions of new features. To upgrade a custom site theme, these changes must be reviewed and incorporated. The following steps are the ones that I used to upgrade a few site themes from CS2.0 to CS2.1. If you use these steps, please let me know what issues you run into and I will update this post accordingly.
These steps assume that the default theme was customized and not completely redefined. If you made extensive changes to the CS2.0 site theme, you may want to perform the steps below, but instead of comparing your custom theme to the default CS2.1 theme, compare the default CS2.0 theme with the default CS2.1 theme to detect the differences only -- these changes should be incorporated into your custom theme. You may need to download the "web install" version of CS2.0 to get a clean version of the 2.0 default site theme.
- Make a copy of your CS2.0 database.
While implementing changes to the custom theme for CS2.1, you probably don't want to work on your live, production site. So, instead, let's work with a backup of your production database so we have real data to preview without affecting your production site. You can do this by backing up the database and then either restoring it on the same server using a different name or restoring it on a development server (recommended) using the same or a different database name.
If you're using a web host, you may need to contact your host's technical support to retrieve a backup of your database. You will also need a development version of the database server -- for example, MSDE or SQL Server 2005 Express (both are free).
- Download and install the "web install" version of CS2.1.
The "web install" version supports upgrading existing databases. Follow the steps in the included readme file to upgrade the copy of your CS2.0 database and setup a new web application for CS2.1 on your test/development server pointing to the upgraded database.
The pre-release version of CS2.1 can be found in the CS Downloads/Beta Releases folder within the downloads section of communityserver.org. Release versions will be available in the CS Downloads/Releases folder.
- Make a copy of the CS2.1 "default" theme.
Copy the default CS2.1 "default" theme (located in web/themes/default/) to a new theme such as "default-original".
- Copy your custom CS2.0 site theme over the top of the CS2.1 default theme.
Copy the contents of your custom site theme into the web/themes/default folder of your CS2.1 installation.
- Download and install WinMerge.
If you don't have it already, download and install WinMerge. This tool will help to identify changes between CS2.0 and CS2.1 that you may want to include in your updated site theme. Any file difference/merging tool will probably work, WinMerge happens to be the one I use (and its free).
- Open WinMerge and compare the theme folders.
Within WinMerge, select File->Open and specify the Left and Right folders to compare. Select the CS2.1 "default-original" theme for the "Left" folder and the overwritten "default" theme for the "Right" folder. Click OK.
- Review the Merge List.
WinMerge will produce a listing of file differences between the two themes. You'll need to review the items with the "Comparison Result" of "Files are different". To review an item,
- Open the File Comparison window by double-clicking the item in the comparison list.
- The File Comparison window shows the two files next to each other with the differences between the two highlighted. Changes can be merged into your custom theme by double-clicking the highlighted change on the left pane, right-clicking it, and selecting "Copy to Right". This should be done for changes meeting one of the following criteria:
- Within an ascx file, CS2.1 (the left pane) includes a new tag/control with runat="server"
- Within an ascx file, CS2.1 (the left pane) removes a tag/control with runat="server"
- Within a style sheet, a new style rule (within the left pane) is added
- Within a style sheet, a style rule (within the left pane) is significantly changed (in comparison to the right pane)
Note that because of the way CS uses skin files, these criteria are not 100% accurate -- some controls are included in the default theme that may not be necessary in your custom theme (along with their related styles). Similarly, some controls in your custom theme may not have been removed (and were probably not removed) in CS2.1. In general (especially if your custom theme was mostly similar to the CS2.0 default theme), these criteria can be used to identify the changes that should be reviewed.
If CS2.1 has implemented a change that you do not want, you may want to note the change, but not merge the change into your custom theme -- in many cases, the changes are not neccessary, but you will need to be sure to test any CS2.1 changes that you did not merge into your custom theme to ensure that the skins are still functional.
Also note that only the controls/tags with runat="server" need to be moved when accepting a change -- not the HTML surrounding the control (if it exists). To accept a change without copying the HTML surrounding the control, you can copy the control from the left and paste it into the right. To update the file comparison, you can save the changes (File->Save Right->Save or click the Save tool bar item) -- this will cause the WinMerge to update the file comparison to reflect your manual changes.
- Commit the modifications that you made within the File Comparison window by clicking File->Save Right->Save or the Save tool bar item. Then, close the File Comparison window.
Be sure to repeat this step for all files in the Directory Comparison Results window with a "Comparison result" of "Files are different".
- Browse the site to review merged changes.
Review the theme changes by navigating to your test site and ensuring that each page functions and looks appropriate. If you followed the steps above, all pages should function, but you may need to add custom mark-up/CSS to style the newly added/removed controls to match your updated custom theme.
- Deploy the updated theme.
After reviewing all of the changes, you are now able to deploy your updated site theme. To do this, you will need to deploy your test CS2.1 application to your production web site and also execute the upgrade SQL (that you used in step 2 above to upgrade your testing database) on your production database.
You may need to repeat these steps for the web application as well if you made changes to the ASPX files in addition to the theme files to support your custom theme.
This process is not particularly simple or easy and still does require a fair amount of review after completion. Upgrading themes after CS2.2 should be much easier!