多说评论下篇之个性化评论框

前言

　　上面两篇我们详细介绍了多说评论自定义CSS头像和显示UA信息和博主。但是仍然感觉评论框十分不协调，并且有些杂乱，接下来我们就要谈论我们的多说评论框下篇之个性化评论框，话不多说，切入正题~

多说自定义CSS

扩展阅读
多说docs：http://dev.duoshuo.com/docs/4ff1cfd0397309552c000017

1、 评论框左右边距

如果你的评论框左右边距过小（评论框太宽），输入下列代码调整宽度，直到页面上评论框宽度显示合适：
方式一：

1
#ds-thread {padding:24px;}

方式二：

1
#ds-thread {margin:24px;}

如果你的评论框太窄，可能是宽度被设定了不合适的值，输入下列代码让宽度自动拉伸：

1
#ds-thread {width:auto;}

2、评论框背景色

多说评论会采用主题的背景色作为整体评论框的背景，这样可能导致评论本身不是很显眼。你可以输入下列代码来更改整体评论框的背景颜色：
方式一：

1
#ds-thread {background: #ffffff;}

方式二：

1
#ds-thread #ds-reset .ds-textarea-wrapper { background: rgba(255, 255, 255, .5);}

这个评论背景的边角默认是直角，如果想改成圆角，请输入下列代码（仅在firefox，chrome及高版本ie浏览器下有效，ie6,7,8将仍然为直角显示）：

1
#ds-thread{ border-radius: 5px;}

注意：其中的#ffffff可以被替换为你希望的颜色，以便于评论文字相适应。

3、高亮字体的颜色

高亮字体包括“n条评论”，“n条微博”，评论者名字的颜色，想修改它的显示颜色（在大多数情况下默认是红色），输入下列代码：

1
#ds-thread #ds-reset .ds-highlight{color: #ffffff !important;}

4、定义评论框内字体和颜色
1
#ds-thread #ds-reset .ds-textarea-wrapper textarea, #ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text {font-family: ‘微软雅黑’ ‘Microsoft Yahei’!important;font-size:12px;letter-spacing:1px;}

这个好像是定义评论框内输入的文字字体的，嗯，好像是。 想修改评论正文的字体颜色，请输入下列代码：

1
#ds-thread #ds-reset .ds-comment-body p {color: #ffffff;}

当您在修改一部分上面未示例的标签样式时，遇到无效的情况，请尝试增加：!important

5、评论框背景图片

url换成你自己想要的图片地址就行了，最好使用绝对路径。
方式一：

1
2
3
.ds-textarea-wrapper.ds-rounded-top{
background: #ffffff url(你想设置的图片地址) no-repeat right bottom !important;
}

方式二：

1
2
3
#ds-thread #ds-reset .ds-textarea-wrapper textarea {
background:url(你的图片地址) center no-repeat;
}

方式三：

1
2
3
#ds-thread #ds-reset .ds-textarea-wrapper textarea {
background: url("你的图片地址") bottom right no-repeat;
}

6、将评论框底部的分享到微博QQ空间什么的隐藏起来
1
.ds-sync{display:none !important;}
7、隐藏评论框底部渐变背景
1
#ds-reset .ds-gradient-bg{background:none !important;}

话说渐变色什么的虽然立体感较强但是和主题整体风格不融洽，隐藏之，这样底部就是透明的了。

8、定义发布按钮字体，以及渐变色背景
1
#ds-thread #ds-reset .ds-post-button{font-family: ‘微软雅黑’‘Microsoft Yahei’!important;font-weight: bold;font-size:12px;background:none !important;color:#49976b !important;}
9、隐藏评论右上方 最热 最新排序按钮
1
#ds-thread #ds-reset .ds-sort {display:none;}
10、隐藏评论左上方 评论总数背景色及边框
1
#ds-thread #ds-reset li.ds-tab a.ds-current{background:none;border:none;}
11、隐藏底部多说版权

很多朋友在找这个代码。不过不建议用。毕竟显示版权信息还是比较好。
方式一：

1
#ds-thread #ds-reset .ds-powered-by{display:none;}

方式二：

1
#ds-thread .ds-powered-by {display: none;}

12、定义各种文字高亮颜色，以及浮动窗口的高亮颜色，配合模板颜色把以下色值统一设置即可。
1
2
3
4
5
6
7
8
9
10
11
12
/*定义高亮字体颜色*/
#ds-reset .ds-highlight{color:#49976b !important;}
/*定义评论框内其他高亮颜色*/
#ds-thread #ds-reset #ds-bubble a{color: #49976b !important;}
/*定义评论框内其他高亮颜色*/
#ds-thread #ds-reset #ds-bubble {color: #49976b !important;}
/*定义评论框内其他高亮颜色*/
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a{color: #49976b !important;}
/*定义评论框内其他高亮颜色*/
#ds-thread #ds-reset a.ds-comment-context:hover{color: #49976b !important;}
/*定义评论框内其他高亮颜色*/
#ds-thread #ds-reset a.ds-comment-context{color: #49976b !important;}
13、喜欢按钮样式：透明度，背景，边框等样式调整。
1
2
3
4
5
6
7
8
9
10
11
12
13
.ds-meta {
    opacity: .5;
    }
.ds-meta:hover {
    opacity: 1;
    }
#ds-thread #ds-reset a.ds-like-thread-button {
    background-image: none;
    background-color: #fee2d3;
    border: none;
    text-shadow: none;
    font-family: inherit;
    }
14、社交账号登陆透明度
1
2
3
4
5
6
#ds-thread #ds-reset .ds-login-buttons {
    opacity: .5;
}
#ds-thread #ds-reset .ds-login-buttons:hover {
    opacity: 1;
    }
15、评论、文本框字体：默认字体偏小，稍作调整。
1
2
3
4
5
#ds-thread #ds-reset .ds-comment-body p, #ds-thread #ds-reset .ds-textarea-wrapper textarea {
    font-size: 1.15em;
    color: #717171;
    font-family: inherit;
    }
16、用户名等超链接颜色
1
2
3
#ds-thread #ds-reset .ds-highlight {
    color: #ef7c6c !important;
}
17、未登录用户名字颜色：颜色与其他登陆用户保持一致
1
2
3
#ds-thread #ds-reset .ds-user-name {
    color: #ef7c6c !important;
}
18、工具栏背景
1
2
3
#ds-reset .ds-gradient-bg {
    background: rgba(255, 255, 255, .5);
}
19、“发布”按钮背景：去掉背景图，修改底色，去掉文字阴影。
1
2
3
4
5
#ds-thread #ds-reset .ds-post-button {
    background-image: none;
    background: rgba(136, 172, 219, .2);
    text-shadow: none;
}
20、评论列表背景
1
2
3
4
5
6
#ds-thread #ds-reset li.ds-post {
    background: rgba(255, 255, 255, .2);
}
#ds-thread #ds-reset li.ds-post:hover {
    background-color: rgba(255, 255, 255, .6) !important;
}
21、评论数标签
1
2
3
#ds-thread #ds-reset li.ds-tab a.ds-current {
    background: rgba(255, 255, 255, .2);
}

都是一些现成的CSS代码，直接复制就可以用了。当然里面的颜色或者是其他属性什么的你们自己修改就可以了。照样可以实现你想要的效果。

手动获取css标签信息

当然，这些个性化信息并不能全覆盖我们自己想要达到的效果，那么在具体使用中，我们怎样知道多说的某一个按钮，某一条线，使用的是哪一个css标签呢？(像#ds-thread #ds-reset .ds-highlight)，下面提供一个在google chrome下查看的简单办法：

  1. 在页面元素上方点击【鼠标右键】，选择【审查元素】

  2. 将鼠标悬浮在相应元素的代码上方，页面中也会显示出选中效果。点击代码之后，右侧子窗口会显示相应标签。

  3. 没错，如果你想要控制喜欢按钮的颜色，只需在多说的自定义css里，添加并调整color的颜色值即可

1
2
3
#ds-thread #ds-reset a.ds-like-thread-button span {
    color: #F00;
}

特别感谢：@沈超飞 @MOxFIVE

赏

谢谢你请我喝旺仔牛奶

支付宝
微信
本文作者： 风澈vio
本文链接： http://inplus.top/archives/duoshuothree/
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 CN 许可协议。转载请注明出处！

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

<table align="center"><tbody><tr><td align="center" valign="middle">打雷会下雨<br>下雨要打伞<br>天冷穿棉袄<br>天热扇扇子<br><br><br></td></tr><tr><td align="center" valign="middle">本站采用<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/">CC BY-NC-SA 3.0 CN</a>协议进行许可。</td></tr><tr><td align="center" valign="middle"><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/"><img alt="知识共享许可协议" width="20%" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/3.0/cn/88x31.png"></a><br></td></tr></tbody></table>