Exploring The Internet

Exploring the web – Growing my online experience




How to Change Your Cutline Theme’s Background Color?

December 28th, 2008 · No Comments · How to, WordPress Themes, WordPress Tips



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: 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 as of January 12, 2009, Cutline versions 2.2 and 1.4 3-Column were released and they are compatible with WordPress 2.7 since.

A Daughter's Worth: A Bible Study for Teenaged Girls

$18.00
End Date: Thursday Jul-27-2017 4:10:28 PDT
Buy It Now for only: $18.00
Buy It Now | Add to watch list

WordPress Websites Step-by-Step: The Complete Beginner's Guide to Creating a...
$6.77
End Date: Thursday Jul-27-2017 15:38:18 PDT
Buy It Now for only: $6.77
Buy It Now | Add to watch list

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • NewsVine
  • Reddit
  • StumbleUpon
  • Google Bookmarks
  • Yahoo! Buzz
  • Twitter
  • Technorati
  • Live
  • LinkedIn
  • MySpace

Tags: ···

No Comments so far ↓

There are no comments yet...Be the first to voice your opinion by filling out the form below.

Leave a Comment

Your e-mail address will not be published. Required fields are marked *

Comment moderation is in use. Please do not submit your comment twice.

*






Custom Search