• Log in to your WordPress 2.7 admin area.

• Expand Appearance (at the left side bar)if it is collapsed.

• Click on Editor/Stylesheet(style.css), find body { background: #fff; and chang #fff to be any other color you like.

• Now the problem is that your entire blog page color will be changed to whatever body color you’ve chosen. You need to find the following codes and add background: #fffff to the end of each code (change fffff to be any other color you prefer). See the changes below:

#container { width: 970px; margin: 15px auto 0 auto; background: #fffff } #content_box { width: 970px; text-align: left; float: left; clear: both; background: #fffff } #content { width: 500px; padding: 0 20px 0 0; float: left; background: #fffff } #sidebar { width: 210px; padding: 0 0 0 15px; float: left; background: #fffff } #footer { width: 970px; padding: 1.2em 0 0 0; border-top: 2px solid #ccc; float: left; clear: both; background: #fffff }

• Now if you check your blog, you will find out that your navigational bar background color is still the same as your theme’s body color. Search the following codes and do the same procedure as above step:

ul#nav { list-style: none; width: 970px; padding: 0 10px; background: url('images/hr_dot_black.gif') repeat-x; border-bottom: 3px solid #000; float: left; clear: both; background: #fffff } ul#nav li { padding: 0.85em 40px 0.7em 0; font: bold 1.4em Helvetica, Arial, sans-serif; text-transform: uppercase; float: left; background: #fffff } ul#nav li a, ul#nav li a:visited { color: #000; text-decoration: none; background: #fffff } ul#nav li a:hover { color: #000; text-decoration: underline; background: #fffff } ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover { color: #090; text-decoration: underline; background: #fffff } ul#nav li.rss { padding: 0.85em 0 0.7em 0; float: right; background: #fffff } ul#nav li.rss a { padding: 0 18px 0 0; background: url('images/icon_rss.gif') 100% 50% no-repeat; background: #fffff }

• The last thing you need to do is to give your template some left and right margins. How can you do that? Find the code and see the changes I’ve made for you:

#content { width: 468px; padding: 0 15px 0 15px; float: left; background: #fffff }

I also find out that I needed to change the number in my footer section. See the change below:

#footer { width: 955px; padding: 1.2em 0 0 0; border-top: 2px solid #ccc; float: left; clear: both; background: #fffff }

Now go to check your blog again. Did it come out the way you like? Hope you enjoy it.

Update: On January 12, 2009, Cutline versions 2.2 and 1.4 3-Column were released and they are compatible with WordPress 2.7 since.

The Complete Idiot's Guide to Wordpress by Susan Gunelius (2011, Paperback)

US $24.94 End Date: Wednesday Feb-08-2012 10:58:52 PST Buy It Now for only: US $24.94 Buy it now | Add to watch list

WordPress 2.7 Complete

US $1.99 End Date: Tuesday Feb-14-2012 14:32:44 PST Buy It Now for only: US $1.99 Buy it now | Add to watch list