设为首页收藏本站

Discuz! 官方站

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 7242|回复: 3

[素材] 【分享】純 diy 論壇直排美化 (適用於可以 diy 的任何版本)

[复制链接]
发表于 2015-10-10 21:47:52 | 显示全部楼层 |阅读模式
大家好
論壇直排美化
大部分都是台灣和香港的站長們
比較喜歡的風格

而直排美化大部分都是要用插件
或是修改一些文件才能達到的美化效果

論壇直排美化效果
就好像版塊設置了圖片列表模式
會有瀑布流的效果喔

今天想和大家分享比較簡單的方法
就是用 diy 來達到我們想要的效果
分享給有需要的站長們^^

1. 首先拉一個 1-1 框架到這個位置下方
    然後在左邊再拉一個 1-1 框架
    在右邊一樣再拉一個 1-1 框架

1.png

2. 拉一個版塊模塊
    這裡按照您的需求設置即可

    特別注意的是
    一個版塊模塊只設置一個分區的版塊
    不要設置跨分區的版塊
    還有就是模塊標題這裡留空不要設置

2.png

3.png

3. 設置好後將原本模塊模板代碼替換掉

4.png

    替換代碼部分這裡提供兩種方案
    您可以選擇一種方案來使用
    或是兩種方案搭配使用

方案1 版塊直排

  1. <fieldset style="width:94%; margin:0 auto; border:solid 1px #c2bec2; -moz-border-radius-topleft: 0px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -webkit-border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;-moz-box-shadow: 3px 3px 5px #a8a3a8; -webkit-box-shadow: 3px 3px 5px #a8a3a8; box-shadow: 3px 3px 5px #a8a3a8;">
  2. <div class="bm_h cl" align=left style="background-color: #F0F8FF;">
  3. <span class="o">
  4. <img onclick="toggle_collapse('category_1');" alt="收起/展開" title="收起/展開" src="static/image/common/collapsed_no.gif" id="category_1_img">
  5. </span>
  6. <h2><a style="" href="forum.php?gid=1"><div style= color:#369;">區版塊名稱</div></a></h2>
  7. </div>
  8. <div style="" class="bm_c" id="category_1">
  9. <table class="fl_tb">
  10. <tbody>
  11. <div align=center>
  12. <a style="" href="forum.php?gid=1"><img width="100%" height="75" src="http://i.imgur.com/oXEEz0A.png"></a>
  13. </div>
  14. <tr><td>
  15. <ul>
  16. [loop]
  17. <li><img src="http://i.imgur.com/WvgcZll.gif"><a href="{url}" title="版塊名稱 : {title}
  18. 今日帖數 : {todayposts}
  19. 主題總數 : {threads}
  20. 帖子總數 : {posts}"{target}>{title}</a></li>
  21. [/loop]
  22. </ul>
  23. </div>
  24. </td></tr>
  25. </tbody>
  26. </table>
  27. <div align=right>
  28. <a onclick="window.scrollTo('0' , '0');" href="javascript:;" id="to_1"><img width="33" height="11"  title="Top" src="http://i.imgur.com/gBMadQc.gif"></a>
  29. </div>
  30. </fieldset>
复制代码


方案2 版塊橫排

  1. <fieldset style="width:94%; margin:0 auto; border:solid 1px #c2bec2; -moz-border-radius-topleft: 0px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -webkit-border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;-moz-box-shadow: 3px 3px 5px #a8a3a8; -webkit-box-shadow: 3px 3px 5px #a8a3a8; box-shadow: 3px 3px 5px #a8a3a8;">
  2. <div class="bm_h cl" align=left style="background-color: #F0F8FF;">
  3. <span class="o">
  4. <img onclick="toggle_collapse('category_1');" alt="收起/展開" title="收起/展開" src="static/image/common/collapsed_no.gif" id="category_1_img">
  5. </span>
  6. <h2><a style="" href="forum.php?gid=1"><div style= color:#369;">區版塊名稱</div></a></h2>
  7. </div>
  8. <div style="" class="bm_c" id="category_1">
  9. <table class="fl_tb">
  10. <tbody>
  11. <div align=center>
  12. <a style="" href="forum.php?gid=1"><img width="100%" height="75" src="http://i.imgur.com/oXEEz0A.png"></a>
  13. </div>
  14. <tr><td>
  15. <ul class="xl2">
  16. [loop]
  17. <li><img src="http://i.imgur.com/WvgcZll.gif"><a href="{url}" title="版塊名稱 : {title}
  18. 今日帖數 : {todayposts}
  19. 主題總數 : {threads}
  20. 帖子總數 : {posts}"{target}>{title}</a></li>
  21. [/loop]
  22. </ul>
  23. </div>
  24. </td></tr>
  25. </tbody>
  26. </table>
  27. <div align=right>
  28. <a onclick="window.scrollTo('0' , '0');" href="javascript:;" id="to_1"><img width="33" height="11"  title="Top" src="http://i.imgur.com/gBMadQc.gif"></a>
  29. </div>
  30. </fieldset>
复制代码


4. 按照上方 2~3 步驟
    繼續設置其它分區版塊即可

    可以在第一個分區下方再拉一個版塊模塊
    繼續設置另一個分區
    或是在第一個分區右邊再拉一個版塊模塊
    繼續設置另一個分區

5.png

5. 最後後台將所有區版塊設置成隱藏

6.png

7.png

    當您後台設置隱藏後
    版塊導航和發帖就會變成空白

8.png

9.png

如果後台不想設置隱藏
想保有這些功能的話
要修改文件才行

打開

template/default/forum/discuz.htm 文件
   
查找 338-432 行刪除即可

修改前請先備份
修改後記得更新緩存

查找的行數是沒有修改過的
如果您這份文件之前有修改過的話
可以下載官方的源文件
然後比對行數和代碼刪除即可

代碼說明

這裡很重要
請設置正確才行

onclick="toggle_collapse('category_1');"

id="category_1_img"

href="forum.php?gid=1"

id="category_1"

href="forum.php?gid=1"

不管您是採用方案1或是方案2
都會有這些代碼

上方這 5 個地方 (數字部分)
就是區版塊的 id 位置
改成您論壇區版塊 id 位置即可

比如您的區版塊 id 位置是 2
那就把這 5 個地方的 1 改成 2 即可

可以在後台查看區版塊的 id 位置

10.png

設置正確後
點擊區版塊名稱或區版塊圖標
才會跳轉到該區版塊頁面

11.png

12.png

點擊 收起/展開 按鈕時
區版塊才會有收起和展開的效果

13.png

這裡改成您區版塊的名稱及顏色

  1. <div style= color:#369;">區版塊名稱</div>
复制代码


這裡改成您區版塊背景顏色

  1. <div class="bm_h cl" align=left style="background-color: #F0F8FF;">
复制代码


您可以自己製作每個區版塊圖標
然後這裡改成您自己的區版塊圖標

  1. <img width="100%" height="75" src="http://i.imgur.com/oXEEz0A.png">
复制代码


這裡是版塊圖標
替換成您自己的版塊圖標即可

  1. <img src="http://i.imgur.com/WvgcZll.gif">
复制代码


這裡是 Top 圖標
替換成您自己的 Top 圖標即可

  1. <img width="33" height="11"  title="Top" src="http://i.imgur.com/gBMadQc.gif">
复制代码


然後您可以美化一下
比如我把框架都去掉了
再添加區版塊的背景圖

14.png

將滑鼠移到版塊名稱時
會顯示版塊的詳細資料

15.png

這樣這次美化就完成了
這是後台設置顯示邊欄
大部分站長都會選擇顯示邊欄

16.png

這是後台沒有設置顯示邊欄

17.png

18.gif

19.gif

20.gif



 楼主| 发表于 2016-4-5 21:17:47 | 显示全部楼层

嗯~
謝謝您的回覆與支持^^
回复

使用道具 举报

发表于 2016-6-12 18:16:33 | 显示全部楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|Comsenz ( 粤B2-20090059-165 )  

GMT+8, 2017-12-11 15:31

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表