Add stylish comment box to bloggers

css code for Blue comment Box


.comments h4 { color:#ffffff; display: inline-block !important; background:#3BB7D9; padding:10px; } .comments .comment .comment-actions a { background:#3BB7D9; border-radius: 5px; color: #ffffff; font:12px georgia; margin-right: 8px; padding:5px; text-decoration: none !important; } .comments .comment-block { background:#f8f8f8; border: 1px solid #f0f0f0; padding: 10px; } .continue { border-top:none !important; } .continue a { background:#3BB7D9; border: 1px solid #3BB7D9; border-radius:5px; color: #ffffff; display: inline-block !important; margin-top: 8px; padding:5px; text-decoration: none !important; font:12px georgia ,arial; } .comment-header a { color: #222222 !important; } #comments .avatar-image-container img { border:2px solid #f0f0f0; border-radius: 50px 50px 50px 50px; height: 58px; max-width: 58px; } .comments .avatar-image-container { border: 2px solid #FFFFFF; border-radius: 34px 34px 34px 34px; box-shadow: 1px 1px 3px #dcdcdc; float: left; margin-left: -7px; max-height: 61px !important; overflow: hidden; width: 61px !important; }

css code for Blue comment Box


.comments .comment-block { background: #F9F9F9; color: #555; box-shadow: 0 4px 10px #EEEEEE; position: relative; margin-top: 10px; margin-left: 60px; padding: 10px; border: 4px solid #EEEEEE !important; border-radius:10px; font: 1.190em/1.2 Cambria,Georgia,sans-serif;} .comment-thread li .comment-block:before { position: absolute; display: block; left: -26px; color: #EEEEEE; content: "\25C4"; font-size: 30px;} .comments .avatar-image-container { width: 60px; height: 60px; max-height: 60px; margin:0px 0px 0 -28px; padding: 0px; border: 7px solid #EEEEEE; border-radius:60px;} .comments .avatar-image-container img { overflow:hidden; width: 60px; height: 60px; max-width: 60px; border:0 !important; border-radius:60px;} .comments .comment-thread.inline-thread { background: none;} .comments .continue { border-top: 0px solid transparent;} .comments .comments-content .datetime { float: right; font-size: 11px;} .comments .comments-content .user a{ font-size: 15px; color: #498EC9;} .comments .comments-content .datetime a:hover{ color: #777; text-decoration: none;} .comments .comments-content .comment:first-child { padding-top: 0px;} .comments .comments-content .comment { margin-bottom: 0px; padding-bottom: 0px;} .comments .continue a { padding: 0px;} .comments .comments-content .icon.blog-author { background-image: none;}

aa


.comments h4 {

       color:#ffffff;
       display: inline-block !important;
       background:#292832;
       padding:10px;

}

.comments .comment .comment-actions a {

       background:#292832;
       border-radius: 5px;
       color: #ffffff;
       font:12px georgia;
       margin-right: 8px;
       padding:5px;
       text-decoration: none !important;

}

.comments .comment .comment-actions a:hover {


        background:#808080;
        border-radius: 5px;
        color: #292832;
        font:12px georgia;
        margin-right: 8px;
        padding:5px;
        text-decoration: none !important;

}

.comments .comment-block {
     
       background:#f8f8f8;
       border: 1px solid #f0f0f0;
       padding: 10px;

}

.continue { border-top:none !important; }

.continue a {

       background:#292832;
       border: 1px solid #292832;
       border-radius:5px;
       color: #ffffff;
       display: inline-block !important;
       margin-top: 8px;
       padding:5px;
       text-decoration: none !important;
       font:12px georgia ,arial;
}

.comment-header a { color: #222222 !important; }

#comments .avatar-image-container img {

       border:2px solid #292832;
       border-radius: 50px 50px 50px 50px;
       height: 58px; max-width: 58px;
}

.comments .avatar-image-container {

       border: 2px solid #FFFFFF;
       border-radius: 34px 34px 34px 34px;
       box-shadow: 1px 1px 3px #dcdcdc;
       float: left;
       margin-left: -7px;
       max-height: 61px !important;
       overflow: hidden; width: 61px !important;
}