WordPress评论及多说评论圆形旋转头像设置

概述我们有时候想把评论的头像设置成圆形，鼠标放上时还有动感的旋转效果，其实我们在wordpress原生态评论和多说评论上都容易通过css来实现。 wordpress设置圆形旋转头像 在/wp-content/themes/目录下，找到你当前使用

我们有时候想把评论的头像设置成圆形，鼠标放上时还有动感的旋转效果，其实我们在wordpress原生态评论和多说评论上都容易通过CSS来实现。

wordpress设置圆形旋转头像

在/wp-content/themes/目录下，找到你当前使用的主题的文件夹，进入后，找到style.CSS，将下面的代码复制后，粘贴到style.CSS文件的最下面，然后保存即可:

.avatar{float:left;margin-right:8px;padding:1px;border:1px solID #cfd9e1;wIDth:40px;height:40px; /*设置图像的长和宽*/

border-radius: 20px;/*设置图像圆角效果,在这里我直接设置了超过wIDth/2的像素，即为圆形了*/

-webkit-border-radius: 20px;/*圆角效果：兼容webkit浏览器*/

-moz-border-radius:20px;

Box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/

-webkit-Box-shadow: inset 0 -1px 0 #3333sf;

-webkit-Transition: 0.4s;

-webkit-Transition: -webkit-transform 0.4s ease-out;

Transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度）*/

-moz-Transition: -moz-transform 0.4s ease-out;

}

.avatar:hover{/*设置鼠标悬浮在头像时的CSS样式*/

Box-shadow: 0 0 10px #fff; rgba(255,255,.6),inset 0 0 20px rgba(255,1);

-webkit-Box-shadow: 0 0 10px #fff; rgba(255,1);

transform: rotateZ(360deg);/*图像旋转360度*/

-webkit-transform: rotateZ(360deg);

-moz-transform: rotateZ(360deg); }

多说评论圆形头像设置

圆角（或者圆形）+阴影

#ds-reset .ds-avatar img{

wIDth:54px;height:54px; /*设置图像的长和宽*/

border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过wIDth/2的像素，即为圆形了*/

-webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/

-moz-border-radius:27px;

Box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/

-webkit-Box-shadow: inset 0 -1px 0 #3333sf;

}

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

#ds-reset .ds-avatar img{

wIDth:54px;height:54px; /*设置图像的长和宽，这里要根据自己的评论框情况更改*/

border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过wIDth/2的像素，即为圆形了*/

-webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/

-moz-border-radius:27px;

Box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/

-webkit-Box-shadow: inset 0 -1px 0 #3333sf;

-webkit-Transition: 0.4s;

-webkit-Transition: -webkit-transform 0.4s ease-out;

Transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/

-moz-Transition: -moz-transform 0.4s ease-out;

}

#ds-reset .ds-avatar img:hover{/*设置鼠标悬浮在头像时的CSS样式*/

Box-shadow: 0 0 10px #fff; rgba(255,1);

transform: rotateZ(360deg);/*图像旋转360度*/

-webkit-transform: rotateZ(360deg);

-moz-transform: rotateZ(360deg);

}

注意设置背景颜色 #ds-thread {background: #ffffff;}不然很难看。具体自己修改吧。

设计达人多说评论样式完整版

这个代码是根据设计达人网站的风格而配色的，所以使用的时候记得改下配色。特别是记得改「#ds-reset .ds-avatar,#ds-thread #ds-reset ul.ds-children .ds-avatar {background:网站的背景颜色}」。

#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {border:0px;color:#848568;text-shadow:none;background:#dddfc2}

#ds-thread #ds-reset .ds-highlight {Font-family:Arial,Helvetica,sans-serif;Font-size:14px;Font-weight:bold;color:#848568 !important;}

#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {color:#696a52;background:#d4d6ba}

#ds-thread #ds-reset a.ds-highlight:hover {color:#696a52 !important;}

 

#ds-thread {padding-left:30px;}

#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {overflow:visible}

#ds-thread #ds-reset .ds-post-self {padding:10px 0 10px 10px;}

#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {border:0 !important;}

#ds-reset .ds-avatar,#ds-thread #ds-reset ul.ds-children .ds-avatar {position:absolute;top:26px;left:-14px;padding:5px;wIDth:36px;height:36px;Box-shadow:-1px 0 1px rgba(0,.15) inset;border-radius:46px; background:#E5E6D0;}

#ds-thread #ds-reset ul.ds-children .ds-avatar {left:-23px;}

#ds-thread .ds-avatar a {display:inline-block;padding:1px; wIDth:32px;height:32px;border:1px solID #b9baa6;border-radius:50%; background-color:#fff !important}

#ds-thread .ds-avatar a:hover {border-color:#de5a4e}

#ds-thread .ds-avatar > img {margin:2px 0 0 2px}

#ds-thread #ds-reset .ds-replyBox {Box-shadow:none;}

#ds-thread #ds-reset ul.ds-children .ds-replyBox.ds-inline-replyBox a.ds-avatar,

#ds-reset .ds-replyBox.ds-inline-replyBox a.ds-avatar {left: 0;top: 0; padding: 0;wIDth: 32px !important;height: 32px !important; background: none;Box-shadow: none; }

#ds-reset .ds-replyBox.ds-inline-replyBox a.ds-avatar img {wIDth: 32px !important;height: 32px !important; border-radius:50%;}

#ds-reset .ds-replyBox a.ds-avatar,

#ds-reset .ds-replyBox .ds-avatar img { padding:0;wIDth:50px !important;height:50px !important; border-radius:5px; }

#ds-reset .ds-avatar img {wIDth:32px !important;height:32px !important;border-radius:32px;Box-shadow:0 1px 3px rgba(0,0.22);

-webkit-Transition:.4s all ease-in-out;-moz-Transition:.4s all ease-in-out;-o-Transition:.4s all ease-in-out;-ms-Transition:.4s all ease-in-out;Transition:.4s all ease-in-out;

}

.ds-post-self:hover .ds-avatar img {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}

 

#ds-thread #ds-reset .ds-comment-body {background: #F0F0E3;padding:15px 15px 12px 32px;border-radius:5px; Box-shadow:0 1px 2px rgba(0,.15),0 1px 0 rgba(255,.75) inset;}

 

#ds-thread #ds-reset .ds-comment-body p{color:#787968}

#ds-thread #ds-reset .ds-comments a.ds-user-name {Font-weight:bold;color:#696A52 !important;}

#ds-thread #ds-reset .ds-comments a.ds-user-name:hover {color:#D32 !important;}

 

#ds-thread #ds-reset #ds-hot-posts {border:0}

#ds-reset #ds-hot-posts .ds-gradIEnt-bg {background:none;}

 

#ds-reset #ds-bubble #ds-ctx .ds-ctx-entry {padding:0;}

#ds-reset #ds-bubble .ds-avatar,#ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {position:static;padding:0;border:0; background:none;Box-shadow:none;}

#ds-reset #ds-bubble .ds-avatar img,#ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {wIDth:45px !important;height:45px !important;}

#ds-reset #ds-bubble .ds-user-name{padding-left:13px;}

 

#ds-reset .ds-comment-body #ds-ctx {border-left:1px solID #b9baa6;background-color:#e8e8dc !important}

#ds-reset #ds-ctx {margin-right:-15px}

#ds-reset #ds-ctx .ds-ctx-entry {position:relative;padding:10px 30px 10px 10px;}

#ds-reset #ds-ctx .ds-ctx-entry .ds-avatar {top:6px;left:5px;background:none;Box-shadow:none;}

#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body {margin-left:46px;}

#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-content {color:#787968}

#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {color:#696A52;Font-weight:bold}

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

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

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

次方法来自欲思博客

本站多说评论样式

多说评论扁平化风格CSS样式

总结

以上是内存溢出为你收集整理的WordPress评论及多说评论圆形旋转头像设置全部内容，希望文章能够帮你解决WordPress评论及多说评论圆形旋转头像设置所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。