博酷网志的wordpress-thread-comment样式表

7个回复 4,805 views WordPress, 插件 2008-06-05 00:21 booqoo

有同学留言，希望提供这个wordpress-thread-comment的css代码，所以放在这里。

以下是正文：

1。博酷网志采用的主题(themes)是underone同学荣誉出品的 G7 v5。

2。G7 v5的主题中，日志的回复样式使用了图片作为背景，形成了边框：
回复区域上边框：
top
回复区域下边框：
bottom
回复区域的中间部分，没有使用背景图片，而是定义了div的border。
宽度变成了width: 552px，和上面两个背景图片正好吻合，所以整体看来，是一个完整的框体。

相关的css代码如下：

  1. #comments ol li {
  2. margin-bottom: 10px;
  3. background-image: url(images/commentlist_top.png);
  4. background-repeat: no-repeat;
  5. background-position: left 22px;
  6. }
  7. #comments .mid {
  8. <em>/*下面定义了回复的中间部分的左右边框样式 */</em>
  9. border-right-width: 1px;
  10. border-left-width: 1px;
  11. border-right-style: solid;
  12. border-left-style: solid;
  13. border-right-color: #ebeae5;
  14. border-left-color: #ebeae5;
  15. background-color: #faf9f5;
  16. <em>/*上面定义了回复的中间部分的左右边框样式 */</em>
  17. width: 552px;
  18. display: block;
  19. margin-top: 12px;
  20. padding-left: 10px;
  21. padding-right: 10px;
  22. padding-top: 4px;
  23. overflow: hidden;
  24. }
  25. #comments .bottom {
  26. background-image: url(images/commentlist_bottom.png);
  27. background-repeat: no-repeat;
  28. background-position: left top;
  29. display: block;
  30. height: 10px;
  31. width: 574px;
  32. }

3。如果需要将管理员的回复的背景颜色和访客的回复区别开来，可以尝试专门为管理员的回复定义新的样式：

  1. #comments ol li.admin {
  2. background-image: url(images/commentlist_top_admin.png);
  3. }
  4. #comments .admin cite a {
  5. color: #a14c2a;
  6. }
  7. #comments .admin .mid {
  8. padding-top: 4px;
  9. background-color: #eff5f7;
  10. overflow: hidden;
  11. }
  12. #comments .admin .bottom {
  13. background-image: url(images/commentlist_bottom_admin.png);
  14. }

以上1，2，3点，是G7 v5主题中对日志回复的处理。
如果以上都能看懂，那么下面的也不会有问题。

4。使用了wordpress-thread-comment后，插件会根据你的设置，控制日志页面的输出的代码。
设置该项的地址是，wordpress后台 → 管理 → WP Thread Comment 菜单

请修改 编辑评论的HTML 一栏为：

  1. <span class="toptop"></span>
  2. <span class="midmid" id="comment-[ID]"><p>[author]  Says @ [date] [time] :</p>[content]</span>
  3. <span class="botbot"></span>

5。完成以上设置后，实际输出的页面代码大致如下(此处省略部分冗余的链接的代码，以便阅读)

  1. <li id="comment-70">
  2. nicelover Says @ 08-05-26 22:20:05
  3.  
  4. <em>/*原始回复正文部分开始*/</em>
  5. <span class="mid">
  6. <p>好似回复错了.天哪..真不小心.</p>
  7. <p class="thdrpy">[回复]</p>
  8.  
  9. <em>/*嵌套的回复位于原始回复的正文部分内部，请留意，上面的 <span class="mid"> 未闭合 */</span></em>
  10. <em>/*以下是嵌套的回复，回复框顶部样式为 toptop，中间部分为midmid，底部为botbot */</em>
  11.  
  12. <span class="toptop"></span>
  13. <span class="midmid" id="comment-72">
  14. <p>booqoo Says @ 2008-05-26 22:36:03 :</p>
  15. <p>wp-23-statistics：统计插件，见本网志右侧下方“统计”部分。</p>
  16. <p class="thdrpy">[回复]</p>
  17. </span>
  18. <span class="botbot"></span>
  19. <em>/*嵌套回复完毕*/ </em>
  20.  
  21. </span>
  22. <em>/*原始回复正文部分结束，闭合了上文的 <span class="mid"> */</span></em>
  23.  
  24. <span class="bottom"></span>
  25. </li>

6。以上页面代码所用到的css样式如下（你可以直接加到你的style.css最后面）
需要说明的是，嵌套回复的上边框和下边框仍然是用了图片背景，显示出框框的模样。
图片换过了，分别变成了 commentlist_toptop.png 和 commentlist_botbot.png，
是直接把 commentlist_top.png 和 commentlist_bot.png 处理以下，变短了一些，上传到images目录，
嵌套回复的中间部分，左右的边框仍然是利用div的border，但是宽度变成了width: 452px，和上面两个背景图片正好吻合。

  1. #comments .toptop {
  2. background-image: url(images/commentlist_toptop.png);
  3. background-repeat: no-repeat;
  4. background-position: left top;
  5. display: block;
  6. margin-top: 10px;
  7. height: 10px;
  8. width: 474px;
  9. clear: both;
  10. }
  11.  
  12. #comments .mid .midmid {
  13. border-right-width: 1px;
  14. border-left-width: 1px;
  15. border-right-style: solid;
  16. border-left-style: solid;
  17. border-right-color: #ebeae5;
  18. border-left-color: #ebeae5;
  19. background-color: #faf9f5;
  20. width: 452px;
  21. display: block;
  22. margin: 0px;
  23. padding-left: 10px;
  24. padding-right: 10px;
  25. overflow: hidden;
  26. }
  27.  
  28. #comments .botbot {
  29. background-image: url(images/commentlist_botbot.png);
  30. background-repeat: no-repeat;
  31. background-position: left top;
  32. display: block;
  33. height: 10px;
  34. width: 474px;
  35. }
  36.  
  37. .thdrpy {
  38. float: right;
  39. text-align: right;
  40. margin: 0px;
  41. padding-right: 20px;
  42. }

7。实际的页面效果，见这里。

8。呼呼，交待完毕，睡觉。
如果还有疑问，敬请留言。欢迎您的探讨。

　

标签: , ,         手机访问博酷网志

Trackback url | Rss 2.0

已经有7个回复

  1. Dianso Says @ 08-06-5 13:40

    谢谢分享~

    [回复]

    请教 回复:
    八月 17th, 2009 at 20:28

    如何改成和默认的样式一样啊？？

    [回复]

    booqoo 回复:
    八月 23rd, 2009 at 01:37

    这个要自己参照默认的主题样式自己写html代码了。。必要时还要切图哦

    [回复]
  2. Dianso Says @ 08-06-5 14:30

    你好，按你发的已经做了，但是显示不出来botbot那张图啊

    [回复]
  3. Dianso Says @ 08-06-5 14:42

    我参考了下你的css，问题已经解决，再次感谢

    [回复]
  4. booqoo Says @ 08-06-5 16:36

    ：）我的做法很老土的，也不适合多层嵌套，承蒙错爱了。有问题请再留言。

    [回复]

    11 回复:
    八月 14th, 2008 at 00:40

    谢谢。

    [回复]

看完了要说点啥么？