純 diy 論壇直排美化 (適用於可以 diy 的任何版本)
<br /><br /><br /><br /><ignore_js_op><span style="white-space: nowrap" id="attach_2232" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})">详细教程以及代码.zip<em class="xg1">(2.34 KB, 下载次数: 243)</em></span>2019-8-13 03:30 上传点击文件名下载附件</ignore_js_op><br /><br />大家好<br />論壇直排美化<br />大部分都是台灣和香港的站長們<br />比較喜歡的風格<br /><br />而直排美化大部分都是要用插件<br />或是修改一些文件才能達到的美化效果<br /><br />論壇直排美化效果<br />就好像版塊設置了圖片列表模式<br />會有瀑布流的效果喔<br /><br />今天想和大家分享比較簡單的方法<br />就是用 diy 來達到我們想要的效果<br />分享給有需要的站長們^^<br /><br />1. 首先拉一個 1-1 框架到這個位置下方<br /> 然後在左邊再拉一個 1-1 框架<br /> 在右邊一樣再拉一個 1-1 框架<br /><br /> <img title="1.jpg" id="aimg_2212" aid="2212" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032112ml3gqa3gdzfv30qe.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032112ml3gqa3gdzfv30qe.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br />2. 拉一個版塊模塊<br /> 這裡按照您的需求設置即可<br /><br /> 特別注意的是<br /> 一個版塊模塊只設置一個分區的版塊<br /> 不要設置跨分區的版塊<br /> 還有就是模塊標題這裡留空不要設置<br /><br /><br /><img title="2.jpg" id="aimg_2213" aid="2213" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032344r0h4pfrzfdrnsnjm.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032344r0h4pfrzfdrnsnjm.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="593" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><img title="3.jpg" id="aimg_2214" aid="2214" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032344t7v7tjgd8fr71dx7.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032344t7v7tjgd8fr71dx7.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br />3. 設置好後將原本模塊模板代碼替換掉<br /><br /> <img title="4.jpg" id="aimg_2215" aid="2215" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032345vg0gyygdyuykjdn2.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032345vg0gyygdyuykjdn2.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="599" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br /> 替換代碼部分這裡提供兩種方案<br /> 您可以選擇一種方案來使用<br /> 或是兩種方案搭配使用<br /><br />方案1 版塊直排<br /><br /><ol><li><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;">區版塊名稱</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></div><div><li><img src="http://i.imgur.com/WvgcZll.gif"><a href="{url}" title="版塊名稱 : {title}</div><div>今日帖數 : {todayposts}</div><div>主題總數 : {threads}</div><div>帖子總數 : {posts}"{target}>{title}</a></li></div><div></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></ol><br /><br /><br /><br /><br />方案2 版塊橫排<br /><br /><ol><li><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;">區版塊名稱</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></div><div><li><img src="http://i.imgur.com/WvgcZll.gif"><a href="{url}" title="版塊名稱 : {title}</div><div>今日帖數 : {todayposts}</div><div>主題總數 : {threads}</div><div>帖子總數 : {posts}"{target}>{title}</a></li></div><div></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></ol><br /><br /><br /><br />4. 按照上方 2~3 步驟<br /> 繼續設置其它分區版塊即可<br /><br /> 可以在第一個分區下方再拉一個版塊模塊<br /> 繼續設置另一個分區<br /> 或是在第一個分區右邊再拉一個版塊模塊<br /> 繼續設置另一個分區<br /><br /> <img title="5.jpg" id="aimg_2216" aid="2216" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032345ixxzsifzxu66f1iz.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032345ixxzsifzxu66f1iz.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="599" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br />5. 最後後台將所有區版塊設置成隱藏<br /><br /><br /><img title="6.jpg" id="aimg_2217" aid="2217" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032346ppopwpap4pzi1dnz.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032346ppopwpap4pzi1dnz.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="598" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br /><img title="7.jpg" id="aimg_2218" aid="2218" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032346ew4imrdczb3c4vz4.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032346ew4imrdczb3c4vz4.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br /> 當您後台設置隱藏後<br /> 版塊導航和發帖就會變成空白<br /><br /><br /><img title="8.jpg" id="aimg_2219" aid="2219" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032347rjh474xzev703qd7.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032347rjh474xzev703qd7.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="598" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><img title="9.jpg" id="aimg_2220" aid="2220" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032347byrmzyyyks7cy6vm.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032347byrmzyyyks7cy6vm.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="599" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br />如果後台不想設置隱藏<br />想保有這些功能的話<br />要修改文件才行<br /><br />打開<br /><br />template/default/forum/discuz.htm 文件<br /><br />查找 338-432 行刪除即可<br /><br />修改前請先備份<br />修改後記得更新緩存<br /><br />查找的行數是沒有修改過的<br />如果您這份文件之前有修改過的話<br />可以下載官方的源文件<br />然後比對行數和代碼刪除即可<br /><br /><font color="#ff0000">代碼說明</font><br /><br />這裡很重要<br />請設置正確才行<br /><br /><blockquote>onclick="toggle_collapse('category_1');"<br /><br />id="category_1_img"<br /><br />href="forum.php?gid=1"<br /><br />id="category_1"<br /><br />href="forum.php?gid=1"</blockquote><br /><br />不管您是採用方案1或是方案2<br />都會有這些代碼<br /><br />上方這 5 個地方 (數字部分)<br />就是區版塊的 id 位置<br />改成您論壇區版塊 id 位置即可<br /><br />比如您的區版塊 id 位置是 2<br />那就把這 5 個地方的 1 改成 2 即可<br /><br />可以在後台查看區版塊的 id 位置<br /><br /> <img title="10.jpg" id="aimg_2221" aid="2221" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032348gddzkcq829h3xpq8.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032348gddzkcq829h3xpq8.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="599" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br />設置正確後<br />點擊區版塊名稱或區版塊圖標<br />才會跳轉到該區版塊頁面<br /><br /><br /><img title="11.jpg" id="aimg_2222" aid="2222" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032348wk2a3zid66qddkr3.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032348wk2a3zid66qddkr3.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="504" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /> <img title="12.jpg" id="aimg_2223" aid="2223" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032350g8p4fri8y5zpa044.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032350g8p4fri8y5zpa044.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="599" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br />點擊 收起/展開 按鈕時<br />區版塊才會有收起和展開的效果<br /><br /> <img title="13.jpg" id="aimg_2224" aid="2224" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032350lq3dyy888dooqqvx.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032350lq3dyy888dooqqvx.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="523" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br />這裡改成您區版塊的名稱及顏色<br /><br /><ol><li><div style= color:#369;">區版塊名稱</div></ol><br /><br /><br /><br />這裡改成您區版塊背景顏色<br /><br /><ol><li><div class="bm_h cl" align=left style="background-color: #F0F8FF;"></ol><br /><br /><br /><br />您可以自己製作每個區版塊圖標<br />然後這裡改成您自己的區版塊圖標<br /><br /><ol><li><img width="100%" height="75" src="http://i.imgur.com/oXEEz0A.png"></ol><br /><br /><br /><br />這裡是版塊圖標<br />替換成您自己的版塊圖標即可<br /><br /><ol><li><img src="http://i.imgur.com/WvgcZll.gif"></ol><br /><br /><br /><br />這裡是 Top 圖標<br />替換成您自己的 Top 圖標即可<br /><br /><ol><li><img width="33" height="11" title="Top" src="http://i.imgur.com/gBMadQc.gif"></ol><br /><br /><br /><br />然後您可以美化一下<br />比如我把框架都去掉了<br />再添加區版塊的背景圖<br /><br /> <img title="14.jpg" id="aimg_2225" aid="2225" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032351gc2bhbc9kur2vchv.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032351gc2bhbc9kur2vchv.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br />將滑鼠移到版塊名稱時<br />會顯示版塊的詳細資料<br /><br /> <img title="15.jpg" id="aimg_2226" aid="2226" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032352kcc2ubi821t2cv11.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032352kcc2ubi821t2cv11.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="598" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br />這樣這次美化就完成了<br />這是後台設置顯示邊欄<br />大部分站長都會選擇顯示邊欄<br /><br /> <img title="16.jpg" id="aimg_2227" aid="2227" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032353nyhywgyzjjiwkxdj.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032353nyhywgyzjjiwkxdj.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br />這是後台沒有設置顯示邊欄<br /><br /><br /><img title="17.jpg" id="aimg_2228" aid="2228" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032353r02rjcc4uzjubj0c.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032353r02rjcc4uzjubj0c.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br /><br /><br /><br /><img title="18.jpg" id="aimg_2229" aid="2229" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032354xbbwaad4h6uwifud.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032354xbbwaad4h6uwifud.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="15" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br /><br /><img title="19.jpg" id="aimg_2230" aid="2230" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032354k289s3z1kjiak9so.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032354k289s3z1kjiak9so.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="10" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br /><br /><img title="20.jpg" id="aimg_2231" aid="2231" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/13/032355kstlzs1y4sa4mzk1.jpg" src="https://www.dismall.com/data/attachment/forum/201908/13/032355kstlzs1y4sa4mzk1.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="22" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br /><br /><br /><br /><br /><br />diy<em>, </em>本帖<em>, </em>最后<em>, </em>猫先<em>, </em>2019-8-13
頁:
[1]