MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

This is a default style for Thread Comments Blogger. With this style frame your comment becomes more intuitive when there is a clear distinction between comment and reply comment reply. Reviews of the author has been added ribbon to distinguish them from the other reviewers. This style is designed in accordance with his style has long pursued this: simple , clear and modern . This style is the original design for your template which will later apply Thread Comment as default, hope it fits the style of the majority of blog.



Add the following code before ]]> </ b: skin> in your template.

# Comments {overflow: hidden} 
# comments h4 {display: inline; padding: 10px; line-height: 40px} 
# comments h4,. comments. comment-header. comments. comment-thread.inline-thread. comment {position : relative} 
# comments h4,. comments. continue a {background: # FFA730 } 
# comments h4,. comments. user a,. comments. continue a {font-size: 16px} 
# comments h4,. comments. continue a { font-weight: normal; color: # fff} 
# comments h4: after {content: ""; position: absolute; bottom:-10px; left: 10px; border-top: 10px solid # FFA730 ; border-right: 20px solid transparent; width: 0; height: 0; line-height: 0} 
# comments. avatar-image-container img {border: 0} 
. comment-thread {color: # 111} 
. comment-thread a {color: # 777 } 
. comment-thread ol {margin: 0 0 20px} 
. comment-thread. comment-content a,. comments. user a,. comments. comments-thread.inline-thread. user a {color: # FFA730 } 
. comments . avatar-image-container. comments. avatar-image-container img {width: 48px; max-width: 48px; height: 48px; max-height: 48px} 
. comments. comment-block,. comments. comments-content . comment-replies. comments. comment-replybox-single {margin-left: 60px} 
. comments. comment-block,. comments. comments-thread.inline-thread. comment {border: 1px solid # ddd; background: # f9f9f9; padding: 10px} 
. comments. comments-content. comment {margin: 15px 0 0; padding: 0; width: 100%; line-height: 1em} 
. comments. comments-content. icon.blog-author {position : absolute; top:-12px; right:-12px; margin: 0; background-image: 
. Comments-content. Inline-thread {padding: 0 0 0 20px} 
. comments. comments-content. comment-replies {margin-top: 0} 
. comments. comment-content {padding: 5px 0; line-height: 1.4 I} 
. comments. comment-thread.inline-thread {border-left: 1px solid # ddd; background: transparent} 
. comments. comment-thread.inline-thread. comment {width: auto} 
. comments. comment-thread. inline-thread. comment: after {content: ""; position: absolute; top: 10px; left:-20px; border-top: 1px solid # ddd; width: 10px; height: 0px} 
. comments. comment-thread. inline-thread. comment. comment-block {border: 0; background: transparent; padding: 0} 
. comments. comments-thread.inline-thread. comment-block {margin-left: 48px} 
. comments. comment-thread. inline-thread. user a {font-size: 13px} 
. comments. comments-thread.inline-thread. avatar-image-container. comments. comments-thread.inline-thread. avatar-image-container img {width: 36px; max-width: 36px; height: 36px; max-height: 36px} 
. comments. continue {border-top: 0; width: 100%} 
. comments. continue a {padding: 10px 0; text-align: center } 
. comment. continue {display: none} 
# comment-editor {width: 103%! important} 
. comment-form {width: 100%; max-width: 100%}

#FFA730 is the dominant color of this style Thread Comment, you can change it as you wish.

Source: http://blog.duypham.info