New Blog Design

New Blog Design

Unlike WordPress, the template set and amount of available theme repositories are scarce for Movable Type.  I know that WordPress is definitely more popular, but I’m pretty well settled into Movable Type and the thought of changing everything over is a huge time investment I don’t want to venture into.  I don’t feel like I’m stuck with Movable Type, I kind of like it.  MT is a powerful blogging platform and I’ve gotten used to it, you just have to get under the hood with it a little more.

The default styles for MT are boring though.  The design tools out there don’t add much to the design either, mostly just changing colors, and there’s a reason for that… the StyleCatcher plugin.  The plugin is designed to make it easy to switch styles on your MT blog, it’s  good idea in theory, but it can be complicated to work with in practice (which is probably why you don’t see a lot of MT theme repositories out there.)  I did have a custom design awhile back, but I also had a custom CSS file that didn’t match the StyleCatcher format.  I like the idea of pushing a button and being able to change my blog design, but it only works if you’re willing to spend some time with StyleCatcher, this isn’t really a user friendly process and you really have to understand CSS more than casually to be successful.

I’m not a designer, I’m more like a tinkerer, I can play with CSS and HTML and come up with something presentable.  I like simple and clean designs, I also like little touches, it’s the little touches that can get me in trouble.  My favorite design site is Open Source Web Design, but the designs are normally static and need to be modified to fit a blog template, that’s where the hacking comes in… most of the time this ends painfully.

Last night I decided to dive into StyleCatcher again, determined to make it successful.  StyleCatcher relies on two CSS files, a base file where it pulls the format based on your column layout and type of blog (in theory you can create one design then apply that same design in a variety 2 or 3 column formats).  The problem with editing this base CSS file is that all of the other StyleCatcher default themes rely on this file.  You can add your own into the directory and use that, that base file includes layout for many other "invisible" elements too, things like form spacing and buttons, comments, categories, and other things you might not consider when you’re just looking at redesigning your home page.

The style CSS is stored in another directory altogether… both CSS files are called by another CSS file in your main directory.  Sure you can bypass all this stuff if you want, but it could mean more tinkering later if you need to refresh your template or upgrade your blog (which is what happened to me last year).

The approach I took was to create a new style directory, which I wanted loaded into my style gallery in MT.  I wanted to switch back and forth between my custom style or a default style if I needed to.  I also anticipate creating new blogs with the same style for some projects I have in my mind, and I wanted them to be seamless, loading them into the gallery makes them accessible to any new blog I create, now by simply applying the style.

After some playing around with the CSS and consideration, I decided not to change the base CSS file and focus on the custom style.  Working with either CSS file is a pain, they’re not laid out like I would like them to be and you still have to switch back and forth to make sure you’re not changing anything important.  If you want to keep the StyleCatcher functionality the most important thing is to not change any of the divs or classes, and to keep your HTML files completely in tact.  This means trying to figure out the best way to take somebody else’s CSS file and translate it to something StyleCatcher can understand.

So all of that sounds like a lot of work… actually it is, but once you have it worked out it’s really easy to load it into MT and applying the new design is even easier.  Movable Type has instructions for creating new themes, the one I did was #5, creating a StyleCatcher theme.  Though by the time I got to here the hard part was already done.

The current version of this design is from the website ZeroWeb and based on the theme Curiously Green by nodethritythree.  I have some more tweaks I’m going to do to the site over time, some of them will be more involved than others, but I’m pleased with the results so far.  Now, hopefully MT doesn’t go messing with the StyleCatcher plugin or I’ll be in big trouble.

** Update ** I added the navigation to the side last night, I’ll add some more links periodically as I get the pages done, but the Lifestream is an experiment and the CSS files still need to be tweaked for that. The Lifestream is provided through Movable Type and it’s known as an Action Stream plugin, it’s actually a link to another blog in MT and it has yet another CSS file provided on top of the StyleCather plugin (yippee).