说说我在WordPress 2.7中留言嵌套的样式设计

既然Js O3 beta使用了 WordPress 2.7 中原生的留言嵌套功能,我还是应该对其留言的样式好好认真一下。一般我们看到的最常见嵌套样式就是利用回复楼层的缩进以便区分,再套上边框显示。这也是我之前一直觉得嵌套样式在排版混乱的主要原因,所以我不喜欢自己主题也是这样的显示方式。

我想了一下,还是希望嵌套的样式尽量保持一层一层,却又不失与父楼层的联系。因为,其实嵌套的留言样式有一个好处就是能让其它访客知道留言的上下文,不用只看到@XXX的字样。说到这里不得不提一下在Shawn的留言中,利用JS功能把需回复留言的原内容弹出显示。这个功能我也一直想实现,只是还没来得及就给他完成了,呵呵,大家都去看看,很不错的。

言归正传,我对自己的留言样式进行了修改:增加了父子留言之间连线显示,效果就如一些电脑程序中的文件管理显示方式,象下图:

wordpress tread comment design 1 说说我在WordPress 2.7中留言嵌套的样式设计

连线的实现在CSS中并不难。对于第一层的连线,需要的只是对.commentlist li.depth-2的样式设置border-top属性,但不设置margin-left,而改为对其设置padding-left实现文字的缩进;当然avatar头像只是简单的margin-left则可以了。

而对于第二层的回复,因为需要增加连线连接第一层回复的头像处,这个我觉得并不好实现。尝试过的方法是利用float属性浮动第二层,然后把留言内容利用margin-top压下,连线则为.commentlist li.depth-3border-leftborder-bottom,但这样根本不行,放弃。

然后想到利用该层中avatar头像的这个DIV进行:现在的方法是利用.commentlist li.depth-3 .avatar(回复二层的头像DIV)的border-leftborder-bottom实现连线;然后把.commentlist li.depth-3 .avatar .img这个图片进行float浮动,并利用padding将其设计到需要的位置处;至于每二层回复的顶部连线同第一层连线的设计,通过对.commentlist li.depth-3border-top属性则可以实现。

在上面的设计方法中,虽然我没有把具体的样式代码写出,但上面的文字解释相信懂得的CSS的各位应该能看得个明白。其实这样的设计目前只能在IE7和FF下实现,失败的地方依然是万恶的IE6,由于用到padding的属性,而padding在IE6的使用总是有这样那样的问题。不信大家可以在IE6下看下效果,一点也不好。

写这篇文章的主要目的其实是想看下大家对这个样式在IE6下的显示问题有没有解决的办法可以告诉一下我,因为我并不想通过IE6的hack代码进行修正,却又被迫放弃W3C的通过,很是茅盾矛盾哦;再者,如果大家有看过一些值得参考的嵌套样式,不妨给我留个地址,让我也多学习学习,谢了。

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

36 Responses to “说说我在WordPress 2.7中留言嵌套的样式设计”

  1. Leeiio 回复此留言 2009/01/22 03:30 #comment-4181

    我是來找錯別字的,“茅盾”-> 矛盾 :)

    • Jinwen 回复此留言 2009/01/22 08:23 #comment-4187

      就是呢,居然打出来了,我那时就看着怪怪的。可能这几年接触中文太少了,问题看不出个所以来,呵呵。

  2. YIMO 回复此留言 2009/01/22 07:35 #comment-4184

    这种方式蛮好玩的,不错!

  3. Shawn 回复此留言 2009/01/22 02:15 #comment-4178

    抢个沙发。

    现在的主题很清爽!然后我反馈一个问题: 1024 分辨率下会出现横向滚动条。

  4. Betty 回复此留言 2009/01/22 02:28 #comment-4179

    可以试试ie7.js,一个解决了很多ie6的bug的js库
    我写的介绍:http://myfairland.net/make-ie6-normal/

    • Jinwen 回复此留言 2009/01/22 08:22 #comment-4186

      谢谢提供。我正在试,但效果还不能完全修正。

  5. iColor 回复此留言 2009/01/22 05:58 #comment-4183

    回复 按钮放在那不是浪费了一行吗?放时间后面也可以吧...个人看法...

    还没升级 2.7, 先不关注这块内容...

  6. welee 回复此留言 2009/01/22 09:12 #comment-4188

    这篇文章绝对要收藏,因为我现在正为 2.7 的嵌套而烦,这个排版倒是蛮清楚的。
    话说,上面那张图片竟然有我耶,哈哈!

  7. Zoll 回复此留言 2009/01/22 17:20 #comment-4192

    喜欢喜欢 很想Win的根状目录呀 呵呵

  8. underone 回复此留言 2009/01/22 13:34 #comment-4191

    所以我才抗拒嵌套回复。。。

  9. onefrozen 回复此留言 2009/01/23 04:52 #comment-4198

    问个问题

    我仿照这个写,怎么老是404呢?

  10. 网名 回复此留言 2009/01/23 14:27 #comment-4200

    感觉你的风格太白了``

  11. 天涯行客 回复此留言 2009/01/24 14:22 #comment-4203

    我觉得嵌套评论不如论坛里常用的引用回复(评论)功能,引用回复(评论)功能比嵌套评论更加实用

  12. xiaorsz 回复此留言 2009/01/25 04:05 #comment-4204

    很有创意的说!!IE6是很让人头疼的!不管他也罢,不过网上应该有很多hack的吧!!

  13. xiaorsz 回复此留言 2009/01/25 04:10 #comment-4205

    我的留言怎么没见了?

  14. cosbeta 回复此留言 2009/01/25 05:21 #comment-4206

    cosbeta 给你拜年了,哈哈,祝你新年快乐,春节愉快,万事如意

  15. tianweier 回复此留言 2009/02/03 16:10 #comment-4344

    主人回复有点奇怪。。。。

    • Jinwen 回复此留言 2009/02/03 16:39 #comment-4345

      是哪里奇怪呢?我并没有对主人回复设置什么样式的。

  16. X-Force 回复此留言 2009/04/28 19:43 #comment-6328

    @网名 我想试试这个能否嵌套的?

  17. Jinwen 回复此留言 2009/04/28 19:51 #comment-6329

    @X-Force 现在的这个主题是Ajax提交留言的,没有嵌套;文中介绍的嵌套样式现在是Js Paper主题中体现。而现在你能看到的留言样式有嵌套的设计,但是在Js O3 Lite主题中体现。我把它们分开了,上面的主题如果你希望下载,地址在这里:http://wordpress.org/extend/themes/profile/jinwen

  18. 外贸人 回复此留言 2010/02/04 17:47 #comment-12594

    你这样留言背景相间隔是怎么搞的??

    • Jinwen 回复此留言 2010/02/04 21:22 #comment-12596

      一般主题会在留言样式中添加.thread-alt这样的区分。但要看主题的支持与否,你可以下载一下我的主题看下,或者就明白了。


The trackbacks and pingpacks:

  • WordPress 2.7中留言嵌套的样式设计 at WordPress Today - Pingback on 09/01/22 01:25