Since we installed dasBlog, we've been wanting to create our own theme so that it ties in with the rest of the site. Hopefully, this step by step guide will help you if you ever need to do this.

Creating a new dasBlog theme

NOTE: We are assuming you have already set up and got the blogging engine running if you are wanting to add your own theme, so those instructions are not covered here.

As dasBlog is all file based, all of the configuration you have to do is purely created on the file server. Go to your installation folder (e.g. C:\dasBlog) and have a look in the "themes" folder where you should see all of the default themes that are shipped with dasBlog. To create your own theme, either copy one of the existing themes and modify that, or create a new folder with the name of your new theme (the configuration sections will automatically pick up any new folders you create as an option for the them you or your users choose). We chose to start by just copying one of the existing themes as it gives you a good starting point and makes sure you don't break any of the layout or structure of the site (and it means all of the files you need are in place and it's then simply a question of modifying whatever you choose to).

Once you have your new theme, the files that we recommend you concentrate on are:

yourtheme\theme.manifest
yourtheme\homeTemplate.blogtemplate
yourtheme\css\base.css
yourtheme\css\colors.css
yourtheme\css\dasblog.css
yourtheme\css\fonts.css
yourtheme\css\pagelayout.css

The "theme.manifest" file is where you set the details about your theme such as it's name, title and paths to the css and image files. The "homeTemplate.blogtemplate" is the actual HTML that is used for the main pages (not the admin section, as this has it's own file within the "admin" directory). We left most of the HTML intact however we did modify the header and footer sections to add our own menus and custom text.

For the actual styling, you can simply modify the CSS files that we listed above. We just used Firefox's "Web Developer Toolbar" add-in to find out what css was being used by each section, and then go into the relevant file and modify the css element to what we wanted. I'd say that this whole process took around 15 minutes which is pretty good going, so I'd like to thank the dasBlog developers for making it very easy!

Mark Smith
MDS Solutions - Web Design Darlington