自己修改的多说评论框CSS一枚

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

9条评论

评论已关闭。