建站已经快十个月了,使用『多说』社会化评论框也已经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