前言
逛别人的博客,发现人家用的多说鼠标移过去,多说用户头像会旋转下,多说评论框也有底纹背景,显示操作系统,浏览器版本,博主标记等。可以挑自己需要的对应改造下,多说感觉现在也不维护了,期待多说能提供这些个性设置。
头像旋转
鼠标移到多说评论区,整个嵌套框内的用户头像都会跟着一起旋转,需要添加hover
属性,设置方法:
在多说对应网站设置后台找到:设置>基本设置>自定义CSS
,在框里填入如下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| .sskadmin:hover { opacity: 1; }
#ds-reset .ds-avatar{background:none !important; box-shadow:none !important;} #ds-reset .ds-avatar img , #ds-thread #ds-reset ul.ds-children .ds-avatar img{width:50px !important;height: 50px !important;-webkit-transition: .9s;-moz-transition: .9s;-o-transition: .9s;-ms-transition: .9s;padding: 2px;border: 1px solid #ddd;background: #fff;}
.ds-post:hover .ds-avatar img{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);border-radius:30px !important;} #ds-reset .ds-avatar img:hover{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);border-radius:30px !important;}
#ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;} #ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;} .ds-post:hover{background:#eee !important;} #ds-thread #ds-reset ul.ds-children .ds-avatar{width:50px !important;} #ds-thread #ds-reset .ds-replybox{padding: 0 0 0 80px !important;} #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body{margin-left: 68px !important;} #ds-recent-comments li.ds-comment:nth-of-type(1){border:none !important;} #ds-thread{ border-radius: 3px; }
|
去掉多说版权信息的
还是在多说后台,自定义CSS中加入:.ds-powered-by{ display: none;}
,然后多说评论框下方的多说强力驱动
字样就没了。
添加显示User Agent功能
这个看上去挺酷炫的,但需要本地化多说embed.js
,而且网上找的方法也不适合最新版本的多说核心js,就此作罢,感兴趣的可以查看文末参考文档修改。
参考文档
多说样式折腾记录 — 添加 UA 浏览器标识、旋转头像等
[多说自定义CSS 多说评论显示User Agent](http://theme-next.iissnan.com/theme-settings.html#多说评论显示 UA)
如何为博客增加打赏功能
本文标题:多说评论-头像旋转-隐藏底部版权文字-自定义CSS
文章作者:凹凸曼
发布时间:2017-03-10
最后更新:2017-03-10
原始链接:https://sobaigu.com/web-duoshuo-css-define.html
版权声明:转载请务必保留本文链接和注明内容来源,并自负版权等法律责任。