Theming Gummy Bear

Table of Contents [Hide/Show] Gummy Bear Site Theming Layout    A Fat Free Summary    Theme Packages    Top Level Root Web Area    Administrative Theme Changer    Blog    Forums    Wiki    Media Gallery    Marketplace    For More information and discussion

Gummy Bear Site Theming Layout¶

As you know, Sueetie is not a single website application, but 6 separate applications that the share Sueetie Framework libraries. Sueetie brings a bit of order to the madness, and after you understand the overall design, theming 6 applications isn't as big of a deal as you may think.

A bit a history before proceeding, if you've read the post "Introducing Sueetie Themes," please skip ahead to "Introducing the Death of Sueetie Themes." The architecture to support site-wide theme packages was actually finished, but it got yanked because SIMPLE LOGIC is Job One with Sueetie, particularly since we're theming 6 apps. Hopefully you will agree that we have a workable theming model.

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.

A Fat Free Summary¶

I provided the following in a Sueetie Forums thread as a simplified summary of theming process. I'm adding it here in case it helps.

How about this fat free approach to creating a theme named, oh, ROCKET:

Take LOLLIPOP and copy /images/lollipop to /images/rocket, then /style/lollipop to /style/rocket. Then perform a similar process with each of the apps. A screenshot for each of the apps is shown on the Theming Gummy Bear wiki page.

/blog/themes/lollipop to /blog/themes/rocket /forum/themes/lollipop to /forum/themes/rocket /wiki/themes/lollipop to /wiki/themes/rocket /media/gs/styles/lollipop to /media/gs/styles/rocket

Now do a site search for "gummybears.jpg", filtering on *.css files and remove that CSS Background-image setting. You'll also want to search all Rocket .CSS files and replace "lollipop" with "rocket" so images and other elements are retrieved from your rocket theme folders.

Now go into Admin and change the site theme to Rocket. All apps are now using your new themes, confirmed by the absence of the gummy bear content area background image. You have to touch the web.configs to restart the apps for the new theme settings to go into effect, but you're ready to create a new theme at this point.

Theme Packages¶

Before moving into the theming particulars, a word on Sueetie Theme Packages. My hope is that a clearly defined Sueetie Theming design will give birth to beautiful Theme Packages. As I said a minute ago, .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 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.

1. Open the lollipop.ZIP and copy to an empty working folder.
2. 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!
3. 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."
4. At this point you can copy the theme on top of your development web site.
5. 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 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.
6. Start theming! At this point you can start changing CSS classes, backgrounds and colors, and they should begin to display for you.
7. If you wanted to package the theme you would repopulate the renamed Lollipop folders accordingly. Zip and go!
   

Top Level Root Web Area¶

The top level of Gummy Bear contains /masters, /images and /style which are 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.)

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 loading logic which is found in all applications across Sueetie is

• The application's own .CSS file(s)
• shared.css
• Sueetie application .CSS file (forum.css, blog.css, etc...)
  

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. We'll see that as we proceed.



Top

Administrative Theme Changer¶

The process of applying a new Sueetie Theme pack will consist of extracting the contents of the Theme .ZIP file and copying over the existing site directories. This will add the new theme contents and only overwrite the .master pages if modified and included in the Theme .ZIP. The second step of applying a new Sueetie Theme would be to enter the new theme's name in the Administration Theme Changer. For our example, the theme names are either Lollipop or Licorice.

Theme Pack sidenote: Please use one-word names for your theme. Let's not deal with spaces please.



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.

Blog¶

One thing to remember about Sueetie in general and Sueetie Theming in particular, each of the applications exists as independent of the Sueetie framework as possible. Member-centric, loosely application-coupled. This means that the theming architecture of the apps is supported in full and only supplemented by shared Sueetie theming logic.

Please note the standardized .CSS loading order used in Sueetie: The application own .CSS file(s), SHARED.CSS and the Sueetie .CSS for the application(here, BLOG.CSS). BlogEngine.NET Master files are unique to the theme, /themes/[theme]/site.master. I added a /themes/[theme]/contact.master because I like having more control over the contact page.



Top

Forums¶

YetAnotherForum.NET's theming architecture is similar to BlogEngine.NET's, as a selection of themes are listed in the /themes directory, for our purposes, /themes/lollipop. All of YAF.NET uses /forum/default.aspx and loads the appropriate controls. (Gallery Server Pro is designed similarly.)



/forum/forum.master is a Sueetie addition, as YetAnotherForum.NET 1.9.3 out of the box does not use a master file. CSS files are loaded in the same order as other applications: /forum/themes/[theme]/theme.css, SHARED.CSS and FORUM.CSS, the latter located in /style/[theme]/shared.css and /style/[theme]/forum.css.

Top

Wiki¶

Screwturn Wiki supports /themes selection like YetAnotherForum.NET. It uses three .master files in the root (MasterPage.master for your wiki pages, MasterPageSA.master for editor and certain other utility pages, and admin.master for the Wiki Administration area.



Top

Media Gallery¶

Gallery Server Pro uses a single default.aspx like YetAnotherForum.NET. The stylesheets loaded, in order are 1) /media/gs/styles/[theme]/gallery.css, 2) /media/gs/styles/[theme]/ca_styles.css, 3) /style/[theme]/shared.css, and 4) /style/[theme]/media.css. Media.master has been added, like Forum.master in forums to more easily transfer an new layout from the top level web site /masters/sueetie.master (or some other .master you create.)



Top

Marketplace¶

The Marketplace is themed similar to the root web area. Because it is based on the ASPNET Quickstart Classifieds application, and thus no longer actively updated like the other great apps in Sueetie, it is more tightly integrated with the root web area contents--a process that will most likely continue going forward. Marketplace uses two themes, like the root web area: /style/[theme]/shared.css and /style/[theme]/marketplace.css. It uses a Sueetie-provided Marketplace.master layout file.

Top

For More information and discussion¶

I don't know how much theming and accompanying discussion will occur, so for now please use the Gummy Bear Everyday Use forum. We will create discussion forums, whatever you guys need.

Top