Crafting CSS style sheet

This is the most time consuming operation in porting any CSS template to BlogEngine. If you like your design pixel perfect - that will cost you. These are some general tips that I hope will help make job a little bit easier.

• Move forward gradually, addressing one area at a time. Make sure your header section looks right and only then go to the post, comments, sidebar, archive etc. You don't want to go though the changes you've made in the last couple hours looking for one that totally screwed page layout or changed that color you really liked.
• Each step verify at least in Firefox and IE. Throwing into the mix Opera and Safari would be nice, too.
• Get a tool to work with DOM. You want to click on any element on the page and see CSS style attached to it. Firebug or Developer Toolbar will do the job.
• First, use only style sheet that came with template. Clean it up by removing anything you not going to use. For example, if you going to use only one level in unordered list you don't need "ul li ul li" for this class. Keep it simple.
• Start with generic html tags like headers, lists, paragraphs, images etc.
• Once that taken care of, move through BlogEngine style sheet and take only what you'll need. Again, one block at a time and moving on only after checking changes in all browsers you going to support.

Taking advantage of asp.net

BlogEngine is typical asp.net application, you can do in your theme whatever asp.net allows you - and this is a lot!

Add core namespace to the master page to get access to BE objects:

<%@ Import Namespace="BlogEngine.Core" %>

Now you can use it anywhere in the theme if need to. For example, to get a link to home page in any language BE supports:

<a href="<%=Utils.AbsoluteWebRoot %>" rel="home"><%=Resources.labels.home %></a>

It is common for themes to implement menu where current page you are on stands out in some way. You can easily add this by creating small function in code behind that returns different class string for current page:

public string MenuClass(string menuName)

{

  if (Request.Path.Contains(menuName))

    return "class=\"current_page_item\"";

  else

    return "class=\"page_item\"";

}

And then use this function in the theme to get class for the menu element:

<li <%=MenuClass("default.aspx")%> >

If you need to show element on the page only to blogger (admin):

<% if (Page.User.Identity.IsAuthenticated){ %>

    <div>Show admin/blogger content</div>

<%} %>

This tutorial is very basic and meant just to get you started. You can go as far or as little as you wish with your design, implementing sitemap menu, adding content placeholders, user controls and more. The point is, you’ll be really hard pressed to find project that is as easy to theme as BlogEngine. If you don’t like the way your theme looks – go ahead and change it. It is that easy!

Read part one

Test-drive tutorial theme

Download tutorial theme (52.75 kb)