继续改进评论框

在上次的美化当中，为评论框添加了圆角，令看起来不是那么生硬。今天继续改进一下评论框。由于目前使用的是wp-thread-comment插件，所以，这里的美化主要是针对这个插件的。

缩减评论框的高度

wp-thread-comment默认的嵌套评论的高度是很高的，主要是头像独占一行的原因。所以这里将评论者和评论时间放到头像的旁边。在wp的后台编辑该插件的css文件，添加上以下代码：

.chalt .avatar{
	float:left;
	margin:0 5px;
}

有可能段落的间距很大，可以加上

.chalt p{
margin:3px;
}

给头像添加圆角

这个跟上次的给评论框加上圆角一样，添加代码即可（由于padding和border颜色的原因导致某些图片出现难看内白边，参考了以下别人的代码，加了点阴影，由于对色彩设计不在行，所以暂时可能有点不是很好看，以后再慢慢改进吧）

.avatar {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 0 1px 1px #6b8a6f;
-webkit-box-shadow:0 0 1px 1px #6b8a6f;
box-shadow:0 0 1px 1px #6b8a6f;
padding:0
}

这没什么好说的，只是，这些圆角在IE核心类的浏览器是看不到的。IE下实现圆角一般都是图片、JS或嵌套使用div，比较麻烦。

加粗显示评论者

这个更简单，只需要在wp后台中wp-thread-comment设置中选择“编辑评论的HTML”，用<b></b>包围<cite></cite>即可。

这是一些很小很小的调整，不过，评论处看起来就好看多了，特别是多层嵌套时。 嗯，下一次，应该需要进行avatar头像的缓存处理了，这样，应该能更进一步减轻负担，加快加载的速度。继续向大牛学习去！！

p.s.这次可以说是一波三折，修改了好几次；一开始是图像处理得不好，稍稍修改后；在10：30分居然给我断电了，然后BIOS 居然重置了；上网后，一看，咦，代码居然没放对地方，上次修改弄错了，赶紧修改，囧啊！！

39条评论

    1. @7cbt, 我看了下，在comment-style.css文件中找到.comment-meta｛，将其中的height设为40px看看；
      另外，可以加上以下这段看看如何，应该可以减一点。
      .comment-content p{
      margin:3px;
      }

    1. @mice, 嘿嘿，换个浏览器看看如何。我经常换着浏览器来用的，不过最近IE核心的除非非要用，要不基本没用过了

      1. @流年, 😥 圆角显示你们头像都蛮好的,怎么显示我头像那么恶心= =.

        1. @mice, 嗯，是那个边界的原因，因为我的是白色，所以看不出；我的错，我看看如何修改

          1. @流年, 😀 顺便去我那看看 还能怎么优化优化,除了合并js和css以外.

        2. @mice, update了一下，没刚才那么明显的难看了 ➡

    2. @蛋卷, 啊！！！ ❗ 刚才修改的时候都没发现代码放错地方了！！！！

  6. 越来越技术流了。
    看了好久看到了你的圆角，原来在最外圈，不是里面的黑框。

    1. @vastar, 对于底色是白色的比较容易看出来，一开始的设置也没问题；可是如果是mice之类的底色是其他颜色的话，就有点难弄了，目前暂时如此，继续学习

    1. @Louis Han, 哎！！皆因还在学习阶段啊！！！所以用的时间就多了

    1. @集趣, 嗯，我现在知道的就是嵌套一堆div或用JS之类的

    1. @Mucid, 看起来的确比生硬的边好看一点 🙂

    1. @WordPress啦, 嘿嘿，一边学一边折腾吧

    1. @BoKeam, 很遗憾，目前依然是菜鸟一支！！还在向万戈、木木、阿氓等学习中

    1. @菜根谈, 呵呵，有空就折腾折腾吧

    1. @广州网络营销, 呵呵，能好看就好看点啦

评论已关闭。