自定义你的多说评论框CSS
多说css样式自定义位置：进入后台，选择：个性化设置–>基本设置–>自定义CSS，最后记得保存。
下面我来分享收集到的漂亮样式!
1.圆角（或者圆形）+阴影
#ds-reset .ds-avatar img{
width:54px;height:54px; /*设置图像的长和宽*/
border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:27px;
box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
2.鼠标悬浮时:圆形+图像进行360度旋转
#ds-reset .ds-avatar img{
width:54px;height:54px; /*设置图像的长和宽*/
border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:27px;
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;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/
-moz-transition: -moz-transform 0.4s ease-out;
}
#ds-reset .ds-avatar img:hover{/*设置鼠标悬浮在头像时的CSS样式*/
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);/*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
3.鼠标悬浮时:圆形+图像进行360度旋转+半圆遮盖
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {border:0px;color:#848568;text-shadow:none;background:#dddfc2}
#ds-thread #ds-reset .ds-highlight {font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;color:#848568 !important;}
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {color:#696a52;background:#d4d6ba}
#ds-thread #ds-reset a.ds-highlight:hover {color:#696a52 !important;}
#ds-thread {padding-left:30px;}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {overflow:visible}
#ds-thread #ds-reset .ds-post-self {padding:10px 0 10px 10px;}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {border:0 !important;}
#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {position:absolute;top:26px;left:-14px;padding:5px;width:36px;height:36px;box-shadow:-1px 0 1px rgba(0,0,0,.15) inset;border-radius:46px; background:#E5E6D0;}
#ds-thread #ds-reset ul.ds-children .ds-avatar {left:-23px;}
#ds-thread .ds-avatar a {display:inline-block;padding:1px; width:32px;height:32px;border:1px solid #b9baa6;border-radius:50%; background-color:#fff !important}
#ds-thread .ds-avatar a:hover {border-color:#de5a4e}
#ds-thread .ds-avatar > img {margin:2px 0 0 2px}
#ds-thread #ds-reset .ds-replybox {box-shadow:none;}
#ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar,
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {left: 0;top: 0; padding: 0;width: 32px !important;height: 32px !important; background: none;box-shadow: none; }
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {width: 32px !important;height: 32px !important; border-radius:50%;}
#ds-reset .ds-replybox a.ds-avatar,
#ds-reset .ds-replybox .ds-avatar img { padding:0;width:50px !important;height:50px !important; border-radius:5px; }
#ds-reset .ds-avatar img {width:32px !important;height:32px !important;border-radius:32px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.22);
-webkit-transition:.4s all ease-in-out;-moz-transition:.4s all ease-in-out;-o-transition:.4s all ease-in-out;-ms-transition:.4s all ease-in-out;transition:.4s all ease-in-out;
}
.ds-post-self:hover .ds-avatar img {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}
#ds-thread #ds-reset .ds-comment-body {background: #F0F0E3;padding:15px 15px 12px 32px;border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.75) inset;}
#ds-thread #ds-reset .ds-comment-body p{color:#787968}
#ds-thread #ds-reset .ds-comments a.ds-user-name {font-weight:bold;color:#696A52 !important;}
#ds-thread #ds-reset .ds-comments a.ds-user-name:hover {color:#D32 !important;}
#ds-thread #ds-reset #ds-hot-posts {border:0}
#ds-reset #ds-hot-posts .ds-gradient-bg {background:none;}
#ds-reset #ds-bubble #ds-ctx .ds-ctx-entry {padding:0;}
#ds-reset #ds-bubble .ds-avatar, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {position:static;padding:0;border:0; background:none;box-shadow:none;}
#ds-reset #ds-bubble .ds-avatar img, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {width:45px !important;height:45px !important;}
#ds-reset #ds-bubble .ds-user-name{padding-left:13px;}
#ds-reset .ds-comment-body #ds-ctx {border-left:1px solid #b9baa6;background-color:#e8e8dc !important}
#ds-reset #ds-ctx {margin-right:-15px}
#ds-reset #ds-ctx .ds-ctx-entry {position:relative;padding:10px 30px 10px 10px;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-avatar {top:6px;left:5px;background:none;box-shadow:none;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body {margin-left:46px;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-content {color:#787968}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {color:#696A52;font-weight:bold}
说明：配色是非常重要的，特别是记得改 #ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {background:网站的背景颜色}
用户气泡提示框代码：倒数8-11行。（隐藏用户气泡提示框 #ds-thread #ds-reset #ds-bubble {display:none !important} ，这是隐藏鼠标移至用户名称时弹出来的气泡提示框，个人觉得没什么用啊，所以直接隐藏了。）
评论盖楼样式代码：倒数1-7行。（不用盖楼的评论方式用户可以直接删除这几行，精简一下代码。）
多说css自定义代码（用于细微调整）：
1.将评论框底部的分享到微博QQ空间什么的隐藏起来
.ds-sync{
display:none !important;
}/*隐藏评论框底部分享*/
2.定义评论框背景图片
.ds-textarea-wrapper.ds-rounded-top{
background: #ffffff url(这里添加是你评论图片的网址) no-repeat right bottom !important;
}/*定义评论框背景背景*/
3.隐藏评论框底部渐变背景
#ds-reset .ds-gradient-bg{
background:none !important;
}/*设置评论框下方渐变*/
渐变色什么的虽然立体感较强但是和主题整体风格不融洽，隐藏之后，底部就是透明的了。
4.定义评论框内字体
#ds-thread #ds-reset .ds-textarea-wrapper textarea, #ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text {
font-family: ‘微软雅黑’ ‘Microsoft Yahei’!important;
font-size:12px;
letter-spacing:1px;
}/*定义评论框内字体*/
5.定义发布按钮字体，以及渐变色背景
#ds-thread #ds-reset .ds-post-button{
font-family: ‘微软雅黑’ ‘Microsoft Yahei’!important;
font-weight: bold;
font-size:12px;
background:none !important;
color:#49976b !important;
}/*定义发布按钮字体以及渐变背景*/
6.隐藏评论右上方 最热 最新排序按钮
#ds-thread #ds-reset .ds-sort {
display:none;
}/*隐藏最新最热等*/
7.隐藏评论左上方 评论总数背景色及边框
#ds-thread #ds-reset li.ds-tab a.ds-current{
background:none;
border:none;
}/*隐藏评论总数背景及边框*/
8.隐藏底部多说版权
#ds-thread #ds-reset .ds-powered-by{
display:none;
}/*隐藏多说底部版权*/
9.定义各种文字高亮颜色，以及浮动窗口的高亮颜色，配合模板颜色把以下色值统一设置即可。
#ds-reset .ds-highlight{
color:#49976b !important;
}/*定义高亮字体颜色*/
#ds-thread #ds-reset #ds-bubble a{
color: #49976b !important;
}/*定义评论框内其他高亮颜色*/
#ds-thread #ds-reset #ds-bubble {
color: #49976b !important;
}/*定义评论框内其他高亮颜色*/
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a{
color: #49976b !important;
}/*定义评论框内其他高亮颜色*/
#ds-thread #ds-reset a.ds-comment-context:hover{
color: #49976b !important;
}/*定义评论框内其他高亮颜色*/
#ds-thread #ds-reset a.ds-comment-context{
color: #49976b !important;
}/*定义评论框内其他高亮颜色*/
看到如上代码是不是感觉CSS好强大。。。
最后来个拒绝加载多说自带css样式文件代码：
<script>
//拒绝加载多说自带css样式文件
$(document).ready(function(){ findLink(); });
function findLink(){
var self =null;
var timer = setTimeout(findLink,200);
$('link[rel*=stylesheet]').each(function(i){
var hrefStr = $(this).attr("href");
if(hrefStr.indexOf('styles/embed')> 0){
self = $(this);
self.remove();
clearTimeout(timer);
}
});
}
</script>
以上代码插入到自己主题的footer.php中即可！
发表评论