Wordpress 3 Columns Cool Water Theme
Posted in Wordpress Themes | By AhTim @ June 6th, 2008
It was 6 months ago since my last wordpress theme upgrade. As you can see here, I have upgraded my wordpress theme. This new 3 Columns Cool Water Theme customized by myself based on two columns Cool Water theme designed by Arpit Jacob.

The reason why I choose this Cool Water theme because it give sense of simple, easy to use and fresh like a cup of cool water.
What To Customize ?
Basically, there are few things I have customized. I removed the top menu bar. Added in one more sidebar on right. Lastly, fine tune some color series that match my blog in CSS.
This seems to be an easy job. But for a non-CSS guy like me, it is very painful, need a lot of hard work. Especially on how to customize it to 3 columns. I have to study the wordpress theme tutorial, do a lot testing (because there is a lot methods of doing things) and find the easiest and most suitable for me.
How to Make 3 Columns ?
This is an interesting topic for many blogger. Many blogger like to use 3 columns but many nice blog theme only provide 2 columns. So what do you do? Do you give up and choose a 3 columns theme yet you don’t like very much?
During my research, I found there is not much help or tutorial discuss about this topic. Some did, but lack of complete explanation. It is quite hard for a CSS beginner like me to customize 3 columns with these lack info. After struggle for days, finally I have complete it successfully. I would like to share my experience so that you could customize blog theme you like to 3 columns too!
3 files to edit: index.php, single.php, page.php, sidebar.php and style.css.
Edit Index.php – Make sure the php code (get sidebar) below is at bottom just before get footer.
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Edit sidebar.php – Define your sidebar content by add in the php codes below. Put in your widget or plugin codes in between <div> </div>. I prefer to have full control on sidebar, also have no time to make it widget enable. So you will have to insert whatever you want manually.
<div id=”leftsidebar”>
</div>
<div id=”rightsidebar”>
</div>
Edit Style.CSS – Look for “sidebar” section. Add in codes below at beginning of sidebar section.
/* Begin LEFT Sidebar */
#leftsidebar
{
float: left;
padding: 20px 5px 10px 10px;
width: 155px;
}/* End LEFT Sidebar */
/* Begin RIGHT Sidebar */
#rightsidebar
{
float: left;
padding: 20px 0 10px 5px;
width: 155px;
}/* End RIGHT Sidebar */
After that, define the style of your sidebar details, such as color, font, size,etc. Normally, there will be 1 set of predefine parameter for 1 sidebar in 2 columns wordpress theme. So you need to change it to apply for 2 sidebars.
For example, the original sidebar parameter for h2 is
#sidebar h2 {
margin: 15px 5px 10px 5px;
font: bold 1.4em ‘Trebuchet MS’, Tahoma, Sans-serif;
color: #555;
}
Now, you need to change the id to #leftsidebar h2, #rightsidebar h2. Change the id for all #sidebar, including p, li, ul, sidemenu, etc.
#leftsidebar h2, #rightsidebar h2 {
margin: 15px 5px 10px 5px;
font: bold 1.4em ‘Trebuchet MS’, Tahoma, Sans-serif;
color: #555;
}
That’s it. Your 3 columns theme is up now!
Download Free Wordpress Theme
Download my customized 3 Columns Cool Water wordpress theme for Free. You can use for your own blog or analyze how I customize to 3 columns.
Installation
Unzip and upload the extracted folder (3 Columns Cool Water) to wp-content/themes, click on “Design†in the wordpress admin panel and select it from the list. Done.
As I mentioned above, since I have not create widget enable sidebar you have to insert codes in sidebar.php at your own.
My two cents
It is not easy to customize. I like the Cool Water theme very much. Since no one make 3 columns, so I decide to make it 3 columns no matter how hard.
I have learned a lot on php coding and CSS from this experience. It really fulfill my needs perfectly!
So, do you like my 3 Columns Cool Water theme design?
Random Articles
Tags: 3 columns cool water, free download theme, wordpress theme
June 14th, 2008 at 3:50 pm
Your customized theme got problem.
The index.php has a syntax error at line 33.(I can’t use it at the beginning, but i modified it a bit, and it start working)
I love your theme so much, because I love simple, colourful, 3 columns theme, so i’ve decided to use it for my blog. I hope you don’t mind i use the same theme as yours =)
June 14th, 2008 at 10:33 pm
@Edwin Cheah: You’re welcome to use my customized theme. Hope you like it.
Don’t forget to link me back to show your appreciation.
August 26th, 2009 at 2:07 am
I am having 1 suggestion for you.. you can separate trackbacks and comments from your comment column, i think are using highlight author comment plugin to highlight your comments.. but using that you can’t do it completely for your comment’s you can’t highlight your admin link… you can work on that..