How to Change Your Cutline Theme’s Background Color?

Lanna — Sun, 28 Dec 2008 23:58:25 +0000

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:

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.

SEO For Wordpress Secrets Video Tutorials on CD

US $7.00
End Date: Friday Jul-30-2010 9:25:18 PDT
Buy It Now for only: US $7.00
Buy it now | Add to watch list

The Wordpress Bible Videos Tutorials For Newbie

US $7.98
End Date: Saturday Jul-31-2010 1:39:29 PDT
Buy It Now for only: US $7.98
Buy it now | Add to watch list

Share and Enjoy:

Exploring The Internet » change navigational bar background color

How to Change Your Cutline Theme’s Background Color?