BE 2.5 Theme Oven,

Topics: ASP.NET 2.0, Business Logic Layer, Themes
Jul 4, 2011 at 6:31 AM

Hey Guys,

I started this thread as this may be quite awhile, but basically as I have said I started working on a solution to create your own themes from a designer on the BlogEngine.Net application. Code named it "ThemeOven" Now I have started mimicing the way (blogger) does theirs. Its very similar but a starting point, I have put in about 12-13 hours into it and its far from complete but I figured you guys may want to put some input into this.

Here are some screen shots.

I know it looks very similar to another company but the functionality is there. I have only gotten this to an initial stages and can only preview the theme you are creating. However this does provide live preview of generating the theme.

The system has quite a few moving parts but basically contained in a few javascript files and a few class files. I have attached a copy of the package to try it out, to install this i suggest you test just installing a clean BE 2.5 setup and extracting the package to its correct folders and listed. 

The system works like this.

There is a basic "template" of css, site.master, page view comment view etc that exists in the themeoven/template directory. These are the base files that are used to generate the preview. Now I have created a class called "ThemeOvenBasePage" which inherits the BasePage class I did this so we could use the same BasePage model without making any changes to the existing code. Also their is a Site.master file (taken from the Standard theme), this is the file that does all the work of drawing up the UI based on the units you select in the designer. The markup of this page is VERY generic containing the minimum html required. The remainder of the HTML is generated through the OnInit override in the backend.

Now the ThemeOven system heavily relys on the class ThemeOven.cs which contains a XML Serializable class that is written \ extracted from a users temp directory (/ThemeOvenTemplate/) while they are in live preview. This class file contains all the properties to hold all the various details. Additionally this class contains 3 other KEY methods.

  1. ExtractXml : Converts an XML document into a ThemeOven class
  2. Publish : Converts the current class into a XML document, writes the correct CSS files.
  3. JsObject (field). This is responsible for passing the ThemeOven class into a javascript object to load onto the designer.

As this is live preview the entire application does not rely on postbacks. Instead what i have done is seperated the ThemeOven designer into two parts. The top part (designer) is simple html controls, while the bottom part is an iframe that takes a BlogID in the querystring. The blogID is crutial because the ThemeOven classes require you to pass in the blog ID.

As you make changes to the designer, there is a "themeoven.js" file that manages updating the live preview. And this method was simple, as I stated before the ThemeOven designer passes a Javascript object into the header of the designer on load that contains all the "current" property values. This object is setup slightly different than the actual class, the reason for this is I couldnt find a nice way to create a simply object (flat object) and use the '.' in the names. So example in the ThemeOven class there is a property called PageStyle.BackgroundColor but that is translated to the JS object as PageStyle_BackgroundColor, this is the simplest way I could come up with the class naming.

As i babble...

The Javascript file "ThemeOven.js" works in a very simply way.

All the designer elements have a jquery event set to them, when an event occurs such as changing a Link color the property of JS object is updated, then I push the change to an array []. When i push this to the array I am also calling a method called esc which simply rewrites the Property to include the period and escapes the text to make sure it is URL encoded.

Next I call the setSrc(); method, this method refreshes the iframe passing in all the items in the array to be updated, including the blogID. This then hits the site.master page and executes a method to Update the ThemeOven object and redraw the page.

I know this is getting a little long winded but just trying to provide some details.

Finally there is one major piece of the puzzle, rendering the display. As I have just started bare with the lack of CSS that is being generated, however I think I have a great method here.

There is a class called ThemeWriter this is a basic class but basically When the Publish method is called on the ThemeOven class I invoke 4 (will be more soon) ThemeWriters. How the theme writer works is it loads a related text file from /App_Data/ThemeOvenTemplate/mainCss.txt 

 

body, html, form { margin:0; padding:0;  }

body 
{

	font-family:#fontfamily#;
	font-size:#fontsize#;
	color:#fontcolor#;
	background:#background#;
	#fontstyle#

}


a, a:active {
	color:#a_color#;
	text-decoration:none
}
a:hover{
	color:#a:hover_color#;
}
a:visited{
	color:#a:visited_color#;
}
.clear { clear:both; float:none; }

 

And allows you to pass in replace parameters, for example ThemeWriter.AddParam("a:visited_color","blue"); and this will replace all the instances of the parameter with the value. Simple enough. It does this for all 4 files and then stores the generated CSS into the users Temporary theme directory. Once the theme writer has published the css I invoke a 3rd party component called "SquishIt" to minify the 4 css files into one file. The beauty of this component is it will only minify if there is a need to minify. I believe it watches the file sizes etc and minifys as required. The then minified file is appended to the header of the rendered page.

This is about as far as I have gotten, as there is a TON of properties i want to start implementing.

Ohh there is also an async file upload control (uploadify) that is very handy to upload the background Images.

Would love to hear comments or concerns. Download the src code. 

ThemeOven.zip (695.54 kb)

Cheers,

Nico

ps. Dont forget about http://www.bloglobe.com (has to add that in)

Jul 4, 2011 at 6:47 AM

Forgot to add when you have installed it, there are no direct links to the page but can be found @

/admin/ThemeOven/Oven.aspx

Cheers

Jul 4, 2011 at 9:50 AM
Edited Jul 4, 2011 at 9:53 AM

I have added some more features in the last couple hours.

  1. Sliders to set the blog full page width (the full container) and the left & right side bars. The center is calculated by dynamically based on layout type and side bar sizes (as applicable)
  2. Support rounded corners (on browssers that support them)
  3. Background & Body Images
  4. Transparent body types
  5. Allow you to publish and use the template.
  6. Edit your theme while maintaining your published theme (until you finish it)

 

Also i have attached the new version 0.1 there is an additional theme that goes in the templates directory called "template" (i know very creative) but this template is setup so that each blog instance (by id) has its own directory containing the themeoven.xml and the required css files. For now the images are staying in the designer directory. Will work that out another time.

Still a long way to go, but starting to look good! If you try this out the button (that has no text on it) will finish the theme and publish it.

 

ThemeOvenv0.1.zip (651.14 kb)

Cheers.

Jul 5, 2011 at 7:54 AM

Looking good!  So does this just generate the CSS or the whole theme with CommentView etc. as well?

Jul 5, 2011 at 8:02 AM

Currently it is generating the CSS for basic postview comment view etc.

But the idea will be to create a generic framework for the Commentview, postview, pages etc. Then have the rest be built up by XML frameworks and CSS. Its a big job but its going nicely.

The whole picture should (doesnt yet) include the following items

  1. Background Styling
  2. Full Page Styling
  3. Specific elements such as Comment & Post View
  4. Gadget styling
  5. Custom social networking (buzz) gadgets.
  6. Header styling including
    1. Logo upload
    2. Name setting
    3. Description
    4. Specific re-positioning to absolutely position header items
  7. Custom theme naming and NuGet packaging
  8. Ability to upload all the required elements to the BlogEngine.Net gallery

What I am trying to avoid though with this type of theme is actually causing me to copy code files around as those can typically cause an application restart event which we really do not want. So the entire theme has to be developed with existing files ie. Site.master, PostView, & Comment iew.

Its still a long way off, but it is more than doable. This is the first time I have ever tried generating CSS and wireframes dynamically, but hopefully someone will lend a hand for some other parts.

:)