分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本)

大家好
今天和大家分享一個 diy 的 n 格
分享給有需要的站長們^^

一. 首先自定義 n 格的外框架及兩個 diy 域

打開

template/default/forum/discuz.htm 文件

查找

  1. <!--[diy=diy_chart]--><div id="diy_chart" class="area"></div><!--[/diy]-->
复制代码


上方添加
這裡我們提供三種方案

1. 圓角有陰影的 n 格框架

  1. <fieldset style="width:100%; 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" style="background-color: #F0F8FF;">
  3.           <span class="o">
  4.              <img onclick="toggle_collapse('n_lattice');" title="{lang spread}" src="static/image/common/collapsed_no.gif" id="n_lattice_img">
  5.           </span>
  6.            <h2>
  7.            <!--[diy=diy11]--><div id="diy11" class="area"></div><!--[/diy]-->
  8.            </h2>
  9.         </div>
  10.         <div id="n_lattice" style="padding-bottom:8px;">
  11.             <!--[diy=diy12]--><div id="diy12" class="area"></div><!--[/diy]-->
  12.         </div>        
  13.      </fieldset>
  14.      <div style="padding-bottom:8px;"></div>
复制代码


2. 圓角沒陰影的 n 格框架

  1. <fieldset style="width:100%; 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;">
  2.        <div class="bm_h cl" style="background-color: #F0F8FF;">
  3.           <span class="o">
  4.              <img onclick="toggle_collapse('n_lattice');" title="{lang spread}" src="static/image/common/collapsed_no.gif" id="n_lattice_img">
  5.           </span>
  6.            <h2>
  7.            <!--[diy=diy11]--><div id="diy11" class="area"></div><!--[/diy]-->
  8.            </h2>
  9.         </div>
  10.         <div id="n_lattice" style="padding-bottom:8px;">
  11.             <!--[diy=diy12]--><div id="diy12" class="area"></div><!--[/diy]-->
  12.         </div>        
  13.      </fieldset>
  14.      <div style="padding-bottom:8px;"></div>
复制代码


3. 直角沒陰影的 n 格框架

  1. <div style="width:100%; margin:0 auto; border:solid 1px #c2bec2;">
  2.        <div class="bm_h cl" style="background-color: #F0F8FF;">
  3.           <span class="o">
  4.              <img onclick="toggle_collapse('n_lattice');" title="{lang spread}" src="static/image/common/collapsed_no.gif" id="n_lattice_img">
  5.           </span>
  6.            <h2>
  7.            <!--[diy=diy11]--><div id="diy11" class="area"></div><!--[/diy]-->
  8.            </h2>
  9.         </div>
  10.         <div id="n_lattice" style="padding-bottom:5px;">
  11.             <!--[diy=diy12]--><div id="diy12" class="area"></div><!--[/diy]-->
  12.         </div>
  13.      </div>
  14.      <div style="padding-bottom:8px;"></div>
复制代码


代碼說明

#F0F8FF
這是 n 格最上方欄目的背景色
可以改成自己的色碼

如果這裡您修改了色碼
那等一下 diy 模塊樣式背景色時
模塊樣式背景色也要修改一致

<!--[diy=diy11]--><div id="diy11" class="area"></div><!--[/diy]-->

<!--[diy=diy12]--><div id="diy12" class="area"></div><!--[/diy]-->

這是自定義 diy 域
前後數字須一致才行

如果您之前有自定義 diy 域
要小心數字不要重覆即可


二. 開始 diy

1. 時間和推薦主題及發帖按鈕部分

1) 拉一個 100% 框架到這個位置

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

2) 編輯框架標題
框架標題:這裡留空
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

3) 拉一個靜態模塊
模塊標識:時間和推薦主題及發帖按鈕 
數據來源:選擇自定義 html
其它按照您自己的需求設置
設置好後填入代碼按確定即可

填入代碼

  1. <table>
  2. <tr><td>
  3. <!--時間代碼開始-->
  4. <iframe scrolling="no" frameborder="no" clocktype="html5" style="overflow:hidden;border:0;margin:0;padding:0;width:120px;height:110px;"src="http://clocklink.com/html5embed.php?clock=004&timezone=GMT0800&color=pink&size=80&Title=&Message=&Target=&From=2016,1,1,0,0,0&Color=pink"></iframe>
  5. <!--時間代碼結束-->
  6. </td><td style="width:100%; " align="center">
  7. <!--推薦主題代碼開始-->
  8. <div id="up_zzjs">
  9. <div id="marqueebox">
  10. <a href="http://www.discuz.net/thread-3589972-1-1.html" target="_blank"><div style="color:#FF60AF; font-size:13px;">【分享】後台添加取消註冊郵箱必填功能 (x3.2 版本 繁和簡)</div></a>
  11. <a href="http://www.discuz.net/thread-3690286-1-1.html" target="_blank"><div style="color:#00AEAE; font-size:13px;">【分享】純 diy 論壇直排美化 (適用於可以 diy 的任何版本)</div></a>
  12. <a href="http://www.discuz.net/thread-3681294-1-1.html" target="_blank"><div style="color:#EA7500; font-size:13px;">【分享】仿官方已解決插件 (X3.1 ~ X3.2 版本 繁和簡)</div></a>
  13. <a href="http://www.discuz.net/thread-3649883-1-1.html" target="_blank"><div style="color:#02DF82; font-size:13px;">【分享】特定版塊帖子列表頁只顯示自己的主題 (X3.0 ~ X3.2 版本 簡和繁)</div></a>
  14. <a href="http://www.discuz.net/thread-3624448-1-1.html" target="_blank"><div style="color:#2894FF; font-size:13px;">【分享】如何讓網站變成多種語言翻譯 (繁和簡)</div></a>
  15. <a href="http://www.discuz.net/thread-3466015-1-1.html" target="_blank"><div style="color:#E800E8; font-size:13px;">【分享】如何使用目錄功能和橫排美化及寬度調整 (X3.0 ~ X3.2 版本 已更新)</div></a>
  16. <a href="http://www.discuz.net/thread-3582271-1-1.html" target="_blank"><div style="color:#808040; font-size:13px;">【分享】收藏版塊橫排 (x2.5 ~ x3.2 版本 兩種方案 已更新 繁和簡)</div></a>
  17. <a href="http://www.discuz.net/thread-3256852-1-1.html" target="_blank"><div style="color:#9F35FF; font-size:13px;">【分享】帖內左側信息顯示與美化 (X3.0~X3.2版本 2015/4/7更新)</div></a>
  18. </div>
  19. </div>

  21. <style type="text/css">
  22. #up_zzjs{width:700px;height:100px;line-height:20px;overflow:hidden;}
  23. </style>

  25. <script language="javascript">
  26. function startmarquee(lh,speed,delay) {
  27. var p=false;
  28. var t;
  29. var o=document.getElementById("marqueebox");
  30. o.innerHTML+=o.innerHTML;
  31. o.style.marginTop=0;
  32. o.onmouseover=function(){p=true;}
  33. o.onmouseout=function(){p=false;}
  34. function start(){
  35. t=setInterval(scrolling,speed);
  36. if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
  37. }
  38. function scrolling(){
  39. if(parseInt(o.style.marginTop)%lh!=0){
  40. o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
  41. if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
  42. }else{
  43. clearInterval(t);
  44. setTimeout(start,delay);
  45. }
  46. }
  47. setTimeout(start,delay);
  48. }
  49. startmarquee(20,20,1500);
  50. </script>
  51. <!--推薦主題代碼結束-->
  52. </td><td>
  53. <!--發帖按鈕代碼開始-->
  54. <div class="posting"><a onclick="showWindow('nav', this.href, 'get', 0)" href="forum.php?mod=misc&action=nav">
  55. <img src="http://i.imgur.com/fcQU7sR.png" title="發新帖">
  56. </div>

  58. <style>
  59. .posting{overflow:hidden;height:110px;}
  60. </style>
  61. <!--發帖按鈕代碼結束-->
  62. </td></tr>
  63. </table>
复制代码


分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

模塊標題:這裡留空
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

4) 編輯模塊樣式
外邊距:上下左右都設置為 0
背景顏色:設置 #F0F8FF
這裡要和修改文件時的背景色一致 
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

5) 都設置完成後按保存即可
點擊發帖按鈕時
會跳出版塊選單
然後選擇版塊來發帖

點擊收起和展開按鈕時
n 格自動收起和展開

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

發帖圖標

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

代碼說明

代碼中有註明代碼開始代碼結束
這些文字按保存後前台不會顯示

主要是讓站長們知道哪段代碼作用是什麼
還有就是方便以後查找修改之用
如果不喜歡也可以刪除即可 (不影響原本代碼)

時間代碼部分
可以到這個頁面來選擇您想要的顏色和設置
獲取代碼後請記得參考我給的代碼比對一下數值設置
才不會有移位或是不對稱的情形

http://clocklink.com/gallery/view/html5-004

如果這種樣式的時鐘您不喜歡的話
也可以點選左邊選項
挑選自己喜歡的時鐘樣式來使用

推薦主題部分
這裡設置了 8 個主題
您也可以自己再新增 (參考代碼再新增即可)

這部份您也可以改用公告或是論壇規定等主題
也可以改成文字廣告又或者格言之類的詞來使用
也可以改成貼心問候語或是音樂盒等等
看您個人的喜好而定即可 (或是一段時間改一下樣式)
如果都不喜歡的話可以把這段代碼刪除即可

發帖按鈕部分
  1. http://i.imgur.com/fcQU7sR.png
复制代码

這是發帖按鈕的圖片完整網址
改成您自己的即可


2. n 格的框架配置

1) 拉一個 1-3 框架 
再拉一個 2-1 框架
然後在 2-1 框架中拉兩個 tab 框架
最後再拉一個 100% 框架
如果不喜歡顯示新會員的話
最後 100% 框架可以不要拉
或者您現在想用
以後不想用了
再刪除這個框架即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

2) 編輯 1-3 框架標題
框架標題:這裡留空
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

編輯 2-1 框架標題
框架標題:這裡留空
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

編輯兩個 tab 框架標題
框架標題:這裡留空
切換類型:設置滑過
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

編輯右邊 tab 框架樣式
外邊距:右 2px

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

編輯 100% 框架標題
框架標題:這裡留空
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 


3. 最新圖片部分

1) 拉一個帖子模塊
模塊標識:最新圖片
模塊分類:帖子模塊
數據來源:最新帖
顯示條數:10
顯示樣式:[內置]帖子圖片幻燈片
其它部分按照您的需求設置
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

模塊標題:最新圖片
位置:居左 偏移量:90px
字體顏色:#0066CC
背景圖片:/static/image/common/title.png
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

2) 編輯最新圖片屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可

替換代碼

  1. <div class="module cl slidebox">
  2. <ul class="slideshow">
  3. [loop]
  4. <li style="width: {picwidth}px; height: {picheight}px;"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a><span class="title">{title}</span></li>
  5. [/loop]
  6. </ul>
  7. </div>

  9. <script type="text/javascript">
  10. runslideshow();
  11. </script>

  13. <style>
  14. .slideshow span.title{background-color:#FF79BC; opacity: 0.6;}
  15. </style>
复制代码


分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

3) 編輯最新圖片樣式
上邊框:3px 實線 顏色:#339999
外邊距:上 0 右 2px 下 0 左 2px
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

4) 都設置完成後按保存即可

代碼說明

#FF79BC
這是主題名稱的背景顏色
您可以改成自己要的色碼


4. 最新帖子部分

1) 拉一個帖子模塊
模塊標識:最新帖子
模塊分類:帖子模塊
數據來源:最新帖
顯示條數:10
顯示樣式:[內置]帖子標題+作者
其它部分按照您的需求設置
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

模塊標題:最新帖子
位置:居左 偏移量:-14px
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

2) 編輯最新帖子屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可

替換代碼

  1. <table style="width:100%">
  2. <tr><td style="width:5%; padding-left: 5px;">
  3. <!--數字代碼開始-->
  4. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  5. <b>1</b>
  6. </div>
  7. <div style="padding-bottom:9px;"></div>
  8. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  9. <b>2</b>
  10. </div>
  11. <div style="padding-bottom:9px;"></div>
  12. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  13. <b>3</b>
  14. </div>
  15. <div style="padding-bottom:9px;"></div>
  16. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  17. <b>4</b>
  18. </div>
  19. <div style="padding-bottom:8px;"></div>
  20. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  21. <b>5</b>
  22. </div>
  23. <div style="padding-bottom:8px;"></div>
  24. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  25. <b>6</b>
  26. </div>
  27. <div style="padding-bottom:8px;"></div>
  28. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  29. <b>7</b>
  30. </div>
  31. <div style="padding-bottom:8px;"></div>
  32. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  33. <b>8</b>
  34. </div>
  35. <div style="padding-bottom:8px;"></div>
  36. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  37. <b>9</b>
  38. </div>
  39. <div style="padding-bottom:8px;"></div>
  40. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius:4px;-webkit-border-radius: 4px;border-radius: 4px;">
  41. <b>10</b>
  42. </div>
  43. <!--數字代碼結束-->
  44. </td><td>
  45. <div class="module cl xl xl1" style="height:260px;">
  46. [loop]
  47. <li style="border-bottom: 2px dotted #E0E0E0; padding-left: 3px;">
  48. <em><a href="home.php?mod=space&uid={authorid}"{target}>{author}</a></em><font color="3366FF">[<a href="{forumurl}" title="{forumname}"{target}><font color="3366FF">{forumname}</font></a>]</font>   <a href="{url}"
  49. title="版塊: {forumname}
  50. 發表: {author} {dateline}
  51. 瀏覽: {views}
  52. 回覆: {lastpost}"
  53. {target}>{title}</a></li>
  54. [/loop]
  55. </div>
  56. </td></tr>
  57. </table>

  59. <style>
  60. .frame-tab .tb .a a {border-top: solid 3px #339999; background: #FFFFFF; font-weight: 700; color: #0066CC;}
  61. .frame-tab .tb-c {padding: 1px 0px;}
  62. .xl1 li {height: 1.9em;}
  63. </style>
复制代码


分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

3) 都設置完成後按保存即可
左邊數字是方型 (下一個熱門主題時提供圓型數字)
會提供兩種方案有方型和圓型
您可以搭配或是單獨使用一種樣式
顯示帖子所在版塊名稱
滑鼠移到主題時會顯示相關資訊

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

另外新手站長可能不知道
diy 時可以挑選一個主題
點擊右邊的編輯進入

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

可以設置固定主題的位置
設置高亮粗體等等功能

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

代碼說明

代碼中的色碼部分
您可以改成自己要的色碼


5. 熱門帖子部分

1) 拉一個帖子模塊
模塊標識:熱門帖子
模塊分類:帖子模塊
數據來源:熱門帖
顯示條數:10
顯示樣式:[內置]帖子標題+作者
其它部分按照您的需求設置
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

模塊標題:熱門帖子
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

2) 編輯熱門帖子屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可

替換代碼

  1. <table style="width:100%">
  2. <tr><td style="width:5%; padding-left: 5px;">
  3. <!--數字代碼開始-->
  4. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  5. <b>1</b>
  6. </div>
  7. <div style="padding-bottom:9px;"></div>
  8. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  9. <b>2</b>
  10. </div>
  11. <div style="padding-bottom:9px;"></div>
  12. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  13. <b>3</b>
  14. </div>
  15. <div style="padding-bottom:9px;"></div>
  16. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  17. <b>4</b>
  18. </div>
  19. <div style="padding-bottom:8px;"></div>
  20. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  21. <b>5</b>
  22. </div>
  23. <div style="padding-bottom:8px;"></div>
  24. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  25. <b>6</b>
  26. </div>
  27. <div style="padding-bottom:8px;"></div>
  28. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  29. <b>7</b>
  30. </div>
  31. <div style="padding-bottom:8px;"></div>
  32. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  33. <b>8</b>
  34. </div>
  35. <div style="padding-bottom:8px;"></div>
  36. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  37. <b>9</b>
  38. </div>
  39. <div style="padding-bottom:8px;"></div>
  40. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  41. <b>10</b>
  42. </div>
  43. <!--數字代碼結束-->
  44. </td><td>
  45. <div class="module cl xl xl1" style="height:260px;">
  46. [loop]
  47. <li style="border-bottom: 2px dotted #E0E0E0; padding-left: 3px;"><em><a href="home.php?mod=space&uid={authorid}"{target}>{author}</a></em><font color="3366FF">[<a href="{forumurl}" title="{forumname}"{target}><font color="3366FF">{forumname}</font></a>]</font>   <a href="{url}"
  48. title="版塊: {forumname}
  49. 發表: {author} {dateline}
  50. 瀏覽: {views}
  51. 回覆: {lastpost}"
  52. {target}>{title}</a></li>
  53. [/loop]
  54. </div>
  55. </td></tr>
  56. </table>
复制代码


分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

3) 都設置完成後按保存即可
左邊數字是圓型
您可以搭配或是單獨使用一種樣式
顯示帖子所在版塊名稱
滑鼠移到主題時會顯示相關資訊

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

代碼說明

代碼中的色碼部分
您可以改成自己要的色碼


6. 主題分類部分

1) 拉一個帖子模塊
模塊標識:主題分類
模塊分類:帖子模塊
數據來源:最新帖
所在版塊:勾選有主題分類的版塊
顯示條數:10
顯示樣式:[內置]帖子標題+作者
其它部分按照您的需求設置
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

模塊標題:主題分類
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

2) 編輯主題分類屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可

替換代碼

  1. <table style="width:100%">
  2. <tr><td style="width:5%; padding-left: 5px;">
  3. <!--數字代碼開始-->
  4. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  5. <b>1</b>
  6. </div>
  7. <div style="padding-bottom:9px;"></div>
  8. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  9. <b>2</b>
  10. </div>
  11. <div style="padding-bottom:9px;"></div>
  12. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  13. <b>3</b>
  14. </div>
  15. <div style="padding-bottom:9px;"></div>
  16. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  17. <b>4</b>
  18. </div>
  19. <div style="padding-bottom:8px;"></div>
  20. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  21. <b>5</b>
  22. </div>
  23. <div style="padding-bottom:8px;"></div>
  24. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  25. <b>6</b>
  26. </div>
  27. <div style="padding-bottom:8px;"></div>
  28. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  29. <b>7</b>
  30. </div>
  31. <div style="padding-bottom:8px;"></div>
  32. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  33. <b>8</b>
  34. </div>
  35. <div style="padding-bottom:8px;"></div>
  36. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  37. <b>9</b>
  38. </div>
  39. <div style="padding-bottom:8px;"></div>
  40. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius:4px;-webkit-border-radius: 4px;border-radius: 4px;">
  41. <b>10</b>
  42. </div>
  43. <!--數字代碼結束-->
  44. </td><td>
  45. <div class="module cl xl xl1" style="height:260px">
  46. [loop]
  47. <li style="border-bottom: 2px dotted #E0E0E0; padding-left: 3px;"><em><a href="home.php?mod=space&uid={authorid}"{target}>{author}</a></em><font color="3366FF">[<a href="{forumurl}" title="{forumname}"{target}><font color="3366FF">{forumname}</font></a>]</font><font color="3366FF">[<a href="{typeurl}" title="{typename}"{target}><font color="3366FF">{typename}</font></a>]</font>   <a href="{url}" 
  48. title="版塊: {forumname}
  49. 發表: {author} {dateline}
  50. 瀏覽: {views}
  51. 回覆: {lastpost}"
  52. {target}>{title}</a></li>
  53. [/loop]
  54. </div>
  55. </td></tr>
  56. </table>
复制代码


分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

3) 都設置完成後按保存即可
左邊數字是方型
您可以搭配或是單獨使用一種樣式
顯示帖子所在版塊名稱及主題分類名稱
滑鼠移到主題時會顯示相關資訊

這裡看到主題分類有三種顏色
主要是 diy 調用後台設置
您的後台如果有設置顏色
前台就會顯示顏色

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

代碼說明

代碼中的色碼部分
您可以改成自己要的色碼


7. 分類信息部分

1) 拉一個帖子模塊
模塊標識:分類信息
模塊分類:帖子模塊
數據來源:高級自定義
所在版塊:勾選有分類信息的版塊
分類信息:勾選要顯示的分類信息
顯示條數:10
顯示樣式:[內置]帖子標題+作者
其它部分按照您的需求設置
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

模塊標題:分類信息
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

2) 編輯分類信息屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可

替換代碼

  1. <table style="width:100%">
  2. <tr><td style="width:5%; padding-left: 5px;">
  3. <!--數字代碼開始-->
  4. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  5. <b>1</b>
  6. </div>
  7. <div style="padding-bottom:9px;"></div>
  8. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  9. <b>2</b>
  10. </div>
  11. <div style="padding-bottom:9px;"></div>
  12. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  13. <b>3</b>
  14. </div>
  15. <div style="padding-bottom:9px;"></div>
  16. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  17. <b>4</b>
  18. </div>
  19. <div style="padding-bottom:8px;"></div>
  20. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  21. <b>5</b>
  22. </div>
  23. <div style="padding-bottom:8px;"></div>
  24. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#7AFEC6; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  25. <b>6</b>
  26. </div>
  27. <div style="padding-bottom:8px;"></div>
  28. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  29. <b>7</b>
  30. </div>
  31. <div style="padding-bottom:8px;"></div>
  32. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#CA8EFF; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  33. <b>8</b>
  34. </div>
  35. <div style="padding-bottom:8px;"></div>
  36. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  37. <b>9</b>
  38. </div>
  39. <div style="padding-bottom:8px;"></div>
  40. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FFA042; -moz-border-radius: 9px;-webkit-border-radius: 9px;border-radius: 9px;">
  41. <b>10</b>
  42. </div>
  43. <!--數字代碼結束-->
  44. </td><td>
  45. <div class="module cl xl xl1" style="height:260px;">
  46. [loop]
  47. <li style="border-bottom: 2px dotted #E0E0E0; padding-left: 3px;"><em><a href="home.php?mod=space&uid={authorid}"{target}>{author}</a></em><font color="3366FF">[<a href="{forumurl}" title="{forumname}"{target}><font color="3366FF">{forumname}</font></a>]</font><font color="3366FF">[<a href="{sorturl}" title="{sortname}"{target}><font color="3366FF">{sortname}</font></a>]</font>   <a href="{url}" 
  48. title="版塊: {forumname}
  49. 發表: {author} {dateline}
  50. 瀏覽: {views}
  51. 回覆: {lastpost}"
  52. {target}>{title}</a></li>
  53. [/loop]
  54. </div>
  55. </td></tr>
  56. </table>
复制代码


分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

3) 都設置完成後按保存即可
左邊數字是圓型
您可以搭配或是單獨使用一種樣式
顯示帖子所在版塊名稱及分類信息名稱
滑鼠移到主題時會顯示相關資訊

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

代碼說明

代碼中的色碼部分
您可以改成自己要的色碼


8. 即時聊天部分

1) 拉一個靜態模塊
模塊標識:即時聊天
數據來源:自定義html
其它部分按照您的需求設置
設置好後填入代碼按確定即可

填入代碼

這裡不提供代碼
如果提供我的代碼共用一個聊天室的話
您和我的站聊天內容會同時顯示在一起

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

模塊標題:即時聊天
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

2) 都設置完成後按保存即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

代碼說明

建議您到這個網站
申請一個免費的聊天室

http://www.cbox.ws/?r=6-772754

雖然是免費的聊天室
但功能還是很強大的

申請好後獲取代碼來使用
會有一個類似的後台
可以對聊天室進行管理

後台功能

可以自定義風格樣式
可以自定義語詞過濾
可以自定義表情符號
可以查看留言者的 ip
可以禁止或解禁留言者的 ip
可以管理刪除不雅留言等等

當然如果您覺得還不夠的話
也可以升級到付費
功能更多更強大

個人覺得免費的就很好用了^^

9. 發帖達人部分

1) 拉一個會員模塊
模塊標識:發帖達人
數據來源:發帖排行
顯示條數:4
顯示樣式:[內置]頭像+用戶名+發帖數 (有序)
其它部分按照您的需求設置
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

模塊標題:發帖達人
位置:居左 偏移量:-14px
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

2) 編輯發帖達人屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可

替換代碼

  1. <table style="width:100%">
  2. <tr><td style="padding-left: 8px;">
  3. <!--排名代碼開始-->
  4. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  5. <b>冠軍</b>
  6. </div>
  7. <div style="height:30px;"></div>
  8. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  9. <b>亞軍</b>
  10. </div>
  11. <div style="height:20px; padding-bottom:8px;"></div>
  12. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  13. <b>季軍</b>
  14. </div>
  15. <div style="height:30px;"></div>
  16. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#FF79BC; -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;">
  17. <b>殿軍</b>
  18. </div>
  19. <div style="height:0px;"></div>
  20. <!--排名代碼結束-->
  21. </td><td>
  22. <div class="module c l xl xl1" style="padding-top: 10px; height:252px;">
  23. [loop]
  24. <li style="height:63px;">
  25. <a href="{url}" c="1"{target}><img class="vm" src="{avatar}" width="40" height="40" alt="{title}" /></a>
  26. </li>
  27. [/loop]
  28. </div>
  29. </td><td style="widht:100%;" text-align:center;">
  30. <div class="module cl xl xl1" style="height:252px;">
  31. [loop1]
  32. <li style="padding-right: 75px; height:63px;">
  33. <fieldset style="width:150%; margin:0 auto; border:1px solid #4BA5F0; -moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; background-color:#F0F8FF; padding-left: 10px;">
  34. <dd><font color="#4BA5F0"><b>用戶名：</b></font><a href="{url}" title="{title}" c="1"{target}><font color="#4BA5F0"><b>{title}</b></font></a></dd>
  35. <dd><font color="#339999"><b>發帖數：{posts}</b></font></dd>
  36. <dd><font color="#B15BFF"><b>積分數：{credits}</b></font></dd>
  37. </fieldset>
  38. </li>
  39. [/loop1]
  40. </div>
  41. </td></tr>
  42. </table>

  44. <style>
  45. .xl1 img {
  46. width: 40px;
  47. height: 40px;
  48. background: #fff;
  49. border-color: #f2f2f2 #cdcdcd #cdcdcd #f2f2f2;
  50. border-style: solid;
  51. border-width: 1px;
  52. border-radius: 20%;
  53. padding: 2px;}
  54. </style>
复制代码


分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

3) 都設置完成後按保存即可
顯示排名及作者頭像
顯示用戶名及發帖數和積分數

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

代碼說明

代碼中的色碼部分
您可以改成自己要的色碼


10. 心情點播部分

1) 拉一個記錄模塊
模塊標識:心情點播
數據來源:最新記錄
顯示條數:10
顯示樣式:[內置]頭像+作者+內容
其它部分按照您的需求設置
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

模塊標題:心情點播
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

2) 編輯心情點播屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可

替換代碼

  1. <div style="padding-bottom:5px; padding-top:5px;">
  2. <marquee direction="up" onMouseOver=this.stop() onMouseOut=this.start() behavior="alternate" width="100%" height="156px;" scrollamount="1">
  3. <div class="module cl xld">
  4. [loop]
  5. <dl class="cl">
  6. <dd class="m" style="padding-left: 5px;"><a href="home.php?mod=space&uid={uid}" c="1"{target}>
  7. <img src="{avatar}" width="40" height="40" alt="{username}" />
  8. </a></dd>
  9. <dt><a href="home.php?mod=space&uid={uid}" title="{username}"{target}>{username}</a> <em class="xg1 xw0">{dateline}</em></dt>
  10. <dd><a href="{url}"{target}>{title}</a>  <a href="/home.php?mod=space&do=home&view=me" target="_blank"><font color="964BF0">[我的]</font></a> <a href="/home.php?mod=space&do=home&view=we" target="_blank"><font color="964BF0">[好友的]</font></a></dd></font>
  11. </dl>
  12. [/loop]
  13. </div>
  14. </marquee>
  15. </div>

  17. <fieldset style="width:96%; margin:0 auto; border:1px solid #4BA5F0; -moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; background-color:#F0F8FF;">
  18. <br>
  19. <table align="center">
  20. <tr><td>
  21. <font color="#FF60AF"><b>多久沒和大家分享心情了    <p>
  22. 即刻分享您的點點滴滴吧<p></font>
  23. <font color="964BF0">.................</font><a href="/home.php?mod=space&do=home&view=all" target="_blank"><font color="#964BF0"> ღ 更多心情 ღ </font></a></font></b></td>
  24. <td style="padding-left: 5px;">
  25. <a href="/home.php" target="_blank"><img src="/static/image/common/mood_input_btn.png"></a>
  26. </td></tr>
  27. </table>
  28. <br>
  29. </fieldset>

  31. <style>
  32. .xld img {
  33. width: 40px;
  34. height: 40px;
  35. background: #fff;
  36. border-color: #f2f2f2 #cdcdcd #cdcdcd #f2f2f2;
  37. border-style: solid;
  38. border-width: 1px;
  39. border-radius: 20%;
  40. padding: 2px;}
  41. </style>
复制代码


分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

3) 都設置完成後按保存即可
心情點播會上下滾動
點擊我的可以查看自己發佈的動態
點擊好友的可以查看好友發佈的動態
點擊更多心情時可以查看更多動態
點擊發佈時可以到發佈頁面發佈動態

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

代碼說明

代碼中的色碼部分
您可以改成自己要的色碼


11. 新會員部分

1) 拉一個會員模塊
模塊標識:新會員
數據來源:新會員
顯示條數:15
顯示樣式:[內置]會員頭像列表
其它部分按照您的需求設置
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

模塊標題:這裡留空
設置好後按確定即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

2) 編輯新會員屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可

替換代碼

  1. <table>
  2. <tr><td>
  3. <div style="color:#FFFFFF; width:20px; text-align:center; background-color:#4BA5F0; -moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; ">
  4. <b>新會員</b>
  5. </div>
  6. </td><td>
  7. <div class="module cl ml mls">
  8. <ul>
  9. [loop]
  10. <li>
  11. <a href="{url}" c="1"{target}><img src="{avatar}" width="48" height="48" alt="{title}" /></a>
  12. <a href="{url}" title="{title}"{target}>{title}</a>
  13. </li>
  14. [/loop]
  15. </ul>
  16. </div>
  17. </td></tr>
  18. </table>

  20. <p align=center><img src="http://i.imgur.com/cVfux14.gif"></p>

  22. <style>
  23. .mls img {
  24. background: #fff;
  25. border-color: #f2f2f2 #cdcdcd #cdcdcd #f2f2f2;
  26. border-style: solid;
  27. border-width: 1px;
  28. border-radius: 50%;
  29. height: 45px;
  30. padding: 2px;
  31. width: 45px;}
  32. </style>
复制代码


分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

3) 編輯新會員樣式
外邊距:上 0 右 2px 下 0 左 2px

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

4) 都設置完成後按保存即可

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

代碼說明

代碼中的色碼部分
您可以改成自己要的色碼

  1. http://i.imgur.com/cVfux14.gif
复制代码

這是分隔線圖片完整網址
改成您自己的即可
如果不想要的話
可以刪除那段圖片代碼即可

border-radius: 50%
這是頭像圓角的百分比
愈小的話愈接近方型
您可以適度的調整


三. n 格完成

您可以自己改成自己想要的樣式
也可以選擇不同的數據來源來使用
然後再參考給的代碼來添加 (比如數字順序等)
不想要的模塊也可以隨時刪除
想要時再添加即可

另外不好意思
不提供懶人包 (導入文件)
主要想讓站長們能自己手動操作
來增加對 diy 的一些印象

圓角有陰影的 n 格

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

圓角沒有陰影的 n 格

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) 

直角沒有陰影的 n 格

分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本)

相关文章：

  • 2022-03-06
  • 2021-10-24
  • 2021-07-24
  • 2021-08-22
  • 2021-11-14
  • 2021-11-17
  • 2022-12-23
  • 2022-02-09
猜你喜欢
  • 2021-12-06
  • 2021-07-30
  • 2022-12-23
  • 2021-07-14
  • 2021-07-31
  • 2022-01-20
  • 2021-06-28
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode