Changing background color of Comment boxes

  • Unknown's avatar
    khartline · Member ·

    I’ve been changing color and background codes and can not figure this one out. I’m almost to the point of accepting the ugly, clashing brown comment boxes with my pretty Blog design, but not yet. :)

    If you look here: http://khartline.com/2008/12/24/twas-the-night-before-christmas/#comments you’ll see that the box is brown. I’d like it to be white. Alternating comments seem to have clear/transparent backgrounds, which is OK with me, but would really like to resolve the brown issue.

    Brown is great for UPS, but not for my blog. ;) Help?!
    Karen

  • Unknown's avatar
    aw1923 · Member ·

    this will work, of course you will have to add the text styling and stuff like that

    #comment-16.alt {background: white; }

  • Unknown's avatar
    khartline · Member ·

    Confused as to where I would add/edit this. Can you point out where I should change? Current CSS is:

    #commentform #comment {
    width:450px;
    font-family:”Lucida Grande”, “Lucida Sans Unicode”, “Trebuchet MS”, Verdana, Helvetica, sans-serif;
    font-size:14px;
    margin:0;
    padding:10px;
    }

    #commentform #author,#commentform #email,#commentform #url,#commentform textarea {
    background:#fff;
    border-bottom:1px solid #717171;
    border-left:2px solid #717171;
    border-right:1px solid #717171;
    border-top:2px solid #717171;
    color:#000000;
    }

    #commentform textarea {
    width:100%;
    }

    #commentform-container {
    margin-left:40px;
    }

    #commentform-container a {
    color:#000000;
    text-decoration:none;
    }

    #commentform-container a:hover {
    background:#fff;
    color:#74c0fa;
    text-decoration:none;
    }

    #commentform-container p {
    font-size:10px;
    }

    #commentlist a,#postnav a {
    background:#fff;
    color:#000000;
    font-weight:bold;
    margin-left:10px;
    text-decoration:none;
    }

    #commentlist a:hover,#postnav a:hover {
    background:#fff;
    color:#717171;
    }

    #commentlist li {
    padding-left:5px;
    }

    #commentlist li ul {
    border-left:3px solid #eee;
    font-size:12px;
    list-style-type:none;
    }

    #comments-post {
    color:#fff;
    margin:5px 25px 35px;
    }

    #comments-post .nocomments {
    background:url(‘img/closed.jpg’) no-repeat;
    font-size:10px;
    margin-left:0;
    padding-left:20px;
    }

    #comments-post p {
    font-size:14px;
    margin-left:10px;
    text-transform:none;
    }

    #comments-post p a {
    background:#fff;
    color:#000000;
    text-decoration:none;
    }

    #comments-post p a:hover {
    background:#fff;
    color:#A30531;
    }

  • Unknown's avatar
    aw1923 · Member ·

    just add it on a seperate line in your CSS. When I did it I added it to the end of your CSS, just add it anywhere in your CSS. And did you know on your theme theres not a way to get back to your front page after your finishing reading the post like a home button or a clickable header I guess people could just click on the back button, but some people aren’t that savvy :D And in FF3 your about page link is off the page, I have to scroll to the right.

  • Unknown's avatar
    khartline · Member ·

    Rock…the background changed, but now my text is white. Any secret to add to comment-16 to make text black or A30351 (pink)

  • Unknown's avatar
    vivianpaige · Member ·

    There is also no comments link on the post. And when I look at that post in FF3, there is an image and some text over top the Leave A Comment link.

  • Unknown's avatar
    vivianpaige · Member ·

    Replace the word white with the code.

  • Unknown's avatar
    vivianpaige · Member ·

    Ignore that – I misread what you wrote.

  • Unknown's avatar
    khartline · Member ·

    Well, I tried it anyways and the white changed to pink, which works. Now wondering if there’s a way to add a background to the alternating comment (which is now transparent).

    Also, when I added a new comment, the brown box came back: http://khartline.com/2008/12/24/twas-the-night-before-christmas/#comments. Probably due to the code being for comment-16.

    Thanks for your help! I’ve tried to figure this out on my own and am at my wit’s end. *sigh*

  • Unknown's avatar
    aw1923 · Member ·

    whats with the third comment? Anyways, I tried this, but it doesn’t creat seperate cute little pink comment boxes, and what with the third comment remaining brown for some reason while the other two are pink, anyways the -16 part was too specific, I put this in and your third comment is still brown,

    div #comments-post{
background:#A30351;
}

    ever thought about doing your blog using the sandbox theme? Probably would make everything a lot easier. :(

  • Unknown's avatar
    khartline · Member ·

    I’ve hacked my way through the CSS this far and would rather not start over with Sandbox. I’ll continue to work on this and see what I can figure out. May have others who can help too. :)

  • Unknown's avatar
    aw1923 · Member ·

    Hoopla!!!
    Sorry for the excessive help, but due to my nature of never giving up X( I was looking customizing the original theme that your using and I came up with this, now seriously this time, it will work cause when I tried it on you theme it worked.

    find the respective classes and replace with this, 

    li.alt{
	background: white; color: black;
	padding-bottom: 15px;
	margin-bottom: 10px;
}
    #comments-post {
	margin-top: 5px;
	margin-right: 25px;
	margin-left: 25px;
	margin-bottom: 35px;
	color: White; background:red;
}

    your theme automatically makes it so every other comment color is the same, so thats why the li.alt needed to be changed. HYL

  • Unknown's avatar
    khartline · Member ·

    Ahhhh….so close! As soon as I type in a new comment, it shows the white background again instead of the pink.
    http://khartline.com/2008/12/24/twas-the-night-before-christmas/#comments

    Also noticed the numbers for the comments are missing.

    I took out the background:red in the #comments-post as it turned the entire bottom/comment area red.

    You’re like me…working on it til it’s right. Really appreciate the help. I have an email sent in for more help. You’ve definitely earned Rockstar status in my book! :)

  • Unknown's avatar
    thesacredpath · Member ·

    They did something strange with the comments and you will also have to change the color here: 

    li.alt {
background:white none repeat scroll 0 0;

    Just change it to the same background stuff as #comment-16.alt and you should be good to go.

  • Unknown's avatar
    aw1923 · Member ·

    you have to remove this, 

    #comment-16.alt {
background:#A30351;
}

    put this and just change the colors 

    li.alt {
background:pink;
color:black;
padding-bottom:15px;
margin-bottom:10px;
}
  • Unknown's avatar
    thesacredpath · Member ·

    #comment-16.alt controls the color of the blog owner comments.

    li.alt controls the color of the visitor comments.

    Personally I like to have a different colored backgrounds to differentiate between the blog owner and visitor comments.

  • Unknown's avatar
    thesacredpath · Member ·

    That should be: Personally I like to have different colored backgrounds to differentiate between the blog owner and visitor comments.

  • Unknown's avatar
    aw1923 · Member ·

    But if that was true then all of her comments would have been pink…right? Either way, I’m not staying up to see the outcome of this, or else I’ll be up all night with anticipation LOL

    Good Night :)

  • Unknown's avatar
    khartline · Member ·

    Looks like it’s been fixed with alternating backgrounds. Can’t tell you how much I appreciate this.

    Thank you both!!!
    Karen

  • The topic ‘Changing background color of Comment boxes’ is closed to new replies.