站长那些年

多说评论框自定义CSS完美旋转阴影，去除底部多说版权，求围观！

建站教程 宋红峰 人围观

前段时间安装了多说评论，试用了一下感觉原版的评论框样式放在网站上差强人意，于是使用万能的百度搜索之，发现设计达人的评论框不错，于是拿过来用了下，除了头像偏小外以及某些细节有待改进以外，感觉非常漂亮。于是自己动手做了以下改动：

1、修复头像在chrome中旋转后向左漂移一像素的BUG。
2、将头像大小改为45*45(px)，显示更加清晰。
3、调整部分错位问题。
4、优化ie下的显示效果，已经完全支持ie。
5、新增支持盖楼模式，无错位现象，显示效果完美。

评论框样式如下：

1、嵌套模式

多说评论框自定义CSS完美旋转阴影，去除底部多说版权，求围观！（1）

2、盖楼模式

多说评论框自定义CSS完美旋转阴影，去除底部多说版权，求围观！（2）

3、平铺模式

多说评论框自定义CSS完美旋转阴影，去除底部多说版权，求围观！（3）

 

自定义CSS代码
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current{border:0;text-shadow:none}
#ds-thread #ds-reset .ds-highlight{font-family:Microsoft YaHei,Arial,Helvetica,sans-serif;font-size:14px;font-weight:700}
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover{color:#FFF;background:#37b8eb}
#ds-thread #ds-reset a.ds-highlight:hover{color:#FFF!important}
#ds-thread{padding-left:5px}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts{overflow:visible!important}
#ds-thread #ds-reset .ds-post-self{padding:10px 0 10px 20px}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self{border:0!important}
#ds-reset .ds-avatar,#ds-thread #ds-reset ul.ds-children .ds-avatar{top:15px;left:-30px;width:55px!important;height:55px!important;box-shadow:-1px 0 1px rgba(0,0,0,.15) inset!important;border-radius:50%!important;padding:0}
#ds-thread .ds-avatar a{display:inline-block;width:45px;height:45px;border:1px solid #b9baa6;border-radius:50%!important;background-color:#fff!important;margin:4px;padding:0}
#ds-thread .ds-avatar a:hover{border-color:#de5a4e}
#ds-thread .ds-avatar>img{border:1px solid #b9baa6;margin:4px}
#ds-thread #ds-reset .ds-replybox{box-shadow:none}
#ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar,#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar{left:-15px!important;top:0!important;width:45px!important;height:45px!important;background:0;box-shadow:none;padding:0}
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img{width:45px!important;height:45px!important;border-radius:50%!important}
#ds-reset .ds-replybox a.ds-avatar,#ds-reset .ds-replybox .ds-avatar img{width:45px!important;height:45px!important;border-radius:5px;padding:0}
#ds-reset .ds-avatar img{width:45px!important;height:45px!important;border-radius:50%!important;box-shadow:0 1px 3px rgba(0,0,0,0.22);-webkit-backface-visibility:hidden;-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}
.ds-post-self:hover .ds-avatar img{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
#ds-thread #ds-reset .ds-comment-body{background:#f0f0e3;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,.15),0 1px 0 rgba(255,255,255,.75) inset;padding:15px 15px 15px 55px!important}
#ds-thread #ds-reset .ds-comments a.ds-user-name{font-weight:700;color:#696a52!important}
#ds-thread #ds-reset .ds-comments a.ds-user-name:hover{color:#D32!important}
#ds-thread #ds-reset #ds-bubble{display:none!important}
#ds-thread #ds-reset #ds-hot-posts{border:0}
#ds-reset #ds-hot-posts .ds-gradient-bg{background:0}
#ds-reset #ds-ctx .ds-ctx-entry{border-bottom:1px solid #e6e6e6;margin:0;padding:17px 8px}
#ds-reset #ds-ctx .ds-ctx-entry .ds-avatar{height:55px;left:-36px;top:-9px;width:55px;margin:0}
#ds-thread #ds-reset .ds-comment-body a{color:#999}
#ds-reset .ds-comment-body #ds-ctx{background-color:rgba(0,0,0,0.03);border-left:0;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.5) inset}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a{color:#696a52;font-weight:700}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a:hover{color:#D32}
#ds-thread #ds-reset ul.ds-children .ds-avatar img{width:45px!important;height:45px!important;max-width:100%}
#ds-thread #ds-reset ul.ds-children .ds-comment-body,#ds-thread.ds-narrow #ds-reset .ds-replybox{padding-left:55px}
#ds-thread #ds-reset .ds-comment-body p,#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-content{color:#787968}

使用方法

将本段代码复制到多说的自定义CSS框中，保存即可。

多说评论框自定义CSS完美旋转阴影，去除底部多说版权，求围观！（4）

WordPress用户可以安装多说插件，在多说插件选项中的自定义css中进行修改。

演示效果

去除多说底部版权代码 ：  复制到上面css代码最后面就可以了

 

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

上面去除版权是利用了”!important”属性为最高级的原理，强制power版权的类不显示

同理我们可以使用类似的原理去除wap版的wumii插件，和百度分享/加网分享/无觅相关文章/等等JS插件的的底部信息

详细可以观察本站的各个插件细节

转载请注明：站长那些年 » 多说评论框自定义CSS完美旋转阴影，去除底部多说版权，求围观！

站长那些年 - 网站运营、技术爱好者学习交流平台

站长那些年致力为网站运营、技术爱好者打造一个良好的学习交流平台。深度剖析互联网新技术，每日分享网站运营、设计、互联网新技术等专业知识。

【站长那些年 原创文章 投稿邮箱：website@songhongfeng.com，也可以找各个群的管理】

 给“站长那些年”打气，加油 猛点这里 >>

你可能喜欢的：
文章评论 微博评论