继续改进评论框

在上次的美化当中,为评论框添加了圆角,令看起来不是那么生硬。今天继续改进一下评论框。由于目前使用的是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了一下,没刚才那么明显的难看了 ➡

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

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

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

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

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

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

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

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

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

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

评论已关闭。