I've recently moved over from Wordpress to BlogEngine.NET (BE) for my blogging software. I've never really had any major problems with Wordpress, I just never really had the inclination to learn php and I'm much more at home in the .NET world. And as BE is open source I can fix/tweak/contribute to it if I want.

I wasn't really happy with any of the themes I found for BE - either the colours weren't quite right, or I wanted a slightly different layout. I'd also recently been investigating HTML5/CSS3 and responsive design, and wanted to go this route, but hardly any of the themes were mobile friendly. So I decided to create my own.

I'll say up-front, I'm not a designer (you've probably already worked that out!) In creating the, ahem, minimalist look you see before you I've definitely stood on the shoulders of giants - the good bits are all theirs, I'm responsible for the rest.

First step, use a template

I always struggle when starting a new website, I never really know how to get a good base on which to build. But luckily Scott Hanselman recently posted about creating a mobile-friendly responsive design in which he mentions Skeleton and Initializr, both of which are great boilerplates, encapsulating HTML5 and CSS best practices. I chose Skeleton because it seemed simpler to me and I liked the minimal style.

Creating a theme

I've never created a blog theme before, for any engine, but BlogEngine.NET has a handy tutorial that walks you through the necessary steps. I had to refer to some of the stock themes occasionally for clarification, but most of what I needed was in the tutorial - if you've done any ASP.NET development before you won't have any problems.

There are really only 4 things you need to create for your theme:

  • Master page (site.master) - This is the master page applied to every blog page. Use this to define your basic layout, etc.
  • Post View (PostView.ascx) - This defines the user control for displaying a single post.
  • Comment View (CommentView.ascx) - The user control for displaying comments.
  • Your own CSS to style the elements created above.

(These are all described in more detail in the tutorial)

I took the appropriate bits of boilerplate HTML from the sample index.html that came with Skeleton and used them as the start of my site.master:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head runat="server" profile="http://gmpg.org/xfn/11">

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/skeleton.css">
	<link rel="stylesheet" href="css/layout.css">

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico">

</head>

Make sure you include that mobile-specific meta if you want your responsiveness to work on mobiles (without that my Android phone just scales the full-size site down). Html5shim makes your HTML5 elements work in older versions of IE.

I then roughed out where everything needed to go and used the Skeleton grid to lay things out on the page, eg. this is the header:

<div class="header">
        <div class="container">
            <div class="ten columns">
                <h1><a href="<%=Utils.AbsoluteWebRoot %>"><%=BlogSettings.Instance.Name %></a></h1>
                <h4><%=BlogSettings.Instance.Description %></h4>
            </div>
            <div id="headerextra" class="six columns">
                <div id="headerlinks">
                    <ul>
                        <li><a href="<%=Utils.AbsoluteWebRoot %>page/My-CV.aspx">CV/Resume</a></li>
                        <li><a href="<%=Utils.AbsoluteWebRoot %>contact.aspx"><%=Resources.labels.contact %></a></li>
                        <li><a href="<%=Utils.AbsoluteWebRoot %>archive.aspx"><%=Resources.labels.archive %></a></li>
                        <li><a href="<%=Utils.FeedUrl %>" class="feed"><img src="<%=Utils.RelativeWebRoot %>themes/<%=BlogSettings.Instance.Theme %>/images/rss.png" alt="Subscribe" title="Subscribe" /></a></li>
                    </ul>
                </div>
                <div id="headersearch">
                    <blog:SearchBox ID="SearchBox1" runat="server" />
                </div>
            </div>
        </div>
    </div>

Finishing touches

Once I had my layout sorted, I uploaded everything so I could preview the blog. Skeleton comes with a minimal style out the box which I wanted to maintain, so it was just a case of adding slight visual hints to elements such as the header, individual post footers, etc. I also scaled down the base font slightly as it was a tad big for my liking.

Et voila - a (simple) theme that looks clean and uncluttered (to my eyes), and scales perfectly down to small, phone-size screens.

Next steps

Once I've tided up the files a bit I'll try to package them up and see if I can get the theme published in one of the BlogEngine.NET galleries.

One of the drawbacks of Skeleton is it only scales up to 960 pixels because of the grid system it uses - I might try experimenting with Initializr to see if I can make better use of larger screens.

Aesthetically, I may add a bit of colour. And maybe those headings are a bit big...