The New Look and Year 2009

Phew!!! .. Yes Phew. Its the first word that i chose to start the first post of the new year. Well technically new year was almost a month ago, still from the ‘first post of the year’ point of view, its still new year. Oh crap, that line was awfully jumbled up. Hey but i dont mind that line being like that, i dont want to read through that line again and then rephrase it and make it more vivid. No i dont want to do that.

So what happened? I took my blog to the drawing board. 25th Dec ’08 christmas eve, i decide to redesign this blog. Though the previous design was very simple and required less than 3-4 hrs to come up with, this one took nearly 4 weeks. Shit! that was like a month.

Made a sketch of it on paper, then to photoshop, then back to the layout on paper, back to photoshop. I designed one layout and when i looked at the finished one, i almost puked. Then redesigned the whole thing and here it is the new look.

On paper this is how the design looked like

18012009001 300x225 The New Look and Year 2009

Then i decided to have the sidebar to the right. The first version on Photoshop looked like this and i hated it

v 1 246x300 The New Look and Year 2009

Then i struck the right note with this one.

v 2 300x292 The New Look and Year 2009

Then it was the wrestle with stylesheets and upgrading the then current SIM3.0 to this one,which i call SIM4.0. Lets talk about the changes,

1. Latest Twitter updates on the header – i basically took the HTML badge given by twitter and put the code there.

2. Sidebar will now sport the pages with a logo for each. I disabled the widget functionality of the sidebar.

3. The Footer -This is where most of the work went into. I mutated the footer to have 3 columns. Into these columns i can add the widgets. It was quite simple infact once i figured that out.

The main footer file is – footer.php. Each of the 3 columns are again separate php file. The main footer.php calls these files like this -

<?php include (TEMPLATEPATH . '/1-footer.php'); ?>
<?php include (TEMPLATEPATH . '/2-footer.php'); ?>
<?php include (TEMPLATEPATH . '/3-footer.php'); ?>

to make each of these accept widgets, this line was added -

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(3) ) : else : ?>

The ‘dynamic_sidebar(3)’ made it sidebar-3 in the add widgets page. It was joy when i figured this out. I know i could have referred the WordPress manuals. But then i wont get the joy of discovering things.

4. My CSS is split into two. Why? One for all the browsers and one for IE. I officially label IE as a pain. This is what i observed. An image was to the left in Firefox, but to the right in IE. “margin-left:100px” put something in the middle for Firefox and at the page boundary in Internet Explorer

Any way after all that pain, now i have the site up with the new look and it feels GREAT!!!

Happy New Year Guys…

- xxx Jerry -

  • http://witnesstimes.com Mohan

    Yeah, this new theme looks so cool chetta! Awesome work! :)

  • http://www.sreeragrajan.blogspot.com Sree@LoveActually…

    New look is great…. loved the one u send it to me, which i am using as my wallpaper… lovely….