zblog多说评论框CSS美化(炫动图像+背景图片)
从博客互推联盟访问博友们的博客,发现好多用了多说评论框的有些都有一些特色,比方说有的图像是炫动的,如下图的这种,还有的是字体不一样的,也有的是评论框底部没有什么分享到微博、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中即可。好了,喜欢的朋友们也来试试吧!

分类:主页制作| 发布:龙三公子| 查看:2813 | 发表时间:2014-05-10
原创文章如转载,请注明:转载自龙三公子博客 https://www.mybabycastle.com/
本文链接:https://www.mybabycastle.com/post/523.html
已经有 ( 23 ) 位网友发表了评论,你也评一评吧!