前言
上面两篇我们详细介绍了多说评论自定义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下查看的简单办法：
-
在页面元素上方点击【鼠标右键】，选择【审查元素】
-
将鼠标悬浮在相应元素的代码上方，页面中也会显示出选中效果。点击代码之后，右侧子窗口会显示相应标签。
- 没错，如果你想要控制喜欢按钮的颜色，只需在多说的自定义css里，添加并调整color的颜色值即可
#ds-thread #ds-reset a.ds-like-thread-button span {
color: #F00;
}
