I just received a request via email to provide the quick steps to getting started with a new Chameleon-based theme in CS2007--so, here it is.

To setup a new custom site theme,

  1. Copy an existing Chameleon theme
    I strongly suggest not overwriting the default theme.  Instead, make a copy of the default theme (web/themes/default) in the themes folder with a new name (for example, web/themes/newtheme1) and implement your changes in this theme.  Then, no matter what you do in your custom theme, you can always look back at the unchanged default theme.

    When copying either of the out-of-the-box site themes ("Default" or "Lean and Green"), you'll need to make a few small changes:

    1. Update the Href properties on the <CSControl:Style /> controls in Common/master.master and Blogs/blogs.master.  Replace "~/themes/[theme name]/style/" with "../style/".
    2. Update the style/DynamicStyle.aspx page.  Replace the line starting "protected ThemeConfigurationData ThemeData = ..." with "protected ThemeConfigurationData ThemeData = CSContext.Current.SiteThemeData".
    3. Remove the ThemeName attribute and its value from the <CSControl:SiteThemeConfigurationDataImage /> control in the theme's master.master file.
    These two changes will ensure that you load the style information for your custom theme instead of from the out-of-the-box themes.  The out-of-the-box themes are hard-coded to ensure that the site-theme-styles blog themes will always look correct (for example, selecting the "Lean and Green" blog theme when the site theme is "Default" will still allow the blog to look like the "Lean and Green" site theme is selected).

    When your new theme is ready, you can make it the default for your site by going to "Theme Options" within "Settings" under "Administration" in the control panel.
  2. Modify files as necessary
    The master (.master),  page (.aspx), style, and image files are all located within the sub-folders of the theme's root folder.  Look around, make tweaks, and see how things change.  I suggest reading through the Introduction to Chameleon to get a general understanding of the controls used on each page. 

    There is no "magic" -- all of the functionality of the page is implemented using standard Chameleon controls.  You have complete control over each page.
  3. Update theme.config
    Every theme in CS2007 is required to have a theme.config file.  The contents of the theme.config file require a new blog series but feel free to poke around in the existing theme.config file to see how the theme name, description, preview image, and dynamic theming options are defined.

    At the very least, you should update the title, previewImageUrl, and previewText on the <Theme> node within theme.config.  This information is used when displaying the theme in drop-down-lists within the control panel.  Having two themes name "Default" can be confusing Smile.

    Additionally, if you would like to remove all dynamic theme configuration support, you can:

    1. Delete all of the contents of the <DynamicConfiguration> node in your custom theme's theme.config file.
    2. Delete the style/DynamicStyle.aspx file from your custom theme.
    3. Remove the style control referencing the DynamicStyle.aspx file from all of the master pages in your custom theme.

To implement a new blog theme, you can follow the same steps above (though I would suggest starting with the Traveler theme instead of default).  Note that blog themes are located in the web/themes/blogs/ folder.

While you're getting your theme started, here are a few tips:

  • Read my Introduction to Chameleon blog series and download the CS2007 Chameleon Control Documentation help file.
  • If you're looking for the file within a theme that handles a specific page, you can open the ASPX page in the root web folder (such as web/default.aspx) and you'll find a description of the file within the current theme that implements the UI for the page.
  • I suggest previewing the site using the preview feature of the "Theme Configuration" page within "Settings" under "Administration" in the control panel.  Then, only the current browser session will be using the new theme and you can revert back to the default site theme by closing and reopening your browser (in case you temporarily remove the theme selection option from the profile page, for example).  Remember, too, that the control panel is no longer themed, so even if you remove all content from a theme, you can still access the control panel and make site changes.
  • Feel free to ask questions.  You can ask them on this site using my contact form, in comments on this site, or on communityserver.org.