精品源码分享 站长查询工具 博客大全 投稿:admin@tian36.com

使用天羽多说评论CSS提升多说评论的“颜值”

  多说评论想必只要是站长绍都知道不用多作介,这是一个比较流行的第三方评论插件。多说评论的社交整合好,用户量也够多,唯一就是UI设计方面太过普通,但幸好还有自定义CSS这项功能,只要站长们稍做些修改进行优化,就能解决多说评论颜值低这一问题了。

  前段时间我优化了一下天羽站长网的多说评论CSS,现在拿出来分享给各位站长们。

  先发两张效果截图吧。


评论框


评论列表

  接着就是使用方法,先手动复制下面的代码。

#ds-reset .ds-highlight {color:#358ccb !important;}
#ds-thread #ds-reset .ds-sort a.ds-current, #ds-thread #ds-reset .ds-sort a:active {color:#358ccb; border-bottom: 1px solid #358ccb; padding-bottom: 12px;}
#ds-thread #ds-reset .ds-sort a {color:#c3c3c3;}

#ds-thread #ds-reset li.ds-post {border-top:1px solid #ddd; border-bottom:1px solid #fff;}
#ds-thread #ds-reset .ds-post-self {padding:28px 0;}
#ds-reset .ds-avatar {top:8px;}
#ds-thread #ds-reset .ds-user-name {color:#444; font-size:14px; font-weight:bold;}
#ds-thread #ds-reset a.ds-user-name {color:#358ccb;}
#ds-thread #ds-reset .ds-comment-body {padding-left:80px;}
#ds-thread #ds-reset .ds-comment-body p {color:#666; font-size:13px;}
#ds-thread #ds-reset .ds-time,#ds-thread #ds-reset .ds-comment-actions a {color:#c3c3c3;}

#ds-thread #ds-reset .ds-toolbar {padding:28px 0 0 0;}
#ds-reset .ds-rounded-top {-webkit-border-radius: 6px; border-radius: 6px;}
#ds-thread #ds-reset .ds-textarea-wrapper {background: #f6f6f6; box-shadow: 0 2px 4px #e5e5e5 inset,0 1px 0 #fff; border: 1px solid #ddd; border-top-color: #c3c3c3;}

#ds-thread #ds-reset .ds-post-options {height:80px; border:none; margin:0;}
#ds-reset .ds-gradient-bg {background:none;}
#ds-thread #ds-reset .ds-post-button {font-family:'微软雅黑'; color:#666; top:42px; border-radius:6px; 
	background: -webkit-linear-gradient(top,#f6f6f6,#eee);
	background: -moz-linear-gradient(top,#f6f6f6,#eee);
	background: -ms-linear-gradient(top,#f6f6f6,#eee);
	box-shadow: 0 1px 0 #fff inset,0 3px 0 #dde5ee; border: 1px solid #ddd; border-bottom-color: #888;}
	#ds-thread #ds-reset .ds-post-button:hover {color:#444; border: 1px solid #ccc; border-bottom-color: #444;
		background: -webkit-linear-gradient(top,#f2f2f2,#e5e5e5);
		background: -moz-linear-gradient(top,#f2f2f2,#e5e5e5);
		background: -ms-linear-gradient(top,#f2f2f2,#e5e5e5);}
#ds-thread #ds-reset .ds-powered-by {border-top:1px solid #ddd;}

#ds-smilies-tooltip {width:492px; -webkit-border-radius: 6px; border-radius: 6px; margin-top: -48px;}
/*代码最后更新时间:2015年9月26日
目前已修改次数:0次*/

  然后打开多说评论官方管理页面,点左边的设置选项卡,见下图。

  最后把复制好的代码直接粘贴到“自定义CSS”的框里,点最下面的保存。这样自定义CSS就生效了,马上刷新自己网站文章页看看效果吧!

  如果你觉得本样式有哪里不够好的话,可以在本文评论中提出,我会持续更新这个样式的,谢谢支持。

标签: 多说 评论 CSS 
昵称  邮箱  网站
评论
本文还没被评论哦,赶快去评论抢沙发吧!