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.
Boldy.zip (257.51 kb)
Largely as a result of iPhone revolution, mobile devices today more wide spread and connected to the web than ever. It is increasingly important for web sites to look good on the small screen to attract mobile users. BlogEngine.Net has mobile theme that looks ok, but we need more and better. I’ve been looking for options and played a little with some of the frameworks available for other platforms. There are some interesting development, and I’m interested in doing more here. As first experiment, I updated my previous iPhone admin add-on and combined it with simple but fully functional mobile theme. It got a list of categories on front page, from where you navigate to the posts. You can also login and publish posts using admin add-on that became part of the theme. Take a look at screen shots, they are pretty self-explanatory. More...
Just finished refreshing my old DarkBlog theme to run under newest BlogEngine 1.5 release. It has been neglected for quiet some time now, I had to add widgets support, nested comments and few tweaks here and there to play nice with new features added to BlogEngine since version 1.3 when this theme was introduces. It looks pretty good with standard “welcome” post, but when tested with my own blog content, some things do not look right. Nothing is wrong with theme though, the problem is content itself - which prompted me to write a note to myself: More...
The dfMarine theme has been updated with sliding widgets. No, I did not become a jQueryW expert just yet - it is mostly courtesy of Chris Blankenship, I used his AnimatedCollapse extension and it did the job exactly the way I wanted. I did run into problem with jQueryW using “$” function, it has a conflict with other JS I run on my site where this same thing used a little bit differently. But it was easy enough to ask jQuery switch to using “$j” instead, so that conflict was happily resolved. More...
With Christmas just around the corner I wanted to share something good with BE community to keep the spirit alive :) I hope you’ll like this new theme, it is widgets ready and should work fine with BE 1.4 and up. I think I covered all (or almost all) widgets in CSS, so it should look decent with your site out of the box. One thing I left out is accordion for side bar – all those widgets on the right should slide up and down on title click. Mostly because I want to finally get into jQuery and this is as good reason for me as any to get started, so I’ll upgrade it to accordion when I’ll become proficient enough with this JavaScript library. More...
Just read a great article at coding horror on becoming a good blogger. It says that it takes at least a year to even get noticed and main peace of advice is to keep punching and feel good about it. Well, it sounds… hmmm… encouraging. Thanks God I’m not aiming that high. Anyways, I decided to follow advice and throw a punch – even though my new shiny theme for BlogEngine is not quite ready yet and I was hoping this will be my next subject. Funny how it goes – takes about an hour to convert any CSS template into BlogEngine theme, this is how simple it is and how good ASP.NET overall and BlogEngine in particular implemented skinning. Almost too good to be true – and it isn’t. Dirty little secret is that it takes ten times more to polish it to the dissent “production” state, when it looks good in all major browsers and scales fine for reasonable range of screen resolutions. I’ve heard that there are about ten testers for every developer in Microsoft – totally makes sense! More...
