[Please note: Sueetie Themes as described in this post have been replaced by a more simple model. Two posts which explain those changes are this blog post titled "Announcing the Death of Sueetie Themes" and Sueetie wiki page titled "Theming Gummy Bear."]
A month ago I announced the Sueetie Web Package in Sueetie Forums planned for an early August release. We're now mid-August without a Sueetie Web Package release, but there's a darn good reason for that. Announcing Sueetie Themes! Sueetie Themes is an architecture now online at http://Sueetie.org that supports the creation of selectable themes across the entire Sueetie Community Application Set - Marketplace, BlogEngine.NET, YetAnotherForum.NET, Gallery Server Pro, ScrewTurn Wiki, and yes, Sueetie Groups. It was no small task, but we've crossed a pretty important threshold I think, creating a foundation for Web Designers to build community themes and for users to easily select and customize existing themes.
I affectionately refer to our new Theme Architecture as JoeThemes, named after Joe Shearn of Ambay Software who was the lead on the project. (Joe was also the lead on Sueetie Content Parts and Integrated Community Messaging with YetAnotherForum.NET.) Ambay described Sueetie Themes recently with screenshots of some of the themes that are coming. Very exciting! I'll be posting more on the technical details of JoeThemes to serve as a guide for creating Sueetie Themes, but for now I wanted to give everyone a quick overview of how it all works.
Below is the Sueetie Themes Administration page. The available themes are at left. Clicking "Use this theme" automatically switches the entire site to the new theme. That's so cool, I had to italicize it, particularly when you consider that Sueetie is comprised of several independent web applications with their own theming architecture. There is also a CSS Customization tab to support modification of existing CSS classes.
Below is a screenshot of the heart of Sueetie Theming, where the shared site themes are located off the web root directory. Sueetie.org's theme is now officially christened "Lollipop." The two themes you'll find in the site /themes directory (only two at the moment, but more on the way) are Lollipop and LollipopSideRight. The theme currently on display on http://sueetie.org is LollipopSideRight, where the sidebar is now located on the right side instead of the left as previously. With one click of the "Use this theme" button in the Administrative Themes page, the entire site flips back to Sidebar Left as it was originally. Sidebar left, sidebar right, Oooo, I'm as excited as a school girl knowing what that little button can do!
You'll also notice a /layouts directory. Here are the Sueetie Theme master pages. Each application (blog, media gallery, forums, etc.) has it's own ~/layouts directory as well, since each application has slightly different .master ContentPlaceHolder conventions. As for the names of the .master files (sugar.master, cream.master, and so on), we attempted to incorporate the .master layout description in the filename, but it proved unworkable and prone to overwriting by contributing web designers, so we decided to standardize on ingredients for candy instead. Master Page details in /layouts/layouts.xml.
As I said, each application has its own theming architecture which Sueetie Themes accommodates and extends. Below is ScrewTurn Wiki's theming, for instance, which is normally set in Wiki Administration and stored in the /wiki/public/config.cs file. Lollipop and LollipopSideRight Wiki themes are added to the Screwturn Wiki theme set as you see below. Thus if a Web Designer were to create a theme called, say, "BubbaBlues" they would copy the Wiki Default theme and use it as much or as little as they wished. Designer's prerogative.
There are four important considerations in this design. 1) Sueetie honors the architecture of each application, with the objective of changing the app's core logic as little as possible, which includes theming. 2) Sueetie is a loosely coupled application model with a tightly coupled membership model. Keywords: Loosely coupled applications. 3) We want to use the latest bits of each of the applications in Sueetie as soon as they become available, so there's going to be a lot of application upgrading in Sueetie--as there has already been in Sueetie's 10-month history. (Oh, by the way, Sueetie Groups Wiki is now running ScrewTurn Wiki 3.0 RC1.) So the less we re-architect the native applications the less pain we encounter during upgrades. And finally, 4) It's part of the Sueetie Philosophy to get as close to the apps as possible in design and code-think. These guys are good! The more we think like the developers of the applications the better Sueetie developers we become.
Here you see how Sueetie Themes extends YetAnotherForums.NET's native theming architecture, using a ~/layout/.master file specified by the global theme along with Sueetie-specific forum themes.
The Gallery Server Pro implementation is very similar to ScrewTurn Wiki and YetAnotherForum.NET. I'll describe it in more detail in the Sueetie Wiki documentation. BlogEngine.NET is slightly different than the other apps. Sueetie Themes sets the blog theme globally, but since BlogEngine.NET has the most deeply embedded theming logic and because we wanted to honor the tradition of blog theme independence in Sueetie, we went with a more local theming model for blogs. No ~/layouts/.master selection, but otherwise it adopts the Sueetie Themes architecture.
I hope I didn't diminish the cool factor of Sueetie Themes with the techno mumbo-jumbo. Please forgive me if I did, because Sueetie Themes is smokin' cool. Hopefully you'll be seeing the fruits of this architecture soon. Now it's time to get back to that Sueetie Web Package!