Site layout and information to assist you theme your Sueetie Community.
Sueetie Site Theming Layout
As you know, Sueetie is not a single website application, but 5 separate applications that share the Sueetie Framework libraries. Sueetie brings order to the madness, so after you understand the overall design, theming 5 applications isn't as big of a deal as you may think.
The most basic description of Sueetie Site Theming logic is that all applications have their own theming model, and upon loading the local logic the applications load global .CSS files from /style/THEME/*.css. Theme-based .master pages are supported for total theme independence. Master pages are stored separately for the app according to its own logic, though most masters are stored in /APP/Masters/THEME/*.master. For more information on using Sueetie Master files, see
Master Page Flexibility in Sueetie Themes.We'll read about Sueetie Theme Packs below, but remember that the best way to get started with theme building for Sueetie is by downloading the Lollipop Theme Pack from the
Sueetie Marketplace and using it as a basis for your new theme. Read on for details.
Application Theming Structure and Overview¶
Below are the objects and locations involved in theming Sueetie, showing how the application theming logic works in conjunction with Sueetie's global theming model. Our goal in Sueetie is to adhere to the application's native theming logic as much as possible, then extend that logic with as minimal modification as necessary to achieve the creation of theme packs and site-wide one-click theme assignment in the Sueetie Administration Theme Selector.
Stylesheet Load Order
All Sueetie pages in all applications load stylesheets in the same sequence. First, application-specific CSS files are loaded, then a global SHARED.CSS is loaded for settings shared among all pages, and then a CSS stylesheet for that application type is loaded.
Here's an example of CSS load order for a blog page with theme Lollipop:
- /blog/themes/lollipop/style.css
- /themes/lollipop/style/shared.css
- /themes/lollipop/style/blog.css
Root Web Area Theme Layout
In the root web area each theme has own /Themes/THEME folder with multiple subfolders.
Blog
Uses BlogEngine.NET theming logic. Blog uses site.Master and style.css located in /blog/themes/ROCKET, then SHARED.CSS and BLOG.CSS in global /style/ROCKET directory.
/blog/themes/ROCKETForums
YetAnotherForum.NET uses a similar logic to BlogEngine.NET. Uses local themes/ROCKET/theme.css, then SHARED.CSS and FORUM.CSS. Master file logic extended by Sueetie to support theme-specific .Masters. Located in /forum/masters
/forum/themes/ROCKET
/forum/masters/ROCKETMedia Gallery
Gallery Server Pro out-of-the-box uses single theme, no master, and stylesheets in /media/gs/styles, but designed as a Web Control for easy theming. Extended by Sueetie to support multi-theming. Stylesheets in /media/gs/styles/ROCKET, master in /media/masters/ROCKET. Loads local themes ca_styles.css and gallery.css, then global SHARED.CSS and MEDIA.CSS in /styles/ROCKET
/media/gs/styles/ROCKET
/media/masters/ROCKETWiki
ScrewTurn Wiki out-of-the-box supports multiple themes, but a single master file. Actually, two master files, MasterPage.master for content pages and a MasterPageSA.master standalone master page for the edit page and various other pages. Loads /wiki/themes/ROCKET/screen_styles.css then global SHARED.CSS and WIKI.CSS stylesheets.
MasterPage logic is different from other apps, as ScrewTurn's MasterPage codebehind logic is quite extensive and a lot of relative pathing is going on. For ScrewTurn the best approach was to use Rocket.master and RocketSA.master (THEMENAME.master and THEMENAMESA.master) which derive from MasterPage.master.cs and MasterPageSA.master.cs respectively.
/wiki/themes/ROCKET
/wiki/ROCKET.master
/wiki/ROCKETSA.master
The Lollipop Theme Pack
The installed Lollipop theme is available as a Theme Pack to help you get started creating a new Sueetie Community theme. You may even consider creating themes for sharing and/or selling commercially in the Sueetie Marketplace. You'll find Theme Packs that you can download and customize in the
Sueetie Marketplace Themes Area. Using an existing theme pack is the best way to understand Sueetie theming logic and build your own original community theme.
Download the Lollipop Theme Pack from the Sueetie Marketplace and unzip it to a working location. In the root folder you'll find a
LollipopIt.cmd command file. This will rename all lollipop folders and files to your new theme name. To use it open a Command Window, change directory to the Lollipop folder and enter
"LollipopIt ROCKET" where "ROCKET" is the name of your new theme. Here's a command window sample of renaming all Lollipop Folders and files to "Rocket."
The next thing to do is a global search-replace on the term "lollipop" in your text editor. Shown here is my favorite, Notepad++. We're doing a "find in files" first to get a good idea on the kind of changes we're looking at. Then I'd do two case sensitive search-replaces for "Rocket" and "rocket." An extra 10 seconds for the second search, but we'll take it.
At this point we can safely copy our Rocket Theme contents over our working website. The final step would be going into Sueetie Administration and changing the community theme from Lollipop to the name of your new theme. Remember to touch your web.configs for the theme change to take affect. /web.config, /blog/web.config, etc.
The first thing I would do at this point would be to make a change to my Rocket Shared.css theme, perhaps changing the background color. This will tell us on page reload if we're all set to start creating our new Rocket theme. After that it's just a good eye and lots of typing.
Administration Area Theming
By default the site administration area uses the original Lollipop theme. This is set in the Sueetie.Config Core AdminTheme property. Change this value to the custom theme you wish to use.
Customizing the Lollipop Theme
Sueetie v1.3 was released with two variations: Lollipop Black and Blocked Lollipop. These were not reproduced for Sueetie v2.0. Instead we'll tell you where the high-dollar CSS points in Lollipop are located so you can make some quick modifications to give your site a distinctive look and get up and running quickly.
Logo
<div id="homePageLink">
<a href="/default.aspx" title="" class="logoLink">
<img src="/images/shared/sueetie/logo.png" alt="" /></a>
</div>
Replace "logo.png" with your own logo and you'll be good to gogo.
Top MenuBar Background Color#topstrip in shared.css
Page Outer Background Colorbody {} in shared.css
Inner Body Outer Background Color#pageinner in shared.css
To go Full-Page Widthremove width: 990px in #pageinner in shared.css
Hyperlinks and Font ColorsA single red color is used throughout Lollipop for Fonts (H2, H3, etc) and hyperlinks: #D50031.
Borders, Background ColorsRed hexadecimal #DF0031 is the common color for borders and background areas.
Customizing the Chiclet Mobile Theme
With Sueetie 2.0 your community is fully mobile-enabled. The Sueetie Mobile Theme name is Chiclet. Here is what the Sueetie.com home page looks like on an iphone using the Chiclet Mobile Theme compared to what the home page looks like on an iphone prior to Sueetie 2.0 mobile support.
To create your own mobile theme use the Chiclet Mobile Theme Pack. The procedure is exactly the same as creating a new site theme described in
the Lollipop Theme Pack section above. The Chiclet Mobile Theme Pack is available in the Sueetie Marketplace.
If you're interested in the thinking and technical details that went into creating the original Chiclet Mobile Theme, you can read the outline of theme author
Dave Burke's presentation given at New England Code Camp in October 2010.
Top