殷德瑶博客
喜欢的歌,静静地听!喜欢的人,远远地看!

自定义你的多说评论框CSS

殷德瑶 2015-9-20 emlog教程 评论 3246 次
多说评论框是最优秀的第三方评论系统,支持本地评论合并,并且可以将评论社交化分享,还有有多种样式供选择,而且多说支持评论样式自定义CSS,下面我就把在网上收集到的自定义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中即可!

发表评论


粤ICP备15078261号 Powered by 黑暗之夜
Theme by 殷德瑶博客