Tuesday, July 26, 2011

Thoughts: Overhaulin'

If there's one thing I like about Blogger above all else, it's the freedom that we are given as bloggers to customize our blogs. That being said, you have probably noticed by now that I made some changes around here. I've wanted to completely overhaul the design here for a while, but it's been a long and drawn out process of trial and error. I've finally settled on something I like that gives the blog a cleaner and simpler look.

When I say long and drawn out, I mean it. I went as far as setting up a 'dummy' blog just to play around with the various templates until I found something that works. And that wasn't just recently, I've been slowly hacking away at this for months now in my spare time. The beauty of doing that was never having to worry about permanently messing up the live template, as it was from the old designer and I would have no way to recreate it.

In reality, since I started this thing back in 2009, the design's been a slow-moving work in progress. Most of that has to do with my inability to keep things the same for a long period of time. I've made a lot of slight changes over time (i.e. banner, background, etc.), but never a complete overhaul involving an entirely new template.

As far as getting everything to where it is now, let's just say I had to learn more than I've ever cared to about HTML code through trial and error, as you can see this isn't your cookie-cutter template from Blogger anymore. At times it definitely got to be pretty frustrating, but eventually everything worked out for the best.

Let's take a look at what I actually did to change things around here.
  • New Header: It looks just like the old one but I changed up the cards in the background of it. Notice it's got a three-tier setup with my Howard cards on top, MVP Stanley Cup Edition cards in the middle, and Metal Universe cards on the bottom. I thought that would be a neat way to incorporate my PC projects. 
  • Tabs: I've had the standalone pages on here all along, but always docked on the sidebar. I wanted them to be more visible so I moved the tabs bar just below the header, which was a real pain when it came to getting the format right.
  • PC Project Trackers: Before I had the Super and Gold Script trackers and that worked, but now that I've got three main projects, I wanted an overall tracker for each project. The pictures are just a way to visualize my three projects (any hockey regulars on SCF should recognize the Howard banner). 
  • Blog Lists: I though it was a good idea to group the blogs I read this way so I didn't end up having one blog list with 50 or so different blogs to keep track of. 
At this point there are still several things I want to add/update. Those would be adding some more highlights of my hockey collection (not just cards), a simple Inkscape tutorial, and an updated want and trade list page. Look for those things to be up and running soon.

Overall the look is still pretty much the same, just a little cleaner. I like it a lot more than what I've had in the past. What do you guys think?

Also, for those of you using Blogger, do you like to customize your blog? Or do you like the templates provided by blogger. Obviously, I like to change things up a bit.

Finally, I have one favor to ask of anyone using IE to view this page. Let me know if the tabs are messed up on the right-hand side, because I happened to be on IE the other day and noticed the Want/Trade List tab was kind of bunched up at the right end of the page. What I don't understand is why it works fine in Chrome, but not IE. Any info on the problem or solution would be greatly appreciated.

Edit: Ok, now I'm really stuck on this one. I have no clue how to get the format to work correctly on IE. Upon closer review, it seems like the overall width of the blog is different between browsers. Is there anyone out there who knows how/why I have this this issue and how to fix it?

Edit (Pt 2): If you're reading this now, I ended up changing the tabs back into the list on the sidebar again. The only difference now is I created them with Inkscape using the same text as the header.


  1. I use blogger... not really smart enough to do any customizing. I like what you've done here though.

    Using IE 8.0.6 the only thing that looks messed up is your wantlist/tradelist at the top right.

    It looks like


  2. I noticed the same issue with the 'wantlist/tradelist' header when on IE. On Firefox, it just throws it onto its own row below the others.

    I've been contemplating a change to the look of my blog, but have found the layout of what I have to be simple and effective.

    Maybe in the fall.