Add white background to the main content area

  • Author
    Posts
  • #1067302

    lmslicer
    Member

    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 hellobellygoodbyefeet.com.

    #1067516

    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;}
    #1067517

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

    #1067518

    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.

    #1067522

    lmslicer
    Member

    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

    #1067523

    lmslicer
    Member

    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?

    #1067524

    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;}

    #1067529

    lmslicer
    Member

    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.

    #1067530

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

    .post-date {display: none;}

    #1067531

    lmslicer
    Member

    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.

    #1067532

    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.

    #1067558

    lmslicer
    Member

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

    #1067562

    Whew!

The topic ‘Add white background to the main content area’ is closed to new replies.