Cleaker is the Best Wordpress Theme You’ve Never Heard Of
…and I selfishly would like to keep it that way for fear of widespread adoption, but author Adam Walker Cleaveland deserves praise and recognition for his fine work. Prior to my search and conversion to Cleaker I was using 3ColumnK2 which is a mod of the ever so popular K2 theme which I still use for other sites. I decided to switch for a few reasons.
- I was having IE6 compatability issues where the sidebar was wonky and didn’t appear properly
- didn’t like being at the mercy of the modder to update based on newer K2 releases
- I started having some issues with the Sidebar Modules embedded in the latest K2 and once again didn’t want to be at the mercy of K2 for SBM upgrades
- I was bored
My search for Cleaker took a while. My requirements for a new theme were:
- 3 Column with content on the left followed by 2 sidebars on the right
- Flexibility to change the overall theme width as well as the columns
- Support for Widgets (hence Sidebar Modules)
- Navigation buttons in header based on Pages
- Ability to have a custom header image
- Looked good
This was a pretty time consuming process but in the end it was worth it. Cleaker met all of my requirements and then some. The first step was to prepare by porting over all of my existing theme customizations necessary to Cleaker. I’m pretty good about keeping a text file that identifies every customization I make to my theme along with details and the actual code. These items include content from third party services like Google Analytics, code necessary for plugins, scripts for widgets etc. I highly recommend you do this as it can be a nightmare trying to remember where all these pieces are without them being documented. So edited the templates necessary as well as created all the sidebar modules necessary.
After finishing that process I began to concentrate on remaining issues. Currently I’m having layout problems I haven’t gotten around to with my Slickr plugin which I use for my photos page as well as with my Lifestream plugin for my Lifestream page. I’ve been too lazy to fix them as I struggle nightly whether to work on content or design and content usually wins. Not a huge deal and not the fault of the theme.
Next up was customizing the theme a bit for my liking. As I began to dig through the style.css file I was very happy to see that it was lined with helpful commenting. The main thing I wanted to do was modify the column the overall width of the theme as well as the columns. For anyone else interested it is easily done by editing the style values below:
#wrapper – changed width to 1000px
#header – changed width to 1000px
#content – changed width to 550px
#sidbarRight – changed width to 170px
#sidebarLeft – changed width to 150px
#footer – changed width to 971px
ul#Nav – changed to 1000px
There was still one more step necessary for these column changes to work and that was to modify the “contentbg2.gif” & “header.gif” images. Since I was increasing the content column and extending the overall width of the theme, I needed to move the seperator and add to the right side of contentbg2.gif.
Cleaker contentbg2.gif modified
I also had to increase the width of my header.gif image from 900 to 1000 pixels
I made some other changes too such as incorporating the blockquote style which I liked more from K2 and changed the font weight to bold for the headlines. I will probably play with the color scheme and make some other changes as well in the future.
I am very happy with this theme and urge others that are looking for a great looking, and easily editable theme, to give it a try.
My modified version of Cleaker 2.1 Widgetized is available here
I'm currently Director of Web Production for the
PRIZE Foundation
Lifestream Blog
April 7th, 2007 at 6:17 pm
Wow – thanks for such a great post about Cleaker! I’m glad you’re such a fan of it – I am as well ;) Your mod of it looks great! Feel free to donate for Cleaker here (http://pomomusings.com/design/) so I can continue to put together great themes!
April 14th, 2007 at 9:02 am
Is it possible to share your theme? I like the increased column width.
April 14th, 2007 at 11:13 am
Goldy…you’re wish is my command. I have now provided a link to my version at the end of the post above. Enjoy.
April 14th, 2007 at 12:31 pm
awesome! thank you.
April 16th, 2007 at 1:22 pm
More Cleaker love ! :)
I do like your blockquote modification.
May 10th, 2007 at 3:23 pm
I based my new theme off of the wonderful cleaker too.
July 6th, 2007 at 10:39 pm
could you tell me how you made the right sidebar transparent?
Or how I could change its color?
Its somethng Im trying to edit from the original theme
thankyou.
August 31st, 2007 at 6:22 am
Thank you for the writeup on how you altered this theme. I’ve been tweaking this theme myself and appreciate you sharing your experience.
http://garlinggauge.com
September 23rd, 2007 at 8:44 pm
I am having a really difficult time getting the widgets to work. Did you have problems getting them to work? I dont think that I need the widget plugin since I am using WP 2.2.
December 27th, 2007 at 8:21 pm
[...] a theme that was simple, and easy to customize. I eventually found Cleaker, after reading this article on krynsky.com. I downloaded the Cleaker theme, and began playing around with the style.css file. [...]
February 14th, 2008 at 11:49 pm
I can’t get the sidebars to play nice in IE6!
How did you do it? I’d like to place the edits in an IE conditional statement.
Pretty please…
Martin
February 14th, 2008 at 11:51 pm
Oh, it seems even this site is not rendering properly in IE6… I loaded your site into my IE6, and the first sidebar gets pulled under the second sidebar. Same with my site…
Any ideas?
February 19th, 2008 at 1:20 pm
[...] Clever 2.1 – You can see it in action here. [...]
February 21st, 2008 at 3:37 pm
This is what I did to make IE6 work:
===========================================================
/* #wrapper {width: 950px;} */
#content {
width: 500px;
margin-right: -5px;
float: left;
color: #000;
padding: 20px;
}
#sidebarLeft {
width: 75px;
float: right;
color: #000;
background: #D7D8C4;
padding: 20px 20px 20px 5px;
overflow: hidden;
}
February 21st, 2008 at 3:39 pm
Oops, my syntax was stripped out. I used IE conditional statements to feed IE that bit of CSS. Please just assume the greater/less than signs here:
===========================================================
!–[if lte IE 6]
style type=”text/css”
/* #wrapper {width: 950px;} */
#content {
width: 500px;
margin-right: -5px;
float: left;
color: #000;
padding: 20px;
}
#sidebarLeft {
width: 75px;
float: right;
color: #000;
background: #D7D8C4;
padding: 20px 20px 20px 5px;
overflow: hidden;
}
/style
![endif]–
?php wp_head(); ?
/head
February 26th, 2008 at 2:50 pm
[...] krynsky.com, i changed the width to 1000px, which better accomodates the images we frequently include in our [...]
May 16th, 2008 at 8:07 am
[...] Mark Krynsky has a suggestion in this post – keep a text file of all the customization that you make to your theme, in case you [...]
March 28th, 2009 at 4:07 pm
Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I’v just started to learn this language ;)
See you!
Your, Raiul Baztepo