WordPress 2.7 嵌套留言的设计样式补充

WordPress 2.7 已经发布好一段时间了,而我也只是最这两天更新日志主题时候才开始认真看下其新功能的使用。主要还是在留言嵌套回复的样式设计上,在这里我补充一下相关的样式代码,当作记录。

留言嵌套回复的使用在WordPress的官方文档有详细的说明,可能参见这里还有这里;同官方一样是英文详细介绍的看这里;如果想看下中文的介绍可以参考这里。上面的几个链接应该在各位更改模板时候起到一定的帮助。

wordpress 27 comments enhancements WordPress 2.7 嵌套留言的设计样式补充

当更改完成后就需要对留言的样式进行修改,那么应该对那些命名的CSS代码进行修改呢?如下我把可能在修改中用到的样式代码贴出,也是作为参考:

ul.commentlist li div.reply { font-size:11px; color:#000000;background:#000000 none repeat scroll 0 0;border:1px solid #666666;text-align:center;width:90px;font-family:helvetica,arial,sans-serif;font-size:9px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:bold;line-height:1; padding:5px 10px;}
ul.commentlist li div.reply a { font-weight:bold; }
ul.commentlist li ul.children li.depth-2 { margin:0.45em 0.45em 0 1.5em;background:#292E32 none repeat scroll 0 0; }
ul.commentlist li ul.children li.depth-3 { margin:0.45em 0.45em 0 2em;}
ul.commentlist li ul.children li.depth-4 { margin:0 .45em 0 2.5em;background:#292E32 none repeat scroll 0 0;}
ul.commentlist li ul.children li.depth-5 {}
ul.commentlist li div.comment-author { padding:0 170px 0 0; }
ul.commentlist li ul.children li.bypostauthor {}
ul.commentlist li ul.children li.comment-author-admin {background:#777777 none repeat scroll 0 0;}
ul.commentlist li.comment-author-admin {background:#777777 none repeat scroll 0 0;}
ul.commentlist li.pingback {background:#777777 none repeat scroll 0 0;}
ul.commentlist li div.vcard img.photo {}
ul.commentlist li div.vcard img.avatar-32 {}
ul.commentlist li div.vcard img.avatar { border:2px solid #000000; float:left; top:5px; }

其中如下两句可能大家能常用到,就是对网站主人的特定样式定义:

ul.commentlist li ul.children li.comment-author-admin {background:#777777 none repeat scroll 0 0;}
ul.commentlist li.comment-author-admin {background:#777777 none repeat scroll 0 0;}

我不知道对作者的定义是否根据模板的不同而不同,因为上面的两句我在试验后并不生效,结果改成下面则可:

.commentlist li.comment.bypostauthor {border-top:1px solid #FFCC33;}

希望上面的代码和文章链接对大家有用。;)

分类:WordPress;标签:, , , ;收藏本文的永久链接

20 Responses to “WordPress 2.7 嵌套留言的设计样式补充”

  1. xiaorsz 回复此留言 2009/01/19 04:50 #comment-4137

    图片里第一个就是我的以前的头像,呵呵!!窃喜下!!

    • Jinwen 回复此留言 2009/01/19 19:47 #comment-4156

      这样啊?不如给你一个广告位?如何?嘻嘻。

  2. life97 回复此留言 2009/01/19 05:43 #comment-4138

    可惜少人留言,要不就试试这个新功能了。

  3. welee 回复此留言 2009/01/19 09:21 #comment-4153

    我个人比较不喜欢嵌套,感觉排版很乱,不过这篇文章不错,先收藏哈!

    • iColor 回复此留言 2009/01/19 10:34 #comment-4154

      嵌套和不嵌套排版各有各的好处,还没想出一个妥协的方法...

    • Jinwen 回复此留言 2009/01/19 18:39 #comment-4155

      嵌套的一个好处就是能直接查看到需要回复的内容,让其它人能了然。排版是个问题,我都在想如何才能清晰点。

    • Leeiio 回复此留言 2009/01/21 02:29 #comment-4167

      目前這樣的排版挺不錯的

  4. Sivan 回复此留言 2009/01/21 13:16 #comment-4171

    现在的评论显示样式很好看,哈哈~

    • Jinwen 回复此留言 2009/01/21 15:59 #comment-4174

      但是在IE6下存在的问题我还没有去解决。

  5. Oscar 回复此留言 2009/03/07 16:25 #comment-4733

    现在样式非常好看,这个主题也很cool。

    之前对中文支持不好,现在字体都变得好看了。

  6. leesum 回复此留言 2009/04/08 07:38 #comment-5694

    很炫的回复样式···

  7. sameasy 回复此留言 2010/02/27 11:09 #comment-13038

    不知道贵站的评论样式是如何实现的,看上去比较整洁 美观,能指教一下吗

    • Jinwen 回复此留言 2010/02/27 11:25 #comment-13039

      你可以通过搜索查找一下我曾经的一些文章,谢谢 :smile:

  8. kenneth 回复此留言 2010/03/01 11:29 #comment-13088

    我以前是从 http://www.wpg.im 来到你的站的。按这篇文章以及 http://blog.beyes.tw/255 的方法开启了WP原生的嵌套功能。最近有位朋友也需要这样搞,只是我没有保存你的网址,在 WPG 里翻来翻去又找不到你的站 :sad: (忘了你的名字,只记得你的博客的 header 有许多黄色圈圈),我搜索呀搜索呀,终于找到你的博客了。 :roll: