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

前言

---

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

多说自定义CSS

---

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

1、 评论框左右边距

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

#ds-thread {padding:24px;}

方式二：

#ds-thread {margin:24px;}

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

#ds-thread {width:auto;}

2、评论框背景色

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

#ds-thread {background: #ffffff;}

方式二：

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

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

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

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

3、高亮字体的颜色

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

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

4、定义评论框内字体和颜色

#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;}

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

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

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

5、评论框背景图片

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

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

方式二：

#ds-thread#ds-reset.ds-textarea-wrappertextarea{
background:url(你的图片地址)centerno-repeat;
}

方式三：

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

6、将评论框底部的分享到微博QQ空间什么的隐藏起来

.ds-sync{display:none !important;}

7、隐藏评论框底部渐变背景

#ds-reset .ds-gradient-bg{background:none !important;}

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

8、定义发布按钮字体，以及渐变色背景

#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、隐藏评论右上方 最热 最新排序按钮

#ds-thread #ds-reset .ds-sort {display:none;}

10、隐藏评论左上方 评论总数背景色及边框

#ds-thread #ds-reset li.ds-tab a.ds-current{background:none;border:none;}

11、隐藏底部多说版权

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

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

方式二：

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

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、喜欢按钮样式：透明度，背景，边框等样式调整。

.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、社交账号登陆透明度

#ds-thread #ds-reset .ds-login-buttons {
    opacity: .5;
}
#ds-thread #ds-reset .ds-login-buttons:hover {
    opacity: 1;
    }

15、评论、文本框字体：默认字体偏小，稍作调整。

#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、用户名等超链接颜色

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

17、未登录用户名字颜色：颜色与其他登陆用户保持一致

#ds-thread #ds-reset .ds-user-name {
    color: #ef7c6c !important;
}

18、工具栏背景

#ds-reset .ds-gradient-bg {
    background: rgba(255, 255, 255, .5);
}

19、“发布”按钮背景：去掉背景图，修改底色，去掉文字阴影。

#ds-thread #ds-reset .ds-post-button {
    background-image: none;
    background: rgba(136, 172, 219, .2);
    text-shadow: none;
}

20、评论列表背景

#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、评论数标签

#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的颜色值即可

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

---

特别感谢：@沈超飞 @MOxFIVE