Exploring The Internet

Although Cutline is not compatible with WordPress 2.7, I don’t plan to change it because I have customized this theme a lot for my blog. I upgraded my blog to WordPress 2.7 not long ago, I don’t see anything wrong with it yet. Maybe time will tell. Here are the steps that I’ve followed to change the background color in my Cutline theme – by the way I am using Cutline 3-Column Right:

• 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: 950px; 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.