WP酷的留言样式在前几天进行了些许美化,由设计达人设计留言样式,当初设计这个留言样式就是为了让更多用户去留言。是不是已经看厌了自带的多说评论框样式?我们来一起将更改它的 CSS 吧!
下面一起来看看这个漂亮的留言评论样式是怎么制作的吧:
CSS 代码
这里重点注意的就是 .ds-avatar 的背景要和页面背景一致,这样就能展示出凹进去的效果。
body {background:#333;} .ds-post-main {position:relative; width:500px;} .ds-avatar {position:absolute; top:20px; width:31px; height:31px; padding:5px; background:#333;border-radius:50%;} .ds-avatar a {display:block; width:31px; height:31px; background:#01cc01; border-radius:50%;} .ds-comment-body {margin-left:20px;padding:10px 10px 10px 30px ;height:80px;background:#01644f;}
HTML 代码
这是多说留言评论的结构,其实我们的 wordpress 也可以这样的。
美化留言评论样式
添加质感:这里主要使用 CSS3 的圆角(border-radius)、阴影(box-shadow)来实现质感,具体使用方法网上一大堆了,我就不啰嗦啦 ^^ 配色方面要尽量配合你的网站风格哦。
交互设计:达人使用的交互只是一个简单的 CSS3 旋转动画(transform:rotate),当然你可以使用更多的动画效果来,不过我不建议搞得过于花哨。
设计达人多说评论样式完整版 (2013-1-31 更新)
这个代码是根据设计达人网站的风格而配色的,所以使用的时候记得改下配色哦。特别是记得改 #ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {background: 网站的背景颜色}。
还有 #ds-thread #ds-reset #ds-bubble {display:none !important}这里,是隐藏鼠标移至用户名称时弹出来的气泡提示框,因为这个样式我没有写,而且觉得一点用也没用,所以直接隐藏了。
#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 {top:15px;left:-20px;padding:5px;width:36px;height:36px;box-shadow:-1px 0 1px rgba(0,0,0,.15) inset;border-radius:46px; background:#E5E6D0;} #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, 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 15px 47px;border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.75) inset;} #ds-thread #ds-reset ul.ds-children .ds-comment-body {padding-left:15px;} #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-bubble {display:none !important} #ds-thread #ds-reset #ds-hot-posts {border:0} #ds-reset #ds-hot-posts .ds-gradient-bg {background:none;}
这个用多说的必须的,默认的好难看
另外,貌似RSS坏掉了,怎么无法访问?
@蚊哥 忘记改了……现在换到了feedsky
看到那个「发射」,喷了哈哈哈。
你不搞以前那个软件收纳盒了?在我博客评论的地址跑 wpku 了?
@饭团同学x 软件收纳盒由于域名快到期+主机付不起+更新没动力+各种奇奇怪怪的原因所以停更了。。索性用免费域名搞了这货
@饭团同学x
发射真不是抄我的么!!
@敖天羽 抄win8mi的= =
@WP酷
看来发射太常见我得想个新的
的确挺好看的,前台不太懂,我的页面做的还是太简单太丑了~
@红色石头 简单才是美嘛……
sasa