建站已经快十个月了,使用『多说』社会化评论框也已经9个多月,起初觉得多说自带的主题不太符合我的口味,便去网上搜索别人设置的CSS,而后来觉得还是有必要自己修改,便借助W3School提供的资料,以及FileZilla FTP客户端,Notepad++文本编辑器(后换成Brackets)和Chrome浏览器(使用“审查元素”功能,预览修改效果)等工具并参考已有代码自己进行修改。
1.不显示”最新”、“最热”等评论排序按钮
#ds-thread #ds-reset .ds-sort { display:none; }
2.头像外边框
#ds-reset .ds-avatar img{ padding:3px; border: 1px solid #ddd; background: #fff; }
padding
后的3px
为边框宽度,border
后的1px
为外轮廓宽度 #ddd
为外轮廓颜色
3.头像变形与旋转(鼠标指针浮动在头像时,头像旋转360°并由圆角矩形变为圆形)
#ds-reset .ds-avatar img { width:50px;height:50px; 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; -moz-transition: -moz-transform 0.4s ease-out; padding:3px; border: 1px solid #ddd; background: #fff; } #ds-reset .ds-avatar img:hover { width:50px; height:50px; border-radius: 27px; -webkit-border-radius: 27px; -moz-border-radius:27px; background-color: #ffffff; 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); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); }
4.评论页及评论页翻页导航栏背景色
#ds-thread #ds-reset .ds-comments { background: snow; } #ds-thread #ds-reset .ds-paginator { background: snow; }
#ds-thread #ds-reset .ds-comments
为评论页;
#ds-thread #ds-reset .ds-paginator
为评论页下方的翻页栏
5.不显示”本站正在使用多说”字样
#ds-thread #ds-reset .ds-powered-by { display:none; }
又多说,路过。。。
:-)
都用上这个代码插件了
嗯 找了个代码高亮插件.
开门,你《松果博客》订购的IP到了。
?
:-)
路过,送个IP先
:-D