从博客互推联盟访问博友们的博客，发现好多用了多说评论框的有些都有一些特色，比方说有的图像是炫动的，如下图的这种，还有的是字体不一样的，也有的是评论框底部没有什么分享到微博、QQ空间什么的&hellIP;…于是就产生了好奇，搜索了下，原来是CSS在作怪，也就是说多说评论框可以自己定义CSS来美化个性化。
    知道了原理，所以就想在自己龙三公子博客也来折腾一下。于是先请教了我们博客互推联盟的盟主张戈博客（他博客的评论框图像就是炫动的），他说他博客有一篇文章《分享一个多说头像的动态酷炫CSS样式》就是写这个，顺便也给我简单指点了下。
    看完后，我马上实践。很简单，正如他博文所说将代码直接贴到主题style.css中保存即可。弄完后效果马上就出来了。不过，我又稍加润色了一下，因为想起了之前我博客默认评论框的背景，于是我把它又加进来了，现在基本上又回到原来面貌了，立竿见影哈。
    多说CSS美化评论框远远不止这些，我在Nifree|站长云笔记http://www.nifree.com/duoshuo.html中发现了更多的自定义代码，有兴趣的也可以去看一下。而我博客这个用到的两段代码如下：
    代码一：评论图像炫动
/*多说附加样式*/
#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-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-textarea-wrapper.ds-rounded-top{
background: #ffffff url(https://www.mybabycastle.com/image/pinlun.gif) no-repeat center bottom !important;
}/*定义评论框背景*/
    以上代码可以合并然后一起放入你博客模板主题下的style.css中即可。好了，喜欢的朋友们也来试试吧！

打赏 支付宝打赏 微信打赏