今天想想制作一个基于wordpress评论的留言板，但本站采用静态化，在评论上采用了多说插件，但对多说的样式一直不是很满意，多说的样式表是用Less编译的，已经开源，在多说论坛突然遇到了站主的分享，非常不错的一个扁平风格的样式，一起分享一下，本站的评论就是基于这位朋友的Css样式。

使用方法

安装配置好多说插件后，进入wordpress后台-多说评论，先点击主题设置，把主题设置为BlueBox,然后进入-个性化设置-基本设置-自定义CSS,把下面的css内容复制过去，粘贴在自定义Css框内就行了.

CSS代码

#ds-thread{
	margin-bottom:30px;
	font-family:"Microsoft Yahei";
}
#ds-thread #ds-reset{
	position: relative;
}
#ds-thread #ds-reset .ds-meta{
    border-bottom:0;
}
#ds-thread #ds-reset li.ds-tab .ds-comments-tab-duoshuo,
#ds-thread #ds-reset li.ds-tab .ds-current,
#ds-thread #ds-reset .ds-like-thread-button,
#ds-thread #ds-reset .ds-like-panel{
	display:inline-block;
	margin:0!important;
	padding:0!important;
	width:100px;
	height:30px;
	line-height:30px;
	text-align: center;
	border:0!important;
}
#ds-thread #ds-reset a.ds-like-thread-button{
	box-shadow:none;
	text-shadow:none;
	background-image:none;
}



#ds-thread #ds-reset .ds-post-toolbar{
	box-shadow: none;
	margin-top:20px;
}
#ds-thread #ds-reset .ds-textarea-wrapper{
	border:none;
	border-radius: 3px;
	background:#eee;
}
#ds-thread #ds-reset .ds-textarea-wrapper textarea{
	height:96px!important;
}
#ds-thread #ds-reset .ds-post-options{
	border:0;
}
#ds-thread #ds-reset .ds-post-options .ds-sync{
	display:none;
}
#ds-thread #ds-reset .ds-post-button{
	width:120px;
	border-radius: 4px;
	background:#5bc0de;
	box-shadow:0 3px 10px rgba(0,0,0,0.06), 0 3px 10px rgba(0,0,0,0.13);
}
#ds-thread #ds-reset .ds-post-button:hover{
	background:#31b0d5;
	box-shadow:0 4px 10px rgba(0,0,0,0.09), 0 4px 10px rgba(0,0,0,0.17);
}
#ds-thread #ds-reset .ds-toolbar-buttons{
	left:0;
}
#ds-thread .ds-powered-by {
    display: none;
}
#ds-thread #ds-reset .ds-post-button,
#ds-thread #ds-reset .ds-textarea-wrapper textarea{
	font-family:"Microsoft Yahei"!important;
}
#ds-reset .ds-gradient-bg{
	background:none;
}
#ds-thread #ds-reset .ds-replybox .ds-avatar{
	margin:0;
}

/*2016-07-13修改—- 修改了头像大小 以及调整了对应文字的位置*/

/*头像*/
#ds-reset .ds-avatar img,
#ds-thread #ds-reset ul.ds-children .ds-avatar,
#ds-thread #ds-reset ul.ds-children .ds-avatar img{
	width:48px;
	height:48px;
	border-radius:50%;
	margin-right:10px;
}
#ds-thread #ds-reset .ds-comment-footer{
	margin-left:18px;
}

版权

原文链接:http://vinceok.com/wordpress/215.html