I recently finished creating a custom blog engine skin for this site, you're looking at it right now. It's fairly simple as I wanted to see how far I could get without the (over) use of gradients and drop shadows. Creating a BlogEngine.NET theme was pretty straight forward, so I thought I'd cover off a few basics quickly.
Find another theme to base yours off
BlogEngine.NET ships with a number of themes, they are all developed in slightly different ways. Having a skeleton structure to build from saves you a lot of time. I ended up removing a lot of the theme I started from (including the entire css file). The BlogEngine control panel is not affected by the skin, so we are simply skinning the public side of the site.
The structure of a theme
There is not a lot to a BlogEngine.NET theme and if you are familiar with ASP.NET it will be familiar. The site.master file is a standard asp.net 2.0 master page that will be applied to the site. The CommentView and PostView ascx files are standard user controls that BlogEngine uses not surprisingly, to render a post and it's comments. These inherit from the PostViewBase and CommentViewBase controls to provide access to the post and comment data.
Using the BlogEngine functionality
Being ASP.NET 2.0 the "all the logic in the view" (anti)pattern is followed! While I don't agree with this personally, you can't win 'em all :-) With blogengine already having done the hard work for me, I thought it overkill to build a testable presenter layer for the skin.
<%@ Import Namespace="BlogEngine.Core" %>
Adding the Import Namespace="BlogEngine.Core" server tag to the ASPX of any of these controls allows us to call into the engine and retrieve data on the blog itself and access a number of utility classes. You could also do this in the .cs code-behind.
<%=BlogSettings.Instance.Name %>
The static BlogEngine.Code.BlogSettings class contains a number of useful properties including the Name and Description of the site (I use these for the heading, and "welcome to my weblog" tag line on this site. This allows the skin to take advantage of the configurability of the blogengine.
<%=Utils.AbsoluteWebRoot %>
The static BlogEngine.Core.Utils class provides access to functionality like sending emails, and the AbsoluteWebRoot Uri which I use for hyperlinks.
<blog:WidgetZone runat="server" ID="footerZone" ZoneName="footerZone" />
The WidgetZone control provides a configurable place for widgets to be added. You can have any number of these zones, giving them a unique name allows you to have different widgets in each. This site has a widgetZone control in the footer with the tagCloud widget added to it and another hidden widgetZone with the Administration links in it visible when logged in.
Once I had a nice xhtml-compliant markup I set to work adding css. Using the Visual Studio 2010 Release candidate to edit CSS you get constant validation against the CSS2.1 standard. This was great, but I still find the easiest way to write CSS is using Firebug. Firebug allows you to directly manipulate stylesheets in the browser, re-rendering automatically. So I found myself writing the css in visual studio initially, then tidily updating the file in visual studio.
I hope this helps anyone writing a blog engine skin. Is there anything I've missed or any other useful features of BlogEngine.NET that I should know about?