首页 网站建设 Wordpress 浏览内容

WordPress修改评论头像为圆形并旋转几种方法

2454 0 BaiDu已收录 评论留言

使用WordPress博客后我们经常需要对主题进行各种修改来达到自己想要的效果,下面兔子就跟大家分享下使用CSS把博客评论栏里的头像改为圆形并且产生圆转动画。

评论头像旋转

评论头像旋转


一、使用非无缝衔接wordpress评论插件的小伙们在评论插件的自定义CSS栏目中填写下面的代码即可。如果想改名具体的一些样式。可以自己修改css.

A.圆角(或者圆形)+阴影

在这里我直接使用的是CSS3代码

B.鼠标悬浮时:图像进行360度旋转

注意设置背景颜色 #ds-thread {background: #ffffff;}不然很难看。具体自己修改吧。下面分享一个更加漂亮的达人样式代码。

美化留言评论样式
添加质感:这里主要使用CSS3的圆角(border-radius)、阴影(box-shadow)来实现质感,具体使用方法网上一大堆了,我就不啰嗦啦^^ 配色方面要尽量配合你的网站风格哦。

交互设计:达人使用的交互只是一个简单的CSS3旋转动画(transform:rotate),当然你可以使用更多的动画效果来,不过我不建议搞得过于花哨

以下代码是根据设计达人网站的风格而配色的,所以使用的时候记得改下配色哦。特别是记得改「#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {background:网站的背景颜色}」。(仅适用于非无缝衔接...)

用户气泡提示框代码:倒数8-11行。(隐藏用户气泡提示框「#ds-thread #ds-reset #ds-bubble {display:none !important}」,这是隐藏鼠标移至用户名称时弹出来的气泡提示框,个人觉得没什么用啊,所以直接隐藏了。)
评论盖楼样式代码:倒数1-7行。(不用盖楼的评论方式用户可以直接删除这几行,精简一下代码。)
添加方法:打开「Wordpress后台」 > 「多说评论」 > 「个性化设置」 > 然后把样式粘贴到「自定义CSS」文本框 > 「保存」

二、找到自己主题的Style.css,在最下面添加如下代码即可。(IE浏览器暂不支持旋转,仅支持无缝衔接wordpress的评论插件以及没有使用评论插件的小伙伴)

标签:
墨月的头像
  • 本文由墨月网络整理编辑,转载请以链接形式注明本文地址:https://www.moyoo.net/11014.html
    版权所有© 墨月网络 | 本文采用 BY-NC-SA 进行授权丨发布于:2014-10-11 20:59
    若未注明,均为原创;部分内容源于网络,版权归原作者所有,如有侵权,请联系我们删除。
评论头像

关注我们,实时联系

AD

注册即送25美刀

Vultr

推广

Vultr

赞助商

广而告之

alimama