Add white background to the main content area

• 

  lmslicer · Member · Nov 9, 2012 at 4:50 pm

  • Copy link
  • Add topic to favorites

  Hello,
  I’d like to add a white box around the main content area in my blog like this http://prebabyblog.com/

  I’m so new to CSS and I have gone through the tutorials but can’t figure it out. I just want the content area to have a white background so you can read the text better. My blog is hellobellygoodbyefeet.com

  Thank you!

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

• 

  houstonweaver · Member · Nov 10, 2012 at 2:31 am

  • Copy link

  See if this is what you want. In this I made the background of your content areas white with a black font color. Just change the second color to whatever color you want.

  #content {background-color: #fff;}
  #content .post-entry {color: #000;}

• 

  houstonweaver · Member · Nov 10, 2012 at 2:35 am

  • Copy link

  oops. now it doesn’t seem to be creating the background color. Sorry, let me check it again.

• 

  houstonweaver · Member · Nov 10, 2012 at 2:45 am

  • Copy link

  It is correct. Check it out and see if it looks like you want it to or if it has created any oddities. I see you have made your font color white, so maybe you are happy with that solution.

• 

  lmslicer · Member · Nov 10, 2012 at 2:16 pm

  • Copy link

  Thank you so much!! That is exactly what I was looking for! However, there is a small part of the date that isn’t white. How do I fix that?
  http://www.hellobellygoodbyefeet.com

• 

  lmslicer · Member · Nov 10, 2012 at 2:28 pm

  • Copy link

  Actually, is there a way for the white background to just go around the content area? Leave the tags and date to the left with the blue background?

• 

  houstonweaver · Member · Nov 10, 2012 at 8:12 pm

  • Copy link

  Could you remove what we put in before and use this to see if it will turn the area white that you want white?

  #content .post-entry {background-color: #fff;}

• 

  lmslicer · Member · Nov 11, 2012 at 1:23 am

  • Copy link

  It doesn’t seem to cover the entire content area. The left side is a bit short and some of the pictures hang over the edge. Also, is there a way to include the title of the post without the date?

  Thank you so much for your help.

• 

  houstonweaver · Member · Nov 11, 2012 at 1:30 am

  • Copy link

  Oh dear, I had hoped that would do it. To keep the date from displaying:

  .post-date {display: none;}

• 

  lmslicer · Member · Nov 11, 2012 at 2:07 am

  • Copy link

  I’m sorry, I don’t think I’m being very clear. I want the date to appear just not included in the white background. I want the “These are a few of my favorite things” and the content of the post to have a white background. Nothing else.

  Thanks again for your time. I really appreciate it.

• 

  houstonweaver · Member · Nov 11, 2012 at 4:22 am

  • Copy link

  i cannot see a way to exclude the date from the white background. It seems to be a part of the block that includes the title. I did enlarge the left margin a bit for the white box behind the text of the article. I included the Title with a white background. That one extends over to the left over the date and I have made it readable on the white background.

  #content .post-entry {background-color: #fff;}
  #content .post-entry {color: #000 !important;}
  .post-entry {padding: 20px;}
  .post-title h1 {background-color: #fff;}
  .post-date * {
  	display: block;
  	padding: 0 15px;
  	position: relative;
          background-color: #fff !important; color:#000;}

  or a slight variation:

  #content .post-entry {background-color: #fff;}
  #content .post-entry {color: #000 !important;}
  .post-entry {padding: 20px;}
  .post-title {background-color: #fff;}
  .post-date * {
  	display: block;
  	padding: 0 15px;
  	position: relative;
          background-color: #fff !important; color:#000;}

  Look at these and see if one is tolerable.

• 

  lmslicer · Member · Nov 12, 2012 at 3:53 pm

  • Copy link

  Perfect!! Thank you, thank you, thank you!!

• 

  houstonweaver · Member · Nov 12, 2012 at 6:53 pm

  • Copy link

  Whew!