Forever CSS customization trouble

• 

  barefootandbrainy · Member · May 27, 2014 at 7:03 pm

  • Copy link
  • Add topic to favorites

  Hi there. I’m very new to CSS, and having some trouble figuring out how to make a couple of edits to my customization of the Forever theme on my blog: barefootandbrainy.wordpress.com . Specifically, I’m having trouble with the following:

  1. I cannot figure out how to change the background color in my widgets. If you visit the blog, you’ll see that the main text area, and the title area for the widgets are the same color, but that there is still a gray “border,” for lack of a better word, surrounding the footer widget areas. I can’t figure out how/where in the CSS to edit this.

  2. I would like to change the borders in the main body area to match the outside border and the menu border, but also am having some trouble figuring out how to do that.

  Thanks in advance for the help!

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

• 

  supportmyoffice · Member · May 27, 2014 at 7:12 pm

  • Copy link

  Please clarify for me, what you mean by the outside border and menu border.

  Thanks!

• 

  barefootandbrainy · Member · May 27, 2014 at 7:23 pm

  • Copy link

  Sorry. Inside the main text area of the page, there are several borders. (There is one running across the page above the post title, for example, as well as a vertical one along the right hand border of the post, dividing the post area from the sidebar.) Currently those lines are grey. I’d like them to be the same dark brown as the main text area border and the double border surrounding the menu. I was able to fairly easily change the border for the whole text area and the menu, but don’t know how to change these other border lines.

  The hex code that I’d like to change those borders to is #393127, if that is useful.

• 

  supportmyoffice · Member · May 27, 2014 at 8:45 pm

  • Copy link

  Let me address this one thing at a time.

  The right hand border of the post, as far as I can tell with Firebug, is actually the left border of the widget area.

  #secondary {
  border-left: 1px solid #393127
  }

  The double border at the top is actually the bottom border of the site-description box.

  #site-description {
  border-bottom: 1px solid #393127
  }

  The grey box near the footer is called #supplementary.

  I hope this helps. Let me know if you need clarification on any of this stuff.

• 

  barefootandbrainy · Member · May 28, 2014 at 12:50 pm

  • Copy link

  Thanks! The border fix got one of my borders in the correct color, and fiddling around with the supplementary tags got some of that footer widget area to the right background color. I’ve still got some odd gray bars in various places in the main text area (any ideas)? I’ve got Firebug but am still learning how to figure out what the specific parts of the CSS code are referring to…

  Thanks for you help!