多说评论框自定义CSS优化
多说的个性化设置里有个自定义CSS，将你要更改的CSS样式代码粘贴进去保存就好了；注意：有些属性如果修改了没效果的话，要在每个属性后面加上一个!important，将优先级调为最高就可以看到效果了，比如：padding:10px; 这个属性没生效的话就要这样改：padding:10px !important; 这样就可以生效了。
下面将网络上现有的几个不错的css样式整理并分享给大家。
圆角（或者圆形）+ 阴影
1 #ds-reset .ds-avatar img{
2 width:54px;height:54px; /*设置图像的长和宽*/
3 border-radius:27px; /*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
4 -webkit-border-radius: 27px; /*圆角效果：兼容webkit浏览器*/
5 -moz-border-radius:27px;
6 box-shadow: inset 0 -1px 0 #3333sf; /*设置图像阴影效果*/
7 -webkit-box-shadow: inset 0 -1px 0 #3333sf;
8 }鼠标悬浮时，圆形+图像进行360度旋转
1 #ds-reset .ds-avatar img{
2 width:54px;height:54px; /*设置图像的长和宽*/
3 border-radius:27px; /*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
4 -webkit-border-radius: 27px; /*圆角效果：兼容webkit浏览器*/
5 -moz-border-radius:27px;
6 box-shadow: inset 0 -1px 0 #3333sf; /*设置图像阴影效果*/
7 -webkit-box-shadow: inset 0 -1px 0 #3333sf;
8 -webkit-transition: 0.4s;
9 -webkit-transition: -webkit-transform 0.4s ease-out;
10 transition: transform 0.4s ease-out; /*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/
11 -moz-transition: -moz-transform 0.4s ease-out;
12 }
13
14 #ds-reset .ds-avatar img:hover{ /*设置鼠标悬浮在头像时的CSS样式*/
15 box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
16 -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
17 transform: rotateZ(360deg); /*图像旋转360度*/
18 -webkit-transform: rotateZ(360deg);
19 -moz-transform: rotateZ(360deg);
20 }鼠标悬浮时：圆形+图像进行360度旋转+半圆遮盖
1 #ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {border:0px;color:#848568;text-shadow:none;background:#dddfc2}
2 #ds-thread #ds-reset .ds-highlight {font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;color:#848568 !important;}
3 #ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {color:#696a52;background:#d4d6ba}
4 #ds-thread #ds-reset a.ds-highlight:hover {color:#696a52 !important;}
5
6 #ds-thread {padding-left:30px;}
7 #ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {overflow:visible}
8 #ds-thread #ds-reset .ds-post-self {padding:10px 0 10px 10px;}
9 #ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {border:0 !important;}
10 #ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {position:absolute;top:26px;left:-14px;padding:5px;width:36px;height:36px;box-shadow:-1px 0 1px rgba(0,0,0,.15) inset;border-radius:46px; background:#E5E6D0;}
11 #ds-thread #ds-reset ul.ds-children .ds-avatar {left:-23px;}
12 #ds-thread .ds-avatar a {display:inline-block;padding:1px; width:32px;height:32px;border:1px solid #b9baa6;border-radius:50%; background-color:#fff !important}
13 #ds-thread .ds-avatar a:hover {border-color:#de5a4e}
14 #ds-thread .ds-avatar > img {margin:2px 0 0 2px}
15 #ds-thread #ds-reset .ds-replybox {box-shadow:none;}
16 #ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar,
17 #ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {left: 0;top: 0; padding: 0;width: 32px !important;height: 32px !important; background: none;box-shadow: none; }
18 #ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {width: 32px !important;height: 32px !important; border-radius:50%;}
19 #ds-reset .ds-replybox a.ds-avatar,
20 #ds-reset .ds-replybox .ds-avatar img { padding:0;width:50px !important;height:50px !important; border-radius:5px; }
21 #ds-reset .ds-avatar img {width:32px !important;height:32px !important;border-radius:32px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.22);
22 -webkit-transition:.4s all ease-in-out;-moz-transition:.4s all ease-in-out;-o-transition:.4s all ease-in-out;-ms-transition:.4s all ease-in-out;transition:.4s all ease-in-out;
23 }
24 .ds-post-self:hover .ds-avatar img{
25 -webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}
26
27 #ds-thread #ds-reset .ds-comment-body {background: #F0F0E3;padding:15px 15px 12px 32px;border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.75) inset;}
28
29 #ds-thread #ds-reset .ds-comment-body p{color:#787968}
30 #ds-thread #ds-reset .ds-comments a.ds-user-name {font-weight:bold;color:#696A52 !important;}
31 #ds-thread #ds-reset .ds-comments a.ds-user-name:hover {color:#D32 !important;}
32
33 #ds-thread #ds-reset #ds-hot-posts {border:0}
34 #ds-reset #ds-hot-posts .ds-gradient-bg {background:none;}
35
36 #ds-reset #ds-bubble #ds-ctx .ds-ctx-entry {padding:0;}
37 #ds-reset #ds-bubble .ds-avatar, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {position:static;padding:0;border:0; background:none;box-shadow:none;}
38 #ds-reset #ds-bubble .ds-avatar img, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {width:45px !important;height:45px !important;}
39 #ds-reset #ds-bubble .ds-user-name{padding-left:13px;}
40
41 #ds-reset .ds-comment-body #ds-ctx {border-left:1px solid #b9baa6;background-color:#e8e8dc !important}
42 #ds-reset #ds-ctx {margin-right:-15px}
43 #ds-reset #ds-ctx .ds-ctx-entry {position:relative;padding:10px 30px 10px 10px;}
44 #ds-reset #ds-ctx .ds-ctx-entry .ds-avatar {top:6px;left:5px;background:none;box-shadow:none;}
45 #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body {margin-left:46px;}
46 #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-content {color:#787968}
47 #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {color:#696A52;font-weight:bold}简要说明：
配色是非常重要的，特别是记得改「#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {background:网站的背景颜色}」。
用户气泡提示框代码: 隐藏用户气泡提示框「#ds-thread #ds-reset #ds-bubble {display:none !important}」，这是隐藏鼠标移至用户名称时弹出来的气泡提示框。
评论盖楼样式代码: 倒数1-8行。（不用盖楼的评论方式用户可以直接删除这几行，精简一下代码。）
多说css自定义代码（用于细微调整）：
将评论框底部的分享到微博QQ空间什么的隐藏起来
1 .ds-sync{
2 display:none !important;
3 }/*隐藏评论框底部分享*/定义评论框背景图片
1 .ds-textarea-wrapper.ds-rounded-top{
2 background: #ffffff url(这里添加图片的网址) no-repeat right bottom !important;
3 }/*定义评论框背景背景*/注意图片最好是透明或者白色的，图片的像素大小最好要去你的评论框大小一样，不然可能会出现拉伸。
隐藏评论框底部渐变背景
1 #ds-reset .ds-gradient-bg{
2 background:none !important;
3 }/*设置评论框下方渐变*/话说渐变色什么的虽然立体感较强但是和主题整体风格不融洽，隐藏之，这样底部就是透明的了。
定义评论框内字体
1 #ds-thread #ds-reset .ds-textarea-wrapper textarea, #ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text {
2 font-family: ‘微软雅黑’ ‘Microsoft Yahei’!important;
3 font-size:12px;
4 letter-spacing:1px;
5 }/*定义评论框内字体*/这个好像是定义评论框内输入的文字字体的。
定义发布按钮字体，以及渐变色背景
1 #ds-thread #ds-reset .ds-post-button{
2 font-family: ‘微软雅黑’ ‘Microsoft Yahei’!important;
3 font-weight: bold;
4 font-size:12px;
5 background:none !important;
6 color:#49976b !important;
7 }/*定义发布按钮字体以及渐变背景*/隐藏评论右上方 最热 最新 排序 按钮
1 #ds-thread #ds-reset .ds-sort {
2 display:none;
3 }/*隐藏最新最热等*/隐藏评论左上方 评论总数背景色及边框
1 #ds-thread #ds-reset li.ds-tab a.ds-current{
2 background:none;
3 border:none;
4 }/*隐藏评论总数背景及边框*/隐藏底部多说版权
1 #ds-thread #ds-reset .ds-powered-by{
2 display:none;
3 }/*隐藏多说底部版权*/定义各种文字高亮颜色，以及浮动窗口的高亮颜色
1 #ds-reset .ds-highlight{
2 color:#49976b !important;
3 }/*定义高亮字体颜色*/
4
5 #ds-thread #ds-reset #ds-bubble a{
6 color: #49976b !important;
7 }/*定义评论框内其他高亮颜色*/
8
9 #ds-thread #ds-reset #ds-bubble {
10 color: #49976b !important;
11 }/*定义评论框内其他高亮颜色*/
12
13 #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a{
14 color: #49976b !important;
15 }/*定义评论框内其他高亮颜色*/
16
17 #ds-thread #ds-reset a.ds-comment-context:hover{
18 color: #49976b !important;
19 }/*定义评论框内其他高亮颜色*/
20
21 #ds-thread #ds-reset a.ds-comment-context{
22 color: #49976b !important;
23 }/*定义评论框内其他高亮颜色*/评论框左右边距
如果你的评论框左右边距过小（评论框太宽），输入下列代码调整宽度，直到页面上评论框宽度显示合适：
#ds-thread {padding:24px;}
或
#ds-thread {margin:24px;}
如果你的评论框太窄，可能是宽度被设定了不合适的值，输入下列代码让宽度自动拉伸：
#ds-thread {width:auto;}
评论框整体的背景色
多说评论会采用主题的背景色作为整体评论框的背景，这样可能导致评论本身不是很显眼。你可以输入下列代码来更改整体评论框的背景颜色：
#ds-thread {background: #ffffff;}
这个评论背景的边角默认是直角，如果想改成圆角，请输入下列代码（仅在Firefox，Chrome及高版本ie浏览器下有效，ie6,7,8将仍然为直角显示）：
#ds-thread{ border-radius: 5px;}
注意：其中的#ffffff可以被替换为你希望的颜色，以便于评论文字相适应。
高亮字体的颜色
高亮字体包括“n条评论”，“n条微博”，评论者名字的颜色，想修改它的显示颜色（在大多数情况下默认是红色），输入下列代码：
#ds-thread #ds-reset .ds-highlight{color: #ffffff !important;}
更改评论字体颜色
想修改评论正文的字体颜色，请输入下列代码：
#ds-thread #ds-reset .ds-comment-body p {color: #ffffff;}
当您在修改一部分上面未示例的标签样式时，遇到无效的情况，请尝试增加!important。
更改最近访客头像大小
想要修改最新访客头像的大小，请输入下列代码：
#ds-recent-visitors .ds-avatar img {width: 30px !important;height: 30px !important;}
其中30px是宽和高，请根据效果修改不同高度和宽度。
Comments