• 欢迎访问 流觞·曲水,WordPress教程,技术,分享,天文,古风,软件···
  • 推荐使用Firefox浏览器或Chrome浏览器访问本网站
  • 欢迎来到流觞·曲水O(∩_∩)O~~
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏流觞·曲水

我的多说CSS样式分享

我的多说CSS样式分享
代码来源于网络,仅作分享。也给自己做个备忘。
多说css样式自定义位置:进入后台,选择:个性化设置–>基本设置–>自定义CSS,最后记得保存。

文章底部评论框样式

/*附加样式*/
    #ds-reset .ds-avatar {
	background:none !important;
	box-shadow:none !important;
}
#ds-reset .ds-avatar img,#ds-thread #ds-reset ul.ds-children .ds-avatar img {
	width:50px !important;
	height:50px !important;
	-webkit-transition:.8s;
	-moz-transition:.8s;
	-o-transition:.8s;
	-ms-transition:.8s;
	padding:3px;
	border:1px solid #ddd;
	background:#fff;
}
.ds-post:hover .ds-avatar img {
	transform:rotate(720deg);
	-webkit-transform:rotate(720deg);
	-moz-transform:rotate(720deg);
	-o-transform:rotate(720deg);
	-ms-transform:rotate(720deg);
	border-radius:30px !important;
}
#ds-reset .ds-avatar img:hover {
	transform:rotate(720deg);
	-webkit-transform:rotate(720deg);
	-moz-transform:rotate(720deg);
	-o-transform:rotate(720deg);
	-ms-transform:rotate(720deg);
	border-radius:30px !important;
}
#ds-thread #ds-reset .ds-comment-body,#ds-thread #ds-reset ul.ds-children .ds-comment-body {
	padding-left:70px !important;
}
#ds-thread #ds-reset .ds-comment-body,#ds-thread #ds-reset ul.ds-children .ds-comment-body {
	padding-left:70px !important;
}
.ds-post:hover {
	background:#eee !important;
}
#ds-thread #ds-reset ul.ds-children .ds-avatar {
	width:50px !important;
}
#ds-thread #ds-reset .ds-replybox {
	padding:0 0 0 80px !important;
}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body {
	margin-left:68px !important;
}
#ds-recent-comments li.ds-comment:nth-of-type(1) {
	border:none !important;
}
/*附加样式结束*/

留言处圆形头像旋转代码

 /** 最近留言样式 **/
    #ds-recent-comments .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-recent-comments .ds-avatar img:hover {
	/*设置鼠标悬浮在头像时的样式*/  
        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);
}

多说显示浏览器及操作系统信息(UA)
显示浏览器及操作系统信息(UA)

隐藏评论框底部渐变背景

.ds-reset .ds-gradient-bg{
background:none !important;
}/*设置评论框下方渐变*/

定义多说评论框内字体

.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;
}/*定义评论框内字体*/

定义各种文字高亮颜色,以及浮动窗口的高亮颜色,配合模板颜色设置以下RGB颜色即可。

#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;
}/*定义评论框内其他高亮颜色*/

评论框背景图

/** 扑街 **/
    #ds-thread #ds-reset .ds-textarea-wrapper textarea {background:url(//diygod.qiniudn.com/plbj.png) right no-repeat;
}

理论上使用自己的图片替换上面的png地址可以自行更换背景图,但请注意大小,分辨率。

移除评论框底部的分享到微博QQ空间

.ds-sync{display:none !important;}

隐藏底部多说版权

.ds-thread .ds-powered-by{display:none!important;}

隐藏评论框右上方 最热 最新排序按钮

.ds-thread #ds-reset .ds-sort {display:none;}

最后放一个拒绝加载多说自带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>

流觞·曲水 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明我的多说CSS样式分享
喜欢 (0)
[847198075@qq.com]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址