Cool thing about open source is sharing. You give some - you get some. When it comes to themes, there are tons of great free designs out there on the web for applications like blogs.
Some of them are generic CSS templates, others specifically designed for popular open source projects like WordPress. This tutorial is about converting WordPress theme to BlogEngine, but most of it very much applied to almost any web template in the universe.
First, lets get to know what exactly we need to build BlogEngine theme. Thankfully, not a whole lot - all you really need is to create a new folder under ~/themes and add three files with few lines of code:
// site.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="site.master.cs" Inherits="site" %>
<html>
<head id="Head1" runat="server"></head>
<body>
<form id="Form1" runat="Server">
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
</form>
</body>
</html>
// postview.ascx
<%@ Control Language="C#" AutoEventWireup="true" EnableViewState="false" Inherits="BlogEngine.Core.Web.Controls.PostViewBase" %>
<h1><a href="<%=Post.RelativeLink %>"><%=Server.HtmlEncode(Post.Title) %></a></h1>
<asp:PlaceHolder ID="BodyContent" runat="server" />
// commentview.ascx
<%@ Control Language="C#" EnableViewState="False" Inherits="BlogEngine.Core.Web.Controls.CommentViewBase" %>
If you run you blog now and select theme with the same name you just gave to the folder, your new "theme" will work. It won’t look pretty, but you’ll see your posts and will be able to navigate to the details page and make comments etc. just fine.
From this example you can see that only things required in the theme are couple placeholders where BlogEngine will put generated content and couple tags like "head" and "form". That means, we can pretty much take entire Html from any template, put it in the site.master, stick placeholder in the corresponding gap - and we have our custom-built theme ready to go... well, almost :)
So, lets start by downloading WP theme. As example I'll use this tutorial theme. If you open archive and look inside, there are usually lots of .php files, images and few .css files. Delete all php's - you won't need them. Instead, go to demo site and open it up in the browser, right click and select "source code". Create html page in you theme folder and copy source code there. Make another copy - you'll use it as a reference if you accidently break something . Now run your project and go to html page, make sure it looks exactly as in the demo site.
When you look at the souce code you copied, there are a lot of hard coded content in there. Make it as uncomplicated as it gets by removing all content. Also, replace all web references with local ones. You'll get something much more manageable:
<html>
<head>
<title>Tutorial Theme</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="logo"><h1><a href="#"></a></h1></div>
<div id="navigation">
<ul id="menu">
<li class="current_page_item"><a href="#">Home</a></li>
<li class="page_item"><a href="#">About</a></li>
<li class="page_item"><a href="#">Blog Oh! Blog</a></li>
</ul>
</div>
<div class="content">content</div>
</div>
<div id="right">Right sidebar</div>
<div class="clear"></div>
<div id="footer"><p><a href="#">Footer</a><br /><br /></p></div>
</div>
</body>
</html>
Now we are getting somewhere. Copy everything inside “body” tag into site.master page and replace content div with ContentPlaceHolder. Run your project and you’ll see that site looks much better. A little more patience and it will look like the picture below. In the next part I’ll show you how to reconcile CSS that comes with template and BlogEngine specific elements and we look at some tricks you can use building your custom theme.
