Exploring The Internet

Exploring the web – Growing my experience toward my online business


How to Change Your Cutline Theme’s Background Color?

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

The Ultimate Store for the Ultimate Fan!

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: 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

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

Related Posts

  1. How to Make Cutline’s Sitemap and Archives Pages Functional?
  2. Interested In How to Change Your Header Images?
  3. Cutline – The Most Downloaded WordPress Theme!
  4. How to Transfer My WordPress Blog to a New Domain?
  5. Solution For WordPress Uploading Image Problem

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