How to convert theme to BlogEngine.NET
With summer behind us, you might want to change things a little bit to celebrate a new season. Like buy a new shoes or, may be, change a theme on the blog. I decided to do the later. My schedule is quiet busy, so I’ll do it in several steps and will share tips, tricks and findings with anybody interested.
I’m running relatively recent build of BlogEngine from source, but new theme should work fine with 1.6.x.x. Let me know if it doesn’t for you and I’ll do adjustments as needed. To start, I went looking for catchy free theme, no kind in particular - any design can be adopted to BlogEngine pretty easily. This WP theme looked pretty good to me. Below I’ll try to document adoption process step by step.
Laying down the foundation
- First download original design. It can be WP theme, generic CSS template or anything else - as long as it is HTML/CSS/JavaScript we should be fine, back end does not matter.
- In the BlogEngine site, copy “standard” theme and rename copied to “Boldy”.
Move all CSS, images and JavaScript files from original to newly created BE theme.
Override “style.css”. - Go to simplest page in the demo site (like this for example)) and right-click/copy page source. Paste it into site.master and remove all server-side code from site.master.cs.
- Clean up copied HTML. For now you’ll need add only two things from standard site.master in there: directives from the very top (2 lines) and content placeholder (cphBody) where list of posts will show up.
- Check out download link at the end of this post to see how simple theme files really are after you clean them up.
Lining up comments and forms
Some CSS skills are required. FireBug is a big help. Mostly what you do here is looking through the FireBug at HTML generated by BlogEngine and apply appropriate style to it. Usually theme you are trying to adopt comes with some style for forms and sometimes comments, but HTML elements, class names etc. do not match. Probably best way to go is remove all form/comment related CSS and gradually move form/comment CSS from BlogEngine into new theme. Obviously, some things you’ll like to change to match new design. Easily most time consuming task in this first step.
Checking out archive
Copying “archive” section from “standard” theme almost did it, just a few minor changes and it looks the way I wanted.
Minor tweaks to content CSS
Depending on your content, you might notice that some things from your previous theme does not look quite right. I spent some time tweaking image display and few others playing with “float”, “margin” and alike.
Get a logo
Go to creatr and get yourself a little silly logo. Why not? It’s fun and easy!
You can download original Boldy theme here and theme adopted for BlogEngine using link below. It is far from done and you probably don’t want to put it on your blog just yet, but looks pretty good already. In the next steps I’ll get “search” working, add widgets and do a lot more to bring this theme to live.
