WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 用CSS3制作漂亮的设计达人留言评论样式

用CSS3制作漂亮的设计达人留言评论样式

PCDotFan10年前

 

用CSS3制作漂亮的设计达人留言评论样式-WP酷

用CSS3制作漂亮的设计达人留言评论样式-WP酷

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;}

查看 Demo

2
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (10)
再想想
  • 蚊哥

    这个用多说的必须的,默认的好难看
    另外,貌似RSS坏掉了,怎么无法访问?

    10年前
    • WP酷

      @蚊哥 忘记改了……现在换到了feedsky

      10年前
  • 饭团同学x

    看到那个「发射」,喷了哈哈哈。
    你不搞以前那个软件收纳盒了?在我博客评论的地址跑 wpku 了?

    10年前
    • WP酷

      @饭团同学x 软件收纳盒由于域名快到期+主机付不起+更新没动力+各种奇奇怪怪的原因所以停更了。。索性用免费域名搞了这货

      10年前
    • 敖天羽

      @饭团同学x [打哈气] 发射真不是抄我的么!!

      10年前
    • WP酷

      @敖天羽 抄win8mi的= =

      10年前
    • 敖天羽

      @WP酷 [黑线] 看来发射太常见我得想个新的

      10年前
  • 红色石头

    的确挺好看的,前台不太懂,我的页面做的还是太简单太丑了~

    10年前
    • WP酷

      @红色石头 简单才是美嘛……

      10年前
  • 阿萨飒

    sasa

    3年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
【牧风制造】CSS3梅花飘落效果
10年前
插件不正常工作必须注意:简单一行代码解决多数问题
10年前
WordPress链接结构优化之标签(tag)存档页优化
9年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1