Switched from 2 to 3 Column Wordpress Theme Easily
April 16th, 2007I modified my wordpress template to incorporate a 3 column wordpress theme today. As more stuff was available to add to my wordpress blog, the long time 2 column theme was limiting the blog growth. Check out the new format as I now talk about the benefits of 3 columns and how I converted it easily.
The easiest way was to select a new wordpress theme, upload by ftp to the themes folder and switch to the new theme in one click! But I was trying to find a simple solution to convert from 2 columns to 3 columns without switching to an entirely new wordpress theme, as that would require lots of tweaking to customize the blog again to a familiar feel.
I decided to use CSS to split the sidebar into two columns rather than use tables. I found some amazing 3-column wordpress themes out there and studied the CSS style sheets of these themes to arrive at a simple solution. I created two columns with fixed widths (via div tags) within the sidebar and float-ed them right and left. Fill in the content and its done. I just needed to edit the CSS stylesheet and sidebar.php, nothing more. Remember to backup the original file before tweaking it.
I also got the flexibility to add full width sidebar links for my latest posts and even fitted in a 336px width Chitika unit. I could easily break away from the 2 split css columns by using the “clear:both” tag in another full width div box.
Now I can hopefully attract some Blogads advertisers by placing these ads in a premium top right sidebar position above the fold (which I am told Blogads guys really like). If I manage to get some Blogads advertisers, these large ads can easily align along the side without affecting the links to my search and feed subscription options which I want to stay on top also. I now have more space to fit in the long list of categories and archives links. The scrolling has reduced as I fit in more content is a smaller space.
A disadvantage of the 3 columns is that the effective width of the blog has increased and readers with 800×600 screen resolutions (used by around 7-8% of my readers) now get some horizontal scrolling to do.
Can you believe this was originally a Blix theme which I have heavily customized over the last year. You don’t need a professional web designer to make your design unique, you just need to modify the CSS really well.
What are your thoughts on the new wordpress design? Maybe I should add a dash of more color…
Subscribe RSS feed
The theme seems to be breaking in IE6 (I am sure many visitor probably are still using IE6)
Even the theme I have seems to always break (Still haven’t found a way to fix it)
whenever the content of the main div exceeds the max size, i guess it pushes down the sidebar !
I’m not sure that why you were not using three column theme before. 3 column theme is always useful, as it helps you integrate lots of things in the sidebars.
I’m surprised that you actually made it look so different than blix ! Great work!
I like it!
Just FYI, the right sidebar column doesn’t display correctly in IE6 (I know, who uses it besides my work?) :)
It forces it down below the left column.
Otherwise, looks great (including the colors)!
Wow… It looks great in a 3 column format. I might switch mine too. I always liked 3 better than two.
I made mine fluid from fixed a few weeks ago and like that change too.
I like the 3 column theme better, because it allows me to look at the latest posts, the caegories, search, subscribe, and view the posts easily.
Am I missing something? I can see 2 cols only!
Featured Gadget is overlapping…
Look forward to see the final result.
Alpesh
I cannot see any background images except of the header, why not switch to fluid layout then? This way you’ll have a range from 800 to 1600 px wide.
Thanks for your comments. I have increased the width of the main container more. Now it should look fine. Please let me know any further problems.
yes its fine. i am feeling good.