The first thing I’d want to do if I just downloaded Gummy Bear, after exploring its great apps that is, would be to theme the heck out of it. The look of Sueetie.com is getting a bit long in the tooth and needs an overhaul. Gummy Bear sports Sueetie.com’s Lollipop theme, so yeah, some Gummy Bear theming info is a good thing. Here’s the new Theming Gummy Bear page in the Sueetie Wiki.
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. They also share CSS and theming, but only to a limited degree. However, once you see the simple logic involved, theming 6 applications isn't as big of a deal as you may think.
A bit a history before proceeding, if you've seen "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 I pulled it because it added complications that I didn't think brought enough value, plus it made theming more difficult. Keyword: simple, particularly since we're theming 6 apps, like I said.
Top Level Root Web Area¶
The top level of Gummy Bear contains the root web site contents, which includes the /admin area. Theming particulars are
/masters and
/style folders.
sueetie.master is used as the main Master Page,
alternate.master for contents in the /members area (login, 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. 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...)
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. You'll see that in the screenshot below. Lollipop is the name of the sitewide theme used with Gummy Bear. When you create a new site theme you will copy Lollipop and customize accordingly.
Also notice the standardized .CSS loads as we saw above: The application .CSS's, shared.css and the Sueetie application .css (blog.css). As for the Master file, all apps will use their own .master files. You would most likely theme the top level masters and apply that style to the various .masters on the site applications. For BlogEngine.NET, the /themes/theme/site.master is used. I added a contact.master because I like having more control over the contact page.
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 using the same logic and order as other applications, though in YAF.NET forum pages in Sueetie derive from a base class file in Sueetie.Forums. (This is to support the site-wide integrated inbox feature.) Here is what that looks like.
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.
CSS files are loaded in the master page .CS codebehind and because ScrewTurn Wiki is a Web Application, those files are not included in Gummy Bear. The order of .CSS files loaded are 1) /themes/theme/print_styles.css, 2) /themes/theme/screen_styles.css,' 3) /style/shared.css, and 4) /style/wiki.css. Here is that Master codebehind source.
Media Gallery¶
Gallery Server Pro uses a single default.aspx like YetAnotherForum.NET. The stylesheets loaded, in order are 1)
/media/gs/styles/gallery.css, 2)
/media/gs/styles/ca_styles.css, 3)
/style/shared.css, and 4)
/style/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.)
CSS files are loaded in the source class file /media/gs/codefiles/gallerypage.cs. Because Gallery Server Pro is a Web Application Project like ScrewTurn Wiki, the file is not included in Gummy Bear. Here's that code.
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/shared.css and
/style/marketplace.css. It uses a Sueetie-provided Marketplace.master layout file.
Stylesheets are loaded in Marketplace.master.
