Bài 7 Viết CSS cho comment

[blog]
Tiếp tục mình sẽ viết CSS cho khung bình luận đẹp hơn sử dụng Font Awesome 5 Free.
Đầu tiên Thêm Font trước thẻ đóng </head> hoăc trước </body> đều được.

<script>

//<![CDATA[

function loadCSS(e,t,n){"use strict";var o=window.document.createElement("link"),s=t||window.document.getElementsByTagName("script")[0];o.rel="stylesheet",o.href=e,o.media="only x",s.parentNode.insertBefore(o,s),setTimeout(function(){o.media=n||"all"})}loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css");

    //]]>

</script>

Tiếp theo thêm CSS trong thẻ <b:skin>

/* Comment css */

#comments{float:left;width:100%;display:block;clear:both;padding:20px;margin:0;margin-top:20px;background:#fff}

#comments h3{margin-bottom:20px}

.comment-form h4{display:none}

.comments-system-facebook #comments{width:100%;margin:0}

.comments .comments-content{float:left;width:100%;margin:0}

.comments .comment-content{display:block;font-size:14px;color:#000);line-height:1.6em;margin:12px 0 0}

.comments .comment-content>a:hover{text-decoration:underline}

.comment-thread .comment{position:relative;padding:20px;margin:20px 0 0;list-style:none;border:1px solid #efeaea;border-radius:4px}

.comment-thread ol{padding:0;margin:0}

.toplevel-thread ol>li:first-child{margin:0}

.toplevel-thread ol>li:first-child>.comment-block{padding-top:0;margin:0;border:0}

.comment-thread ol ol .comment{background-color:rgba(155,155,155,0.08);border:0}

.comment-thread ol ol .comment:hover{box-shadow:unset}

.comment-thread ol ol .comment:before{content:'\f3bf';position:absolute;left:-25px;top:-5px;font-family:'Font Awesome 5 Free';font-size:16px;color:var(--border-color);font-weight:700;transform:rotate(90deg);margin:0}

.comments .comment-replybox-single iframe{padding:0 0 0 45px;margin:20px 0 0}

.comment-thread .avatar-image-container{position:absolute;top:20px;left:20px;width:35px;height:35px;overflow:hidden;border-radius:50%;box-shadow:0 2px 5px -3px rgba(155,155,155,0.15)}

.avatar-image-container img{width:100%;height:100%}

.comments .comment-header{padding:0 0 0 45px}

.comments .comment-header .user{display:inline-block;font-size:16px;color:#000;font-style:normal;font-weight:700;margin:0 0 3px}

.comments .comment-header .user a{color:#000}

.comments .comment-header .user a:hover{color:#fc5356}

.comments .comment-header .icon.user{display:none}

.comments .comment-header .icon.blog-author{display:inline-block;font-size:12px;color:#efeaea;font-weight:400;vertical-align:top;margin:-3px 0 0 5px}

.comments .comment-header .icon.blog-author:before{content:'\f058';font-family:'Font Awesome 5 Free';font-weight:400}

.comments .comment-header .datetime{display:block;line-height:1;margin:0}

.comment-header .datetime a{font-size:10px;color:#000;padding:0}

.comments .comment-actions{display:block;margin:12px 0 0}

.comments .comment-actions a{display:inline-block;font-size:13px;color:#000;font-weight:400;font-style:normal;padding:0;margin:0 15px 0 0}

.comments .comment-actions a:hover{color:#fc5356}

.item-control{display:none}

.loadmore.loaded a{display:inline-block;border-bottom:1px solid rgba(155,155,155,.51);text-decoration:none;margin-top:15px}

.comments .continue{display:none}

.comments .comment-replies{padding:0 0 0 45px}

.thread-expanded .thread-count a,.loadmore{display:none}

.comments .footer,.comments .comment-footer{float:left;width:100%;font-size:13px;margin:0}

.comment-form{float:left;width:100%;margin:0}

p.comments-message{display:none;float:left;width:100%;font-size:12px;color:#000;font-style:italic;padding:0 0 10px;margin:0 0 20px;border-bottom:1px solid #000}

.no-comments p.comments-message{padding:0;margin:0 0 20px;border:0}

.comments-system-blogger p.comments-message{display:block}

p.comments-message>a{color:#000}

p.comments-message>a:hover{color:#fc5356}

p.comments-message>em{color:#ff3f34;font-style:normal}

.comment-form>p{display:none}

p.comment-footer span{color:#fc5356}

p.comment-footer span:after{content:'\002A';color:#d63031}

.comment-content .responsive-video-wrap{position:relative;width:100%;padding:0;padding-top:56%}

.comment-content .responsive-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}

.comments .comment-replybox-thread iframe{margin:30px 0 0}

#show-comment-form,.comments #top-continue a{float:left;width:100%;height:36px;background-color:rgba(155,155,155,0.08);color:rgba(155,155,155,0.8);font-size:14px;font-weight:500;line-height:36px;text-align:center;padding:0 30px;margin:30px 0 0}

.no-comments #show-comment-form{margin:5px 0 0}

#show-comment-form:hover,.comments #top-continue a:hover{background-color:#fc5356;color:#fff}

.comment-form-visible .comments .comment-replybox-thread,.comment-form-visible .no-comments .comment-form{display:block}

.comments .comment-header .user a:after{content:'\f058';font-family:'Font Awesome 5 Free';font-weight:400;margin-left:5px;color:#426694;font-size:12px;margin-top:0;float:right}

[/blog]