前言

逛别人的博客,发现人家用的多说鼠标移过去,多说用户头像会旋转下,多说评论框也有底纹背景,显示操作系统,浏览器版本,博主标记等。可以挑自己需要的对应改造下,多说感觉现在也不维护了,期待多说能提供这些个性设置。

头像旋转

鼠标移到多说评论区,整个嵌套框内的用户头像都会跟着一起旋转,需要添加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
如何为博客增加打赏功能