久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线

Discuz! 官方交流社區(qū)

標(biāo)題: 純 diy 論壇直排美化 (適用於可以 diy 的任何版本) [打印本頁(yè)]

作者: 貓先森 時(shí)間: 2019-8-13 03:28
標(biāo)題: 純 diy 論壇直排美化 (適用於可以 diy 的任何版本)
本帖最后由貓先森于 2019-8-13 03:30 編輯

(, 下載次數(shù): 204)

大家好
論壇直排美化
大部分都是臺(tái)灣和香港的站長(zhǎng)們
比較喜歡的風(fēng)格

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

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

今天想和大家分享比較簡(jiǎn)單的方法
就是用 diy 來達(dá)到我們想要的效果
分享給有需要的站長(zhǎng)們^^

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

(, 下載次數(shù): 46)

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

特別注意的是
一個(gè)版塊模塊只設(shè)置一個(gè)分區(qū)的版塊
不要設(shè)置跨分區(qū)的版塊
還有就是模塊標(biāo)題這裡留空不要設(shè)置

(, 下載次數(shù): 48)
(, 下載次數(shù): 44)

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

(, 下載次數(shù): 45)

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

方案1 版塊直排

<div><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;"></div><div><div class="bm_h cl" align=left style="background-color: #F0F8FF;"></div><div><span class="o"></div><div><img onclick="toggle_collapse('category_1');" alt="收起/展開" title="收起/展開" src="static/image/common/collapsed_no.gif" id="category_1_img"></div><div></span></div><div><h2><a style="" href="forum.php?gid=1"><div style= color:#369;">區(qū)版塊名稱</div></a></h2></div><div></div></div><div><div style="" class="bm_c" id="category_1"></div><div><table class="fl_tb"></div><div><tbody></div><div><div align=center></div><div><a style="" href="forum.php?gid=1"><img width="100%" height="75" src="http://i.imgur.com/oXEEz0A.png"></a></div><div></div></div><div><tr><td></div><div><ul></div><div>[loop]</div><div><li><img src="http://i.imgur.com/WvgcZll.gif"><a href="{url}" title="版塊名稱 : {title}</div><div>今日帖數(shù) : {todayposts}</div><div>主題總數(shù) : {threads}</div><div>帖子總數(shù) : {posts}"{target}>{title}</a></li></div><div>[/loop]</div><div></ul></div><div></div></div><div></td></tr></div><div></tbody></div><div></table></div><div><div align=right></div><div><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></div><div></div></div><div></fieldset></div>

復(fù)制代碼

方案2 版塊橫排

<div><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;"></div><div><div class="bm_h cl" align=left style="background-color: #F0F8FF;"></div><div><span class="o"></div><div><img onclick="toggle_collapse('category_1');" alt="收起/展開" title="收起/展開" src="static/image/common/collapsed_no.gif" id="category_1_img"></div><div></span></div><div><h2><a style="" href="forum.php?gid=1"><div style= color:#369;">區(qū)版塊名稱</div></a></h2></div><div></div></div><div><div style="" class="bm_c" id="category_1"></div><div><table class="fl_tb"></div><div><tbody></div><div><div align=center></div><div><a style="" href="forum.php?gid=1"><img width="100%" height="75" src="http://i.imgur.com/oXEEz0A.png"></a></div><div></div></div><div><tr><td></div><div><ul class="xl2"></div><div>[loop]</div><div><li><img src="http://i.imgur.com/WvgcZll.gif"><a href="{url}" title="版塊名稱 : {title}</div><div>今日帖數(shù) : {todayposts}</div><div>主題總數(shù) : {threads}</div><div>帖子總數(shù) : {posts}"{target}>{title}</a></li></div><div>[/loop]</div><div></ul></div><div></div></div><div></td></tr></div><div></tbody></div><div></table></div><div><div align=right></div><div><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></div><div></div></div><div></fieldset></div>

復(fù)制代碼

4. 按照上方 2~3 步驟
繼續(xù)設(shè)置其它分區(qū)版塊即可

可以在第一個(gè)分區(qū)下方再拉一個(gè)版塊模塊
繼續(xù)設(shè)置另一個(gè)分區(qū)
或是在第一個(gè)分區(qū)右邊再拉一個(gè)版塊模塊
繼續(xù)設(shè)置另一個(gè)分區(qū)

(, 下載次數(shù): 46)

5. 最後後臺(tái)將所有區(qū)版塊設(shè)置成隱藏

(, 下載次數(shù): 45)

(, 下載次數(shù): 46)

當(dāng)您後臺(tái)設(shè)置隱藏後
版塊導(dǎo)航和發(fā)帖就會(huì)變成空白

(, 下載次數(shù): 47)
(, 下載次數(shù): 42)

如果後臺(tái)不想設(shè)置隱藏
想保有這些功能的話
要修改文件才行

打開

template/default/forum/discuz.htm 文件

查找 338-432 行刪除即可

修改前請(qǐng)先備份
修改後記得更新緩存

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

代碼說明

這裡很重要
請(qǐng)?jiān)O(shè)置正確才行

onclick="toggle_collapse('category_1');"

id="category_1_img"

href="forum.php?gid=1"

id="category_1"

href="forum.php?gid=1"

不管您是採(cǎi)用方案1或是方案2
都會(huì)有這些代碼

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

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

可以在後臺(tái)查看區(qū)版塊的 id 位置

   (, 下載次數(shù): 48)

設(shè)置正確後
點(diǎn)擊區(qū)版塊名稱或區(qū)版塊圖標(biāo)
才會(huì)跳轉(zhuǎn)到該區(qū)版塊頁(yè)面

(, 下載次數(shù): 42)
   (, 下載次數(shù): 51)

點(diǎn)擊收起/展開按鈕時(shí)
區(qū)版塊才會(huì)有收起和展開的效果

   (, 下載次數(shù): 50)

這裡改成您區(qū)版塊的名稱及顏色

<div style= color:#369;">區(qū)版塊名稱</div>

復(fù)制代碼

這裡改成您區(qū)版塊背景顏色

<div class="bm_h cl" align=left style="background-color: #F0F8FF;">

復(fù)制代碼

您可以自己製作每個(gè)區(qū)版塊圖標(biāo)
然後這裡改成您自己的區(qū)版塊圖標(biāo)

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

復(fù)制代碼

這裡是版塊圖標(biāo)
替換成您自己的版塊圖標(biāo)即可

<img src="http://i.imgur.com/WvgcZll.gif">

復(fù)制代碼

這裡是 Top 圖標(biāo)
替換成您自己的 Top 圖標(biāo)即可

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

復(fù)制代碼

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

   (, 下載次數(shù): 48)

將滑鼠移到版塊名稱時(shí)
會(huì)顯示版塊的詳細(xì)資料

   (, 下載次數(shù): 46)

這樣這次美化就完成了
這是後臺(tái)設(shè)置顯示邊欄
大部分站長(zhǎng)都會(huì)選擇顯示邊欄

   (, 下載次數(shù): 54)

這是後臺(tái)沒有設(shè)置顯示邊欄

(, 下載次數(shù): 47)

(, 下載次數(shù): 47)

(, 下載次數(shù): 46)

(, 下載次數(shù): 43)

歡迎光臨 Discuz! 官方交流社區(qū) (http://m.9999xn.com/)

久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线