【原创】多说样式美化CSS

前言

由于我的博客主题simple偏向扁平风格,但是多说的样式与simple实在是格格不入,因此花了点时间美化了下,下面就是结果了,本文会持续更新…

QQ截图20160713092523

使用方法

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

QQ截图20160713092217

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修改—- 修改了头像大小 以及调整了对应文字的位置,css如下(可以复制到上述代码末尾)

/*头像*/
#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;
}

 

共有 18 条评论

  1. 123

    头像旋转怎么去掉?

    1. admin

      去除相关css

  2. 杨朝晖

    1. bakumon

      现在用的还是多说吗

  3. angdy

    我是来测试下的

  4. 看灰机网

    支持博主

  5. 1900

    拿走了

  6. 朱传朋

    准备在网站里转载你的样式,著名你的版权和链接

  7. 朱传朋

    不错的css,风格,非常感谢,有时间来 http://www.511yj.com 给我指导下 前端,感觉的主题非常棒,简洁,使用,Bootstrap框架。

  8. 半夏

    在,http://www.90ho.cc/426.html 有白色的小块,可以去掉吗?

  9. 半夏

    还可以去掉EM表情,改为颜文字(字符表情),若需要,可以提供本站CSS参考,www.banjin365.net/lyb

    1. Vince

      表情我只认贴吧滑稽

      1. 半夏

        ho~ho~我不会折腾多说CSS,倒是看过不少~

  10. 半夏

    还可以修改成鼠标悬停头像旋转360度

  11. 半夏

    可以把头像弄成圆形的,额且可以大点

    1. Vince

      已修改 代码已更新至文章内,可以重新覆盖

  12. Hanux.浣熊

    为什么我这“发布”两个字是黑的……

    1. Vince

      不同浏览器可能会有差异,我用chorme测试的,后续会测试其他浏览器

Top