Old

WP2.7新评论功能的CSS定义

自从完成 zFirst 0.9后,一直不太明白怎么自定义 wordpress 2.7 新评论功能的 CSS(我的评论样式只是简单定义了),今天闲逛到 aoogo 那,有篇文章《让您的主题支持WP2.7新留言评论功能》,里面就有我所需的东东。下面是 wordpress 2.7 新评论CSS部分的一套配色方案,使用新评论的朋友可以直接复制到 style.css 里修改:

ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li div.comment-author {}
ol.commentlist li div.vcard { font:normal 16px georgia,times,serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url {}
ol.commentlist li div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font-size:9px; }
ol.commentlist li div.comment-meta a { color:#ccc; }
ol.commentlist li p { font-size:11px; margin:0 0 1em; }
ol.commentlist li ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
ol.commentlist li div.reply { font-size:11px; }
ol.commentlist li div.reply a { font-weight:bold; }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li {}
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { border-left:5px solid #111; }
ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

其实这些是aoogo引自 Chris Harrison提供的 CSS 部分配色方案,还可以去 Chris Harrison参考提供的几种配色方案。

zww
or
oooo

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/24089

8 comments

  1. 小T 小T Firefox 3.0.10 Firefox 3.0.10 Windows 7 Windows 7

    最近在改评论一直搞不定,都怪自己的技术太差了,哪天zwwooooo指导一下,才发现你的评论有居中效果

    沙发
  2. 林晨 林晨 TheWorld Browser TheWorld Browser Windows XP Windows XP

    也看不出什么东西来,还是自己慢慢研究

    板凳
  3. 吖Bee 吖Bee Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP

    看了《让您的主题支持WP2.7新留言评论功能》,我才明白说什么东东~

    地板
  4. zwwooooo zwwooooo Firefox 3.0.10 Firefox 3.0.10 Windows Server 2003 Windows Server 2003

    @小T 评论部分还是觉得复杂,刚才折腾到最后还是回归原来的

    @林晨 难道和 吖Bee 一样要看了原文才知道啥?都怪自己懒没加注析

    @吖Bee 呵呵,早知道把文章转过来,但又不喜欢转载文章。

    4楼
  5. 左岸读书 左岸读书 Firefox 3.0.10 Firefox 3.0.10 Windows XP Windows XP

    如何做到像您这样统一评论呢?

    5楼
  6. ligyxy ligyxy Nokia Series60 2.8 Nokia Series60 2.8 Nokia Series60 Nokia Series60

    这些我也曾用过,感觉最大的问题就是嵌套回复的时候输入框大小不变,以至于超出了最大的留言框。
    怎么修改…我就不会了…

    6楼
  7. zwwooooo zwwooooo Firefox 3.0.10 Firefox 3.0.10 Windows Server 2003 Windows Server 2003

    @左岸读书 插件啊,Mail To Commenter,可以统一用“@”回复而且都有邮件通知

    @ligyxy 呵呵,我的不会的,会根据嵌套自动缩小的,还有一般设置嵌套个数不要超过5,超过5个嵌套框框就太小了

    7楼
  8. ligyxy ligyxy Nokia Series60 2.8 Nokia Series60 2.8 Nokia Series60 Nokia Series60

    你这么有空啊!有时间真好……

    8楼

Leave a Reply