Saturday, February 2, 2008

My Zen Garden Challenge: Styling My Blogger Template

If you've ever been here before you might notice that this site now has a radically different look and feel. At work I've been doing a lot of CSS lately and at the same time have started to dislike my Blogger starter template.

I browsed a bunch of community generated Blogger templates but none of them really spoke to me, so I decided to make my own. It's interesting to note that doing a blogger template is a lot like doing a CSS Zen Garden challenge.

The first thing I did was go find a design I liked. I'm a terrible designer so anything I layout is usually heavily inspired by another design (almost to the point of piracy).

Next I took the blogger document, investigated the CSS and layout to see where I could hook in, grabbed some of the images from the source design and then went about applying the same styles to the Blogger html. This was quite a challenge, it took me a lot more time than I though it would. I'm sad to say that to find a design I liked, apply those styles to the Blogger html document, troubleshoot for IE 6, 7 and FF support took me about 6 hours total. I guess I'm not as quick as I thought I was. I feel like I could have done a lot better...

Some of my more frustrating moments were trying to get Google's Picasa to host my images. I tried for over an hour to upload images and then get Picasa to hand them back to a stylesheet without altering them. I played with over 3 different sets of URLs to the images tried uploading them through Picasa, Blogger and Windows Live Writer and for the life of me could not get them to come out the same way they went it (if at all)! I finally threw up my hands and signed up for a Yahoo Flickr account. I found Flickr easier to use and it was simple to get a universally accessible URL when it came time to get the images out.

Any ways, let me know what you think, I still need to fix the header image but that is definitely for another day. It's time to go enjoy some of this weekend.

Rediscovering some of CSS's pointy edges,


Anonymous said...

A test comment...

Anonymous said...

A test comment

Anonymous said...