The Theming Gummy Bear document is complete, for now. Grooving in Wiki-think, no document is ever "complete," but I think there's enough information there to create Gummy Bear Theme Packs. I won't repost the full document, but will touch on the highlights to describe Sueetie Theme logic and how I recommend creating a site theme.
From Theming Gummy Bear:
The most basic description of Sueetie Site Theming logic is that all applications use shared .master pages unique to the application. Each theme's image and .CSS files are stored separately for all apps, but in locations unique to the app. For review, .master pages: shared, theme image and CSS files: separate folders.
At the Gummy Bear site root are the /masters, /images and /style folders, pertinent to Sueetie theming. sueetie.master is used as the main Master Page, alternate.master for contents in the /members area (login page, my account, register, and so on.)
Here you can see the shared .masters in the web root area and the separated theme images and stylesheets for the example Lollipop and Licorice themes. The folder names for the theme contents must be identical for that theme across the site.
The Theme Changer in Sueetie Administration sets a SiteSettings property and updates the theme setting for the apps across the site according to their individual logic. Each determine the current theme differently, but we don't have to go into that now.
The Sueetie SiteSettings Theme property is used to link to the theme's stylesheets for all apps. The app and its pages will specify its .master pages, which is not changed in Sueetie Themes.
In the screenshot below you'll see how the .master page loads its area- and page-specific .CSS files. For the top web area those .CSS files are shared.css and sueetie.css, or shared.css and alternate.css. shared.css is, as its name implies, shared across all Sueetie applications. All applications load shared.css.
The CSS loading order found in all applications across Sueetie is
- The application's own .CSS file(s)
- shared.css
- Sueetie application .CSS file (sueetie.css for non-app pages, alternate.css for member area, message pages, and so on, forum.css, blog.css, media.css, etc...)
A word on Sueetie Theme Packages. My hope is that a clearly defined Sueetie Theming process will give birth to beautiful Theme Packages. As I said earlier, .master pages are shared, so with shared .master pages it is likely that the prior theme's .master pages will be overwritten. For the sake of a simple design across 6 uniquely architected applications we're going to live with that fact. Change the .masters as you see fit. We will either add backup capabilities or simply educate site administrators, whatever works. I do not advise creating .master files with new names, as the applications have their own conventions.
Here is the Lollipop Theme Pack as a ZIP file to use as a reference and a theme pack template to help you get starting creating a Sueetie Site Theme. Here is a suggested approach to creating a new Sueetie Theme pack.
- Open the lollipop.ZIP and extract the contents to an empty working folder.
- Rename all lollipop folder names to the name of your new theme, let's say it's called RootBeer. Oh, one thing. Important! If you plan on sharing or selling the theme, could you come up with "sueet" name? Something having to do with candy, sugar, that sort of thing. Thanks!
- Do a global Search-Replace in NotePad++ (my favorite, any text editor that can do search/replace over multiple files), changing any appearance of "Lollipop" to "Rootbeer."
- At this point you can copy the theme on top of your development web site.
- Go into the Control Panel and set the new site theme to "rootbeer." If we both did our jobs correctly, there should be no change in your site appearance whatsoever. By the way, theme changes may not display immediately due to caching, so if you're not sure if a theme was updated, touch the app's web.config.
- Start theming! At this point you can start changing CSS classes, backgrounds and colors, and they should begin to display for you.
- If you wanted to package the theme you would repopulate the renamed Lollipop folders accordingly. Zip and go!
The Theming Gummy Bear document continues with details and screenshots on theming the individual applications. If you like theming, you'll love Theming Gummy Bear! Or not.