I really like BlogEngine.net but I've found it frustrating to get some really nice modern themes for it. There are a good few examples out there and I've blogged before on where to go to get some good themes but unfortunately the vast majority of themes look dated by today's standards.
Instead to just complaining about it, I've decided to convert some nice modern free html themes that are out there over to the BlogEngine platform. I found a really nice site called StyleShout.com that's run by Erwin Aligam. He has some really nice html themes that he has given away for free so I got in touch with him recently to find out if I could convert these themes over to blogengine.net. Thankfully, he was more than happy to let me go off and destroy, er, I mean convert his themes! ;)
The first theme that I have converted is called CoolBlue. I really like the clean and simple look of this theme. To set this theme up on your own BlogEngine couldn't be easier.
- Download the file at the end of this post and unzip it to your blogengine Themes folder.
- Before you upload the theme you will want to change some links on the site.master page (footer section) within the template folder. I have left the Contact Info section in the footer so you can put in your own Facebook or Twitter links. If you would rather display another Widget simply remove the <div class="col"> tag and its contents. Now that you've configured the theme with your own links, upload it to your themes folder online.
- Log into your website and go to Settings in the admin section. Change the Theme to CoolBlue and click on Save Settings.
The Preview option won't work as the stylesheet is within a CSS folder and not on the root level. The theme will work on the 'Live' website so don't worry if you view with Preview and it's missing some images.[Update: This issue has now been resolved.] - While still logged in, go to the homepage of your website. You should see the new theme looking all shiny on your site. We're nearly there now with the tweaks.
- There are 2 Widget areas for you to add your BlogEngine widgets. The side widget and the footer widget. Simply select the widgets you want to use to get them to appear in the relevant area. Please note that I have not styled up every widget so some css tweaking may be required for some of the more unusual widgets that you might want to display. For the footer widgets, you should really only show 2 widgets if you plan on keeping the Contact Info column. If you display anymore widgets it won't look pretty - you have been warned!
So that's it. Not too much tweaking - mainly just putting in your own twitter and facebook links.
This is the first theme I have converted. I will do my best to make one a month as long as I have some nice html templates to work with. We will see how long that plan lasts for! Till then, enjoy and let me know what you think.
[08 Nov 2010 Update] I have now updated the css styles for the comments area. This fixes the padding issue with smilies and patches up replies indenting.
[24 Nov 2010 Update] I have updated the css and files to be BlogEngine 2.0 compatible. There are some differences between BlogEngine 2.0 and 1.6 so make sure you download the correct file for your blog engine.
BlogEngine 2.0+ use this file:
BlogEngine 1.6 use this file:
Member discussion