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 Firefox 3 Windows 7 Windows 7

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

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

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

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

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

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

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

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

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

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

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

    5楼
  6. ligyxy ligyxy Nokia Series60 2 Nokia Series60 2 Nokia Series60 Nokia Series60

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

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

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

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

    7楼
  8. ligyxy ligyxy Nokia Series60 2 Nokia Series60 2 Nokia Series60 Nokia Series60

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

    8楼

Leave a Reply