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

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

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

评论框样式如下:

1、嵌套模式

多说评论框,贝博app体育官网下载建设

2、盖楼模式

多说评论框,贝博app体育官网下载建设

3、平铺模式

多说评论框,贝博app体育官网下载建设

自定义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框中,保存即可。

多说评论框,贝博app体育官网下载建设

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

演示效果

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

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

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

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

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

 

(责任编辑:CNETOL。本文版权归作者所有,转载请注明来自中网在线,并保留原文作者与链接!)