Changing Footer Background Color

• 

  xxxbabe · Member · Feb 19, 2010 at 3:54 am

  • Copy link
  • Add topic to favorites

  Hello;
  Probably something very simple that I am overlooking, getting frustrated, but where do I change the footer background color? I am using the Benevolence theme.
  thanks for your help

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

• 

  timethief · Member · Feb 19, 2010 at 4:14 am

  • Copy link

  I think you may have meant to post this thread into the CSS customization forum is that correct?

• 

  xxxbabe · Member · Feb 19, 2010 at 4:38 am

  • Copy link

  yes, sorry

• 

  timethief · Member · Feb 19, 2010 at 4:41 am

  • Copy link

  No problem we can get a Moderator to move the thread. The volunteer who helps with CSS isn’t logged in and available right now.

• 

  devblog · Member · Feb 19, 2010 at 4:43 am

  • Copy link

  xxxbabe,

  You change the background in the #footer selector.

  BTW, it seems you copied the entire CSS in the CSS editor. If that’s correct, then I’d recommend you reading this:

  http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

• 

  timethief · Member · Feb 19, 2010 at 4:43 am

  • Copy link

  Oh I see you have started a new thread in the CSS customization forum so that means this one can be closed.

• 

  timethief · Member · Feb 19, 2010 at 4:43 am

  • Copy link

  *** head spinning ***

• 

  designsimply · Member · Feb 19, 2010 at 4:45 am

  • Copy link

  Wow, neat site. I love it! :)

  I’ll move this thread to CSS Customizations…

  So, in Benevolence, it’s a little counterintuitive, but the background color for the footer is set in #wrapper. So, try something like this:

  #wrapper { background-color:#ffffff; }

• 

  devblog · Member · Feb 19, 2010 at 4:48 am

  • Copy link

  So, in Benevolence, it’s a little counterintuitive, but the background color for the footer is set in #wrapper. So, try something like this:

  uhm… no. It’s in the #footer selector. If she did that in the #wrapper selector, the whole content area would be affected.

• 

  xxxbabe · Member · Feb 19, 2010 at 4:48 am

  • Copy link

  thank you both!

• 

  designsimply · Member · Feb 19, 2010 at 4:53 am

  • Copy link

  @devblog I tested it and it looked good. Did you try it? Note that http://debbdean.wordpress.com/ is changing the rest of the content areas with other colors already.

• 

  designsimply · Member · Feb 19, 2010 at 4:57 am

  • Copy link

  See what I mean? The wrappers and footer are kind of stacked in Benevolence. So, #wrapper does change the entire background, but then #insideWrapper switches the layer above it (except #footer) back to another color.

• 

  xxxbabe · Member · Feb 19, 2010 at 4:57 am

  • Copy link

  Yes, thank you again!

• 

  xxxbabe · Member · Feb 19, 2010 at 4:58 am

  • Copy link

  this has been making my head spin!, I was looking for a line to change when it had to be added.
  novice.

• 

  devblog · Member · Feb 19, 2010 at 5:06 am

  • Copy link

  yes, I did try it and the #footer selector does it.

  Now, I just tried setting the background color of the #wrapper selector to a different color. True, the footer’s background changed, but so did the header’s. You won’t see the effect in the contents area, because the #insideWrapper selector has a background color set. But what if later on she’d decided to set the #insideWrapper background to transparent?

  I don’t see the point of setting the background in the #wrapper’s definition when it can be done targeting the element itself, especially when such element has and ID selector defined already.

• 

  devblog · Member · Feb 19, 2010 at 5:10 am

  • Copy link

  too slow to type…

  another possibility is, what if for some reason images don’t load? the header would have the same background as the wrapper unless its selector has its own background set. Same logic applies to the footer.

  Another possibility is, what if in the future she wants to add an image to the footer? it would be inefficient to do it in the #wrapper definition. The footer has its selector, that is where it should be defined.

• 

  designsimply · Member · Feb 19, 2010 at 5:30 am

  • Copy link

  @devblog background-image on #footer does work. I think that’s better!

  There’s always more than one way to do something in CSS!

  Your solution is good. Thanks. :)