更改评论区域样式

主题原作者官方版本的评论区实在是不够好看,这边记录下美化的代码。
作者官方2.6版本style.css文件中1482行左右,当然原作者不是这么排版的,我这边是处于版面协调考虑做了整理,请了解。
将以下CSS代码进行替换,

.comments-area {margin-bottom: -14px;margin-top: 15px;word-break: break-all;word-wrap: break-word}
.comments-area img {max-width: 100%;height: auto}
.comments-title {margin: 0;font-size: 24px;padding: 30px;border: 1px solid #e0e0e0;background-color: #fff}
.comments-area ol {list-style: none}
.comments-area ol {padding: 0}
.comments-area ol li {margin-top: 15px}
.comments-area .children {padding-left: 20px}
.comment-author .avatar {position: absolute;border-radius: 50%}
.comment-author .fn,.comment-awaiting-moderation,.commentmetadata {margin-left: 60px}
.commentmetadata {font-size: 12px;margin-bottom: 10px}
.commentmetadata a {color: #848484}
.comment-body p {color: #333;margin-bottom: 0}
.comment-body {padding: 20px 20px 15px 20px;box-shadow: 0 1px 5px rgba(0,0,0,.1);background-color: #fff;margin-bottom: 15px}
.says {display: none}
.reply {text-align: right}
.comment-reply-link {padding: 5px;padding: .2em .5em .3em;background-color: #999;color: #fff;font-size: 11px;-webkit-transition: all .4s;transition: all .4s}a.comment-reply-link:focus,a.comment-reply-link:hover {background-color: #666;color: #fff!important}a.comment-reply-link {text-decoration: none}a.comment-reply-link:hover {color: #000;box-shadow: 0 0 1px #505050}
.comments-area a.url {text-decoration: underline}
.comment-metadata a,.comments-area a.url {color: #444;text-decoration: none}
.comment-respond {margin-top: 60px;margin: 0 0 14px;background-color: #fff;box-shadow: 0 1px 5px rgba(0,0,0,.1);border-radius: 0;padding: 20px 20px 8px 20px}
.comment-form .form-submit {margin-top: 30px}#comments-nav {text-align: center;margin: 0 0 15px}#comments-nav a {padding: 5px 10px;border: 1px solid #eee;background-color: #eee;color: #777}#comments-nav a:hover {border: 1px solid #00a2ff;background-color: #00a2ff;color: #fff!important}#comments-nav span.current {font-weight: 700;border: 1px solid #00a2ff;background-color: #00a2ff;padding: 5px 10px;color: #fff}#respond .input-group-addon i {width: 20px}#respond .form-control {box-shadow: none;background: 0 0;border: 1px solid #ccc;height: auto;font-size: 14px;font-weight: 300;border-radius: 0}#respond .input-group-addon {border-radius: 0}
.comment-form .form-control-feedback {line-height: 40px;color: #848484}
.comment-form .input-group {width: 100%;margin-top: 10px}
.comment-form .btn-primary {width: 100%;border-radius: 0}
.comment-form .comment-author {margin-top: 10px}
.comment-form .logged-in-as a {color: #848484}

替换为

/**** 评论区的样式更改****/.comments-area{word-wrap:break-word;word-break:break-all}
.comments-area ol{margin-top:15px;list-style:none;margin-left:-40px}
.comments-area ol.children{margin-top:8px}
.comments-area .comment-list li{padding:17px 17px 14px;background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.comments-area .comment-list li:not(:first-child){margin-top:15px}
.comments-area .comment-list .children li{margin-top:12px;background-color:#fffdf1;-webkit-box-shadow:0 2px 10px #e0e0e0;box-shadow:0 2px 10px #e0e0e0}
.comments-area .avatar{position:absolute;margin-top:1px;width:50px;height:50px;border-radius:50%;background:url(../images/avatar.png) no-repeat center #f0f0f0;-webkit-box-shadow:0 .125rem 1.0625rem 0 rgba(0,0,0,.22);box-shadow:0 .125rem 1.0625rem 0 rgba(0,0,0,.22)}
.comments-area .comment-awaiting-moderation,.comments-area .comment-meta,.comments-area .fn{margin-left:63px}
.comments-area .fn a{color:#343a40}
.comments-area .fn a:hover{color:#1d2124}
.comments-area .comment-list .bypostauthor>div>div>.fn:after{margin-left:6px;padding:1.5px 4px;border-radius:2px;background:#00a4ff;color:#fff;content:"作者";font-size:11px;top:-1px;position:relative}
.comments-area .says{display:none}
.comments-area .comment-awaiting-moderation{font-size:15px}
.comments-area .comment-meta{margin-bottom:5px;color:#777;font-size:13px}
.comments-area .comment-meta a:hover{color:#1d2124}
.comments-area .reply{text-align:right}
.comments-title{margin:0;font-size:24px;padding:30px;border:1px solid #e0e0e0;background-color:#fff}
.commentmetadata a{color:#848484}
.comment-body p{color:#333;margin-bottom:0}
a.comment-reply-link:focus,a.comment-reply-link:hover{background-color:#666;color:#fff!important}
a.comment-reply-link{text-decoration:none;padding:2px 5px;border-radius:2px;background-color:#999;color:#fff;font-size:12px;-webkit-transition:all .4s;transition:all .4s}
a.comment-reply-link:hover{color:#000;box-shadow:0 0 1px #505050}
.comment-metadata a,.comments-area a.url{color:#444;text-decoration:none}
.comment-respond{margin-top:15px;background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1);border-radius:0;padding:20px 20px 8px 20px}
#comments-nav{text-align:center;margin:0 0 15px}
#comments-nav>a,#comments-nav>span{margin:0 4px}
#comments-nav a{padding:5px 10px;border:1px solid #eee;background-color:#eee;color:#777}
#comments-nav a:hover{border:1px solid #51aded;background-color:#51aded;color:#fff!important}
#comments-nav span.current{font-weight:700;border:1px solid #51aded;background-color:#51aded;padding:5px 10px;color:#fff}
#respond #reply-title{font-size:20px;color:#666;margin-top:5px}
#respond .comment-notes,#respond .logged-in-as{margin:0 0 10px;color:#888}
#respond .input-group-addon{padding:6px 8px}
#respond .input-group-addon i{width:20px}
#respond .comment .form-control{background:url(../images/comment.png) right bottom no-repeat}
#respond .form-control{box-shadow:none;background:0 0;border:1px solid #ccc;height:auto;font-size:14px;font-weight:300;border-radius:0}
#respond .has-feedback{position:relative}
#respond .has-feedback .form-control:not(:first-child){padding-right:30px}
#respond .form-control-feedback{position:absolute;right:0;z-index:2;display:block;width:34px;height:34px;text-align:center;pointer-events:none}
#comments img{max-width:100%}
.comment-form .form-control-feedback{line-height:40px;color:#848484}
.comment-form .input-group,.comment-form .btn-primary{width:100%}
.comment-form .comment-author{margin-top:10px}
.comment-form .logged-in-as a{color:#848484}

主要表现在评论嵌套的时候更加直观,以及文章作者的标识..

点赞
  1. B 乐说道:

    已然懒惰到,不想折腾,但是不折腾心里越觉得不对劲

  2. 懿古今说道:

    适合自己的才是最好的,所以那个地方不爽就DIY,这也是独立博客的魅力所在。

    1. 鬼手六说道:

      @懿古今 精辟,就是这样..

  3. 鬼手六说道:

    本文评论区变化演示

    1. 鬼手六说道:

      @鬼手六 头像阴影,嵌套的时候的样式,以及作者标识..

      1. 鬼手六说道:

        @鬼手六 继续嵌套..

发表评论

电子邮件地址不会被公开。 必填项已用*标注