Creating Your Blog Layout and Style

Most blogging engines (I am using dasBlog) provide a number of standard themes for you to use. Generally, the theme can be changed in the admin panel of your blogging engine. Using a standard theme is easy and for those without web development skills (HTML & CSS) is probably the best choice.

Most blog engines allow users to create custom themes. This is generally done using the following two steps:

1. Modify a template that defines the layout of the web page. In dasBlog there are  a number of templates. The two that I modified to for my blog are:
   • homeTemplate.blogtemplate – This template defines the layout of the page. It defines a placeholder for the posts but does not define the layout of each post.
   • itemTemplate.blogtemplate – This template defines the layout of each post.
2. Create or modify cascading style sheet files to further define the layout and visual characteristics of your site.

There are a number of resources / tools that I recommend to create your own theme.

FireFox + FireBug – This combination provides a really easy way to analyze the HTML and CSS of your site. It allows you to change the CSS while viewing the page to determine the effect of the changes before updating your file. There are subtle differences in how various browsers render HTML and CSS. After getting your theme to look just the way you want it in FireFox, then make sure it renders correctly in at least IE7.

Free CSS Templates – There are a number of sites that offer free HTML & CSS templates. I chose the http://www.freecsstemplates.org/. In fact the theme that I choose as a starting point is here.

Graphics – To add a personal touch, update and add a touch of meaningful graphics. There are a number of places on the web that provide free icons, bitmaps, and graphics. I like to use this site.

Image Editor – To add your image to your site, you may need a good image editor. I use Paint.NET. I used it to trim out the background behind me in my picture.

Blog Engine Help – You will also need a resource for editing your blogging engine template. Use the standard templates to learn what is available. For the dasBlog engine, you will find having the list of available macros is helpful. These macros are syntax such as <%command()%>, that the dasBlog engine replaces with HTML.

It is not really too difficult to do. Many people copyright their blog theme. I found it useful to investigate how others designed their theme. You can download my theme here. Feel free to use as you want.