WordPress多说评论插件中设置圆形旋转头像css代码

文章目录

前言

看到别的网站上都添加了一个头像旋转的功能,于是去找了找相关的代码。代码不知道是谁写的。总之十分感谢了。

代码实现

在wordress中添加多说评论插件,当然,如果没有安装同样可以根据css代码在其他评论框架上设置圆形旋转头像。

WordPress多说评论插件中设置圆形旋转头像css代码-来自沈超飞的IT博客 第1张

在自定义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:网站的背景颜色}」。(效果参见:http://beiai.org/)

 

用 户气泡提示框代码:倒数8-11行。(隐藏用户气泡提示框「#ds-thread #ds-reset #ds-bubble {display:none !important}」,这是隐藏鼠标移至用户名称时弹出来的气泡提示框,个人觉得没什么用啊,所以直接隐藏了。)

评论盖楼样式代码:倒数1-7行。(不用盖楼的评论方式用户可以直接删除这几行,精简一下代码。)

添加方法:打开「Wordpress后台」 > 「多说评论」 > 「个性化设置」 > 然后把样式粘贴到「自定义CSS」文本框 > 「保存」

更多设置,请参阅“多说评论框各种CSS自定义设置问题收集

//下面这个css和插件后台设置的主题有关系,如果需要换样式,则需要修改以下CSS名称
分享到:

1 条评论

昵称
  1. Pingback: WordPress多说评论框各种CSS自定义设置问题收集 | 沈超飞的IT博客