多说评论个性化设置CSS篇
多说评论系统特点：
让评论更活跃、互动性更强的评论系统，永久免费且容易安装
用微博、QQ、人人、豆瓣等帐号轻松评论和分享
智能识别垃圾评论、稳步提升网站流量
可以实时同步本地和多说评论
样式更多样，可以自己定制显示效果
设置评论页面头像为圆形，并且鼠标点击时360度旋转
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #ds-reset .ds-avatar img{ width:40px;height:40px; /*设置图像的长和宽*/ border-radius: 20px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/ -webkit-border-radius: 20px;/*圆角效果：兼容webkit浏览器*/ -moz-border-radius:20px; box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/ -webkit-box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度）*/ -moz-transition: -moz-transform 0.4s ease-out; } #ds-reset .ds-avatar img:hover{/*设置鼠标悬浮在头像时的CSS样式*/ box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); transform: rotateZ(360deg);/*图像旋转360度*/ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); } |
设置调用评论头像为圆角
1 2 3 4 5 6 7 8 9 10 | #ds-recent-comments .ds-avatar img{ width:34px;height:34px; /*设置图像的长和宽*/ border-radius: 5px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/ -webkit-border-radius:5px;/*圆角效果：兼容webkit浏览器*/ -moz-border-radius:5px; box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/ -webkit-box-shadow: inset 0 -1px 0 #3333sf; } |
引申下，鼠标移动到评论正文的时候，头像旋转
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | #ds-reset .ds-avatar img{ width:46px;height:46px; /*设置图像的长和宽*/ border-radius: 23px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/ -webkit-border-radius: 23px;/*圆角效果：兼容webkit浏览器*/ -moz-border-radius:23px; box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/ -webkit-box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/ -moz-transition: -moz-transform 0.4s ease-out; } #ds-reset .ds-post-self div:hover .ds-avatar img {/*评论鼠标CSS样式*/ box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); transform: rotateZ(360deg);/*图像旋转360度*/ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); } #ds-reset .ds-post li:hover .ds-avatar img {/*评论嵌套回复鼠标CSS样式*/ box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); transform: rotateZ(360deg);/*图像旋转360度*/ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); } |
更多的效果可以转向 小V的空间：多说自定义CSS 让你的多说评论动感起来
现在拆解一部分评论，分析部分css样式说明
1 评论框左右边距
如果你的评论框左右边距过小（评论框太宽），输入下列代码调整宽度，直到页面上评论框宽度显示合适：
1 2 3 | #ds-thread {padding:24px;} |
或
1 2 3 | #ds-thread {margin:24px;} |
如果你的评论框太窄，可能是宽度被设定了不合适的值，输入下列代码让宽度自动拉伸：
1 2 3 | #ds-thread {width:auto;} |
2 评论框整体的背景色
多说评论会采用主题的背景色作为整体评论框的背景，这样可能导致评论本身不是很显眼。你可以输入下列代码来更改整体评论框的背景颜色：
1 2 3 | #ds-thread {background: #ffffff;} |
这个评论背景的边角默认是直角，如果想改成圆角，请输入下列代码（仅在firefox，chrome及高版本ie浏览器下有效，ie6,7,8将仍然为直角显示）：
1 2 3 | #ds-thread{ border-radius: 5px;} |
注意：其中的#ffffff 可以被替换为你希望的颜色，以便于评论文字相适应。更多的颜色，见维基百科网页颜色表
3 高亮字体的颜色
高亮字体包括“n条评论”，“n条微博”，评论者名字的颜色，想修改它的显示颜色（在大多数情况下默认是红色），输入下列代码
1 2 3 | #ds-thread #ds-reset .ds-highlight{color: #ffffff !important;} |
4 更改评论字体颜色
想修改评论正文的字体颜色，请输入下列代码：
1 2 3 | #ds-thread #ds-reset .ds-comment-body p {color: #ffffff;} |
当您在修改一部分上面未示例的标签样式时，遇到无效的情况，请尝试增加：
1 2 3 | !important |
5更改最近访客头像大小
想要修改最新访客头像的大小，请输入下列代码：
1 2 3 | #sidebar .ds-avatar img {width: 30px;height: 30px;} |
其中30px是宽和高，请根据效果修改不同高度和宽度
6修改评论调用评论者名称的颜色
1 2 3 | #ds-recent-comments .ds-meta a{color: #0086E3 !important;} |
多说评论调用代码请转向曾经发表的文章
优化网站代码并重新整理下评论插件
2016年04月22日 08:37 沙发
不错，去试试看
2016年04月11日 09:46 板凳
妈蛋，是不是自己回复自己就不会嵌套呢
2016年04月11日 09:46 1层
@梦想与希望的演说 可以啊
2016年04月11日 15:25 1层
@梦想与希望的演说 那个要设置几层嵌套的
2016年04月11日 15:34 1层
@聆听天笑 晓得了
2016年03月31日 16:28 地板
留下脚印
2012年09月23日 23:26 4楼
我的博客按照这篇文章修改CSS代码之后很到位。
2012年09月18日 16:03 5楼
请问像http://www.shejidaren.com/links这样的效果怎么办到的。
1，圆形头像外有一层环（鼠标放上去转圈时看得比较明显）。
2，鼠标移动到评论正文内容上头像也会转圈。
CSS代码该怎么写？
2012年09月19日 11:47 1层
@Teddy 初步可以解决第二个问题
/*设置鼠标悬浮在头像时的CSS样式*/
#ds-reset li:hover .ds-avatar img
这样应该可以了，不过如果下面有评论回复会出现一点bug，下次在研究吧
2012年09月19日 11:55 1层
@Teddy 好了，现在效果可以全部显示出来了
2012年09月10日 17:34 6楼
请问改一个文件啊？新手不懂
2012年09月10日 17:38 1层
@回眸孤独的狼 多说评论后台有个<个性化设置>里面有个css设置，将这些css放到里面就可以出来效果了
2012年09月10日 10:21 7楼
写的不错