Community Server 2007 Themes Part 1

I am currently learning about the new theme system (Chameleon) in Community Server 2007. There are a number of good resources on this around the web. I hope that this will be one more. I am going to start with the basic theme capabilities and the layout of the site, and then move to the more complex portions of Chameleon as I encounter them.

Theme Creation

Themes have changed quite a bit in CS 2007. The first thing that you run into with the themes is the new interface in the Control Panel to change the theme. To have a style to work from, I picked my corporate site (ATGi). I was able to change the CS site from the default theme to something decently close to our corporate site with only a few minutes work. The steps I followed were outlined on Ben Tiedts Blog. All that I had to do was enter the color codes I pulled from the source site in the right place, save, and preview my changes. As the last step, Ben tells us we need to update theme.config but doesnt tell us why. I am going to guess one reason is the default values are used for the "reset to defaults" function in the theme configuration section of the control panel.

It looks like the CS developers took the path of making the easy things easy and the difficult things possible with this update to the theme system. I dont know if they will come through in the screenshot, but the bullets in the right content area are still the default themes dark green.
In order to change them I needed to:

1. Find the CSS class for the bullets,
   
2. Find that class in Common.css,
   
3. And then add the right content to the CSS Overrides configuration area of the theme.
   

Heres what I added to the theme to change the bullets:

UL.CommonSidebarList LI{color: #c54545;}

Since the CS developers couldnt predict what users want to change, they provided a method to change pretty much any part of the site without violating the idea of managing the theme through the Control Panel. Just by the addition of that one text area, they have made it so I should never touch the base CSS files again.

Theme Application

So far we have a good start, but there are some things going on behind the scene to get the changes made to the theme applied to the site. What follows is a summary of some of that information. I am not sure any of this information is necessary when creating a theme but it is useful to know how changes in one area propagate through the system.
Theme changes made in the Control Panel interface are saved to the Community Server database in the cs_ThemeConfigurationData table. It looks to be stored as a list of property names and a list of property values. I assume there is deserialization code and/or a data provider for this information. (Side note: There is also a cs_ThemeConfigurationData_TEMP table that I can only assume is used for the "Live Preview" function). To see where this data is used we need to look for is the stylesheets that are applied to the site. If we look in the main master page for the theme (master.Master), we see the following:

<CSControl:Style runat="server" visible = "true" />

<CSControl:Style runat="server" visible = "true" href="../style/Common.css" mce_href="../style/Common.css" />

<CSControl:Style runat="server" href="../style/common_print.css" mce_href="../style/common_print.css" media="print" />

<CSControl:Style runat="server" href="../style/DynamicStyle.aspx" mce_href="../style/DynamicStyle.aspx" EnsureNotCachedOnPreview="true" />

The first three lines look pretty standard to any web developer they are the inclusion of some styling information for the screen and for print. The last one is the interesting one. An aspx page is specified as the file containing the styling information. Looking at this file, we see the clever thing done to apply the information saved in the theme. Each CSS class is defined with some server side code. When it executes, it will pull information from the theme data (with an optional default). Heres the body/html class:

body, html

{

background-color: <%= ColorTranslator.ToHtml(ThemeData.GetColorValue("siteBackgroundColor", ColorTranslator.FromHtml("#606060"))) %>;

background-image: <%= UrlOrNone(ThemeData.GetUrlValue("siteBackgroundImage", null))%>;

}

The background color and image are loaded with the ThemeData.Get*Value() methods. Without access to the code I cant say for sure, but my guess is the provider for the theme data first tries the database, and failing that uses any defaults specified. I also cant say where or if the defaults provided in theme.config are used in this process. The ThemeData is an instance of the Telligent ConfigurationDataBase class, which has Get/Set methods for some of the basic types (int, bool, string, object), some more complex types (DateTime, Guid), as well as some interesting web specific ones (Url, Color).

Next Time

I am going to go through the master pages and see what is going on with them. I hope to create a set of diagrams like in my last post on Community Server, but one for each section of the application (home, blogs, forums, etc).