DISCUZ X3.x 系列论坛首页版块横排美化

插件名称: DISCUZ X3.x 论坛首页版块横排美化
插件来源: 二次修改他人插件
适用版本: DISCUZ X3.x
语言编码: GBK简体  
发布时间: 2013-12-08
插件作者: 明月无痕
插件简介: DISCUZ X3.x 论坛首页版块横排美化 显示简介、子版、版主等

已测试/完美支持Discuz X3.0！GBK

效果图：




　　因为正常的竖排比较单调，所以一直以来总想改出个横排美化样式，看了不少帖子，但都不理想，就参照别人的东西自己改了一个，自己对代码也只知道点皮毛，代码里面肯定有错误和冗余，请大侠们指教。

1、打开 template/default/forum/discuz.htm 查找

1. <!--{if $forum['orderid'] && ($forum['orderid'] % $cat['forumcolumns'] == 0)}-->
   
2. </tr>
   
3. <!--{if $forum['orderid'] < $cat['forumscount']}-->
   
4. <tr class="fl_row">
   
5. <!--{/if}-->
   
6. <!--{/if}-->
   
7. <td class="fl_g" width="$cat[forumcolwidth]">
   
8. <div class="fl_icn_g"{if !empty($forum[extra][iconwidth]) && !empty($forum[icon])} style="width: {$forum[extra][iconwidth]}px;"{/if}>
   
9. <!--{if $forum[icon]}-->
   
10. $forum[icon]
    
11. <!--{else}-->
    
12. <a href="$forumurl"{if $forum[redirect]} target="_blank"{/if}><img src="{IMGDIR}/forum{if $forum[folder]}_new{/if}.gif" alt="$forum[name]" /></a>
    
13. <!--{/if}-->
    
14. </div>
    
15. <dl{if !empty($forum[extra][iconwidth]) && !empty($forum[icon])} style="margin-left: {$forum[extra][iconwidth]}px;"{/if}>
    
16. <dt><a href="$forumurl"{if $forum[redirect]} target="_blank"{/if}{if $forum[extra][namecolor]} style="color: {$forum[extra][namecolor]};"{/if}>$forum[name]</a><!--{if $forum[todayposts] && !$forum['redirect']}--><em class="xw0 xi1" title="{lang forum_todayposts}"> ($forum[todayposts])</em><!--{/if}--></dt>
    
17. <!--{if empty($forum[redirect])}--><dd><em>{lang forum_threads}: $forum[threads]</em>, <em>{lang forum_posts}: $forum[posts]</em></dd><!--{/if}-->
    
18. <dd>
    
19. <!--{if $forum['permission'] == 1}-->
    
20. {lang private_forum}
    
21. <!--{else}-->
    
22. <!--{if $forum['redirect']}-->
    
23. <a href="$forumurl" class="xi2">{lang url_link}</a>
    
24. <!--{elseif is_array($forum['lastpost'])}-->
    
25. <!--{if $cat['forumcolumns'] < 3}-->
    
26. <a href="forum.php?mod=redirect&tid=$forum[lastpost][tid]&goto=lastpost#lastpost" class="xi2"><!--{echo cutstr($forum[lastpost][subject], 30)}--></a> <cite>$forum[lastpost][dateline] <!--{if $forum['lastpost']['author']}-->$forum['lastpost']['author']<!--{else}-->{lang anonymous}<!--{/if}--></cite>
    
27. <!--{else}-->
    
28. <a href="forum.php?mod=redirect&tid=$forum[lastpost][tid]&goto=lastpost#lastpost">{lang forum_lastpost}: $forum[lastpost][dateline]</a>
    
29. <!--{/if}-->
    
30. <!--{else}-->
    
31. {lang never}
    
32. <!--{/if}-->
    
33. <!--{/if}-->
    
34. </dd>
    
35. </dl>
    
36. </td>

复制代码

替换成

1. <!--横排开始　落脚论坛-明月无痕　研究版 -->
   
2. <!--{if $forum['orderid'] && ($forum['orderid'] % $cat['forumcolumns'] == 0)}-->
   
3. </tr>
   
4. <!--{if $forum['orderid'] < $cat['forumscount']}-->
   
5. <tr class="fl_row">
   
6. <!--{/if}-->
   
7. <!--{/if}-->
   
8. <td class="fl_g" width="$cat[forumcolwidth]" style="padding:10px; ">
   
9. <div class="b-top w100">
   
10. <div class="b-name">
    
11. <h2 class="margin"><a href="$forumurl"{if $forum[redirect]} target="_blank"{/if}{if $forum[extra][namecolor]} style="color: {$forum[extra][namecolor]};"{/if}>$forum[name]</a>　</h2>
    
12. </div>
    
13. <div style="clear mod w100">
    
14. <!--{if $forum['moderators']}-->　{lang forum_moderators}: <span class="xi2">$forum[moderators]</span><!--{/if}-->
    
15. </div>
    
16. <div class="clear w100"><div class="b-icon">$forum[icon]</div><!--板块图片 -->
    
17. <div class="b-des">$forum[description]</div><!--板块简介 -->
    
18. <!--子板块开始 -->
    
19. <div class="clear w100">
    
20. <!--{if $forum['subforums']}--><p>{lang forum_subforums}: $forum['subforums']</p><!--{/if}--></div>
    
21. </div>
    
22. <!--子板块结束 -->
    
23. <div class="clear b-thread" style="background: url(images/listbg_li.gif) no-repeat;">
    
24. <ul id="dateline_$forum[fid]" style="display:none;" class="list">
    
25. <!--{loop ${"new_no".$forum[fid]."_threadlist"} $row}-->
    
26. <div class="t_no-pms">
    
27. <!--{if $forum['permission'] == 1}-->
    
28. {lang private_forum}, 您目前没有权限可查阅主题及内容
    
29. <!--{else}-->
    
30. <small class="t_date">$row['date']</small><a href="forum.php?mod=viewthread&tid=$row[tid]" $row[highlight] title="$row[subject] ($row['date'])" target='_self'>$row[view_subject]</a>
    
31. <!--{/if}-->
    
32. </div>
    
33. <!--{/loop}-->
    
34. </ul>
    
35. </div>
    
36. <div id="lastpost_$forum[fid]">
    
37. <div class="clear t-lastpost w100">
    
38. <!--{if $forum['permission'] == 1}-->
    
39. {lang forum_lastpost}: {lang private_forum}
    
40. <!--{else}-->
    
41. <!--{if $forum['redirect']}-->
    
42. {lang forum_lastpost}: <a href="$forumurl" class="xi2">{lang url_link}</a>
    
43. <!--{elseif is_array($forum['lastpost'])}-->
    
44. {lang forum_lastpost}: <a href="forum.php?mod=redirect&tid=$forum[lastpost][tid]&goto=lastpost#lastpost" class="xi2"><!--{echo cutstr($forum[lastpost][subject], 22)}--></a> <cite><!--{if $forum['lastpost']['author']}-->($forum['lastpost']['author'])<!--{else}-->{lang anonymous}<!--{/if}--></cite>
    
45. <!--{else}-->
    
46. {lang forum_lastpost}: {lang never}
    
47. <!--{/if}-->
    
48. <!--{/if}-->
    
49. </div>
    
50. <div style="clear mod w100">
    
51. {lang forum_threads}数: $forum[threads] | 总{lang forum_posts}: $forum[posts]
    
52. <span style="today-post">
    
53. <!--{if $forum[todayposts] && !$forum['redirect']}--> | 今日帖数: <em class="p-yes" title="今日帖数forum[todayposts]">$forum[todayposts]</em><!--{else}--> | 今日帖数: <em class="p-no" title="今日帖数:0">0</em><!--{/if}-->
    
54. </div>
    
55. </div>
    
56. </td>
    
57. <!--横排结束 -->

复制代码

2、打开 template/default/common/common.css
在最后面添加

1. 
   
2. /*横排美化*/
   
3. /*~~~~~~~~~~~ EXTRA Common~~~~~~~~~~~~~*/
   
4. .hand { cursor:hand; cursor: pointer; }
   
5. .clear { clear:both; }
   
6. .w100 { width:100%; }
   
7. /*~~~~~~~~~~~ EXTRA Index Forumlist~~~~~~~~~~~~~*/
   
8. .forumlist th.board { vertical-align: top; background-image: none; padding:10px !important; }
   
9. div.b-top { display:block; width:100%; overflow: hidden; }
   
10. div.b-name { float:left; height: 20px; width:60%; overflow:hidden; }
    
11. div.b-name h2.margin { margin:0 0 3px 0; }
    
12. div.crtl { float:right; text-align:right; }
    
13. div.ctrl img { vertical-align:middle; margin:1px 0; }
    
14. span.today-post em, span.today-post em b { font-family: Verdana, Arial, Helvetica, sans-serif; }
    
15. em.p-yes { padding:0 5px; border:1px solid #F06; background:#FFFFE1; color:#F06; font-size:11px; font-weight:bold; }
    
16. em.p-no { padding:0 5px; border:1px solid #CCC; font-size:11px; }
    
17. div.b-icon { float:left; }
    
18. div.b-des { color:{LIGHTTEXT}; overflow:hidden; }
    
19. div.b-thread { margin-top:5px; padding:1px 0; background-image: url(images/listbg_li.gif) no-repeat; width:100%; }
    
20. div.b-thread ul.list { padding:0 2px 0 10px; list-style-type: none; line-height: 20px; }
    
21. div.b-thread ul.list .t_no-pms { overflow: hidden; height:20px; width:100% }
    
22. div.b-thread ul.list .t_date { float:right; color:{LIGHTTEXT}; margin: 0 0 0 5px }
    
23. div.t-lastpost { color:{LIGHTTEXT}; margin-top:5px;overflow: hidden; height:1.3em; }
    
24. div.mod { color:{LIGHTTEXT}; overflow: hidden; height:1.5em; }

复制代码

完毕。
说明一下，样式中有多余的项目，大家自己对照删除吧。
在discuz.htm中可能会找到2个相同的东西，改靠近下面的那段。
另外，版块图片和版块简介间挨得过近不好看，不知道在什么地方调整，没办法只能在做图片时左右两边各留出了点空白，谁能帮助解决下。

先收藏了。

支持下分享。。。

很不错，使用的是X3.2的程序
效果：www.zhenpinbbs.com

先记号备用。

三个老师（www.3laoshi.com）多谢你的分享，学习了