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 a bit of order to the madness, and 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 theming flexibility. 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.
Remember, all applications load local stylesheets, then SHARED.CSS and an application-specific .CSS stylesheet located in /style/THEME. All applications use local .master file(s).
Root Web Area
Let's say we're creating a theme called ROCKET. Root-level (non-application pages). Each Theme has own /Themes/THEME folder an multiple subfolders. Here is a screenshot of the top-level /themes folder contents.
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
Theme Packs
The installed Lollipop theme is now available as a Theme Pack to help you get started theming a Sueetie Community. 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 and build your own original community theme as it contains all of the files in all of the locations you'll need to build a new 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
The updated Lollipop Classic Red Theme for Gummy Bear v1.3 comes with two variations: Lollipop Black and Blocked Lollipop. Images of sample theme pages are located in the
Sueetie Media Gallery Lollipop Themes Album. Lollipop Black is most similar to Lollipop Classic Red while Lollipop Blocked gives you the option of placing all content in a blocked center page area with your choice of wallpaper to fill the left and right-sides of the page, giving you a wide variety of different looks.
The three theme variations are shown left to right: 1) Left is Lollipop Classic Red which ships with Gummy Bear v1.3. 2) Center is Lollipop Black. 3) At right is Blocked Lollipop, with the content blocked in the center and a default striped page wallpaper on both sides.
To change the site theme, just replace the appropriate .CSS files in /themes/lollipop/style with those in the desired "black" or "blocked" subfolder. Each style requires its own default.aspx (classic and black are identical) located in its folder as shown below. Replace the site /default.aspx with the style's default.aspx (if changing from either black/classic to blocked or vice versa.) I do a select-all and paste. 10 seconds, tops. What's very cool about this is that because of the single site theming model of Sueetie, ALL site application pages will be updated instantly on page reload.
Updating the Site Logos
One of the first things you'll want to do is update the site logos on the home page and header area. Here's some info on how logos can be updated, though any skilled web designer can quickly determine this in a tool like Firebug.
The home page logo is the background-image of #hometopinner DIV area and defined in home.css.
#hometopinner {
background-image:url("/themes/lollipop/images/homelogo.png");
background-position:center center;
background-repeat:no-repeat;
height:185px;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
text-align:center;
width:990px;
}
The header logo on all other pages is the background-image of #topinner located in shared.css.
#topinner {
background-image:url("/themes/lollipop/images/pagetoplogo.png");
background-position:70px 5px;
background-repeat:no-repeat;
display:block;
height:115px;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
overflow-x:hidden;
overflow-y:hidden;
width:990px;
}
Top