How do I override the title background color?

• 

  fastforwardventures · Member · Jan 12, 2011 at 7:06 am

  • Copy link
  • Add topic to favorites

  I’m vaguely familiar with CSS and haven’t actually used it in a few years. I’ve never had experience overriding code, so I’m not sure if there is more involved in that than just simply writing CSS.

  I want to override the colors in the title section at the top of my blog’s page. How do I change the color from brown to red? Also, how would I go about changing the color of the subtitle text which is a lighter brown?

  Is there any easier way to go about just changing around colors on the templates apart from overwriting the CSS code? Just curious!

  Thanks for your help!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 12, 2011 at 7:44 am

  • Copy link

  We need a link to the blog please.

• 

  fastforwardventures · Member · Jan 12, 2011 at 4:21 pm

  • Copy link

  I’m sorry, I thought it added it automatically when it asked me which blog it was for.

  Here you go~

  http://fastforwardventures.wordpress.com/

• 

  thesacredpath · Member · Jan 12, 2011 at 6:37 pm

  • Copy link

  First off there is nothing to worry about in “overriding” CSS. Make sure “add to existing…” is checked and wordpress will take care of that for you. Copy the CSS out and put it into a plain text file (view original css) and then you can pull the bits you need out of the existing CSS and put into the CSS edit window. Don’t copy and paste an entire section (selector), just the definitions that you are changing. If you need to add a definition, simply add that definition in.

  The lighter chocolate brown color is set here:

  #header {
  background: none repeat scroll 0 0 #CC0000;
  }

  The dark brown as the very top is here:

  #follow {
  background: none repeat scroll 0 0 #2F2922;
  }

  The subtitle text color is here

  #description {
  color: #796957;
  }

• 

  fastforwardventures · Member · Jan 13, 2011 at 9:32 pm

  • Copy link

  Wow, that’s great! I was able to change the colors. Thank you so much.

  My only question now is how do I go ahead and view the CSS code? I know I can view the page source, but not sure how to view the CSS.

  There are a few other color I would like to change, like the color of the links at the top of the page (Follow Twitter, RSS) and the text color for the Blog entry dates and the text that says by fastforwardventures underneath each blog entry.

• 

  fastforwardventures · Member · Jan 13, 2011 at 9:34 pm

  • Copy link

  Also, isn’t there an add-on on Firefox that will allow you to see where the divtags are on a website?

• 

  thesacredpath · Member · Jan 13, 2011 at 9:49 pm

  • Copy link

  On the CSS edit page there is a link to the original CSS. You can click on that link and the copy out the stuff there and paste it into a plain text file for reference.

  The add-on for Firefox is called Firebug and it makes editing CSS far easier. You can even try out changes in realtime and immediately see the results.

  To see the changes, click the preview button. Sometimes you have to force refresh the preview page in order to see the changes. Preview has been flakey lately.