WordPress.org

Ready to get started?Download WordPress

Forums

How to surround WP comment box with color? Help. (7 posts)

  1. margulies
    Member
    Posted 4 years ago #

    take a look at the comment section to this blog.

    http://www.blogussion.com/blogging-tips/100-lists-better-blogger/

    Wondering how the guy gets his comment section to be surrounded by the dark grey color (#5C5A5A)?

  2. margulies
    Member
    Posted 4 years ago #

    BTW here is a post on my site that has comments if this helps you.

    http://cashmakerelite.com/make-money-working-online/hello-world/

  3. TransPersonal
    Member
    Posted 4 years ago #

    The containing div that holds his comments section is assigned #5C5A5A as the background color through CSS. For example:

    The HTML:
    
    <div class="bgColor">
    comments are here
    comments are here
    comments are here
    </div>
    
    The CSS:
    
    .bgColor {
            background: #5C5A5A;
    }
  4. TransPersonal
    Member
    Posted 4 years ago #

    Okay this is what you have to do if you want the same. Go into your style.css file in the theme editor and find this:

    #comments {
    margin-left:0;
    margin-right:2.1em;
    }
    
    Change it to:
    
    #comments {
    margin-left:0;
    margin-right:2.1em;
    background: #5C5A5A;
    }
  5. margulies
    Member
    Posted 4 years ago #

    didn't find

    #comments {
    margin-left:0;
    margin-right:2.1em;
    }

    so I just placed

    #comments {
    margin-left:0;
    margin-right:2.1em;
    background: #5C5A5A;
    }

    in the custom.css (I'm running on the Thesis framework btw and so is blogussion.com)

    Anyway, it seems like instead of Surrounding the comment form, it seems like it changed the background of the comment form.

    http://cashmakerelite.com/make-money-working-online/hello-world/

  6. margulies
    Member
    Posted 4 years ago #

    Okay I think found out through Firebug that this guys comment form has this code in his css

    `.custom .comments .surround {
    background:#5C5A5A url(images/comments.gif) repeat-x scroll 0 0;
    border-bottom:1px solid #000000;
    clear:both;
    padding:10px;
    }'

    I changed .comments to #comments but still nothing.

    help?

  7. margulies
    Member
    Posted 4 years ago #

    Closer now..

    just added this to my custom.css

    #comment_list {
    height:100px;
    width:658px;
    padding-left:1em;
    }

    what it did was added padding around the comments, making it look a little closer to this site's comment area:

    http://www.blogussion.com/blogging-tips/100-lists-better-blogger/

    Now I just need to figure out a way to color the regular comments background so it looks a little more like the authors light-blue comment background.

Topic Closed

This topic has been closed to new replies.

About this Topic