分享】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 οnclick="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 οnclick="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 οnclick="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=diy 11]--><div id="diy 11" class="area"></div><!--[/diy]-->

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

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

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


二. 開始 diy

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

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

 

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

 

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>
    
20. 
    
21. <style type="text/css">
    
22. #up_zzjs{width:700px;height:100px;line-height:20px;overflow:hidden;}
    
23. </style>
    
24. 
    
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.οnmοuseοver=function(){p=true;}
    
33. o.οnmοuseοut=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 οnclick="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>
    
57. 
    
58. <style>
    
59. .posting{overflow:hidden;height:110px;}
    
60. </style>
    
61. <!--發帖按鈕代碼結束-->
    
62. </td></tr>
    
63. </table>

复制代码

 

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

 

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

 

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

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

 

發帖圖標

 

 

代碼說明

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

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

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

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% 框架可以不要拉
或者您現在想用
以後不想用了
再刪除這個框架即可

 

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

 

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

 

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

 

 

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

 

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

 


3. 最新圖片部分

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

 

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

 

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>
   
8. 
   
9. <script type="text/javascript">
   
10. runslideshow();
    
11. </script>
    
12. 
    
13. <style>
    
14. .slideshow span.title{background-color:#FF79BC; opacity: 0.6;}
    
15. </style>

复制代码

 

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

 

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

代碼說明

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


4. 最新帖子部分

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

 

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

 

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>
    
58. 
    
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>

复制代码

 

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

 

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

 

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

 

代碼說明

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


5. 熱門帖子部分

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

 

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

 

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>

复制代码

 

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

 

代碼說明

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


6. 主題分類部分

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

 

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

 

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>

复制代码

 

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

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

 

代碼說明

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


7. 分類信息部分

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

 

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

 

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>

复制代码

 

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

 

代碼說明

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


8. 即時聊天部分

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

填入代碼

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

 

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

 

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

 

代碼說明

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

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

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

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

後台功能

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

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

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

9. 發帖達人部分

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

 

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

 

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>
    
43. 
    
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>

复制代码

 

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

 

代碼說明

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


10. 心情點播部分

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

 

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

 

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>
    
16. 
    
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>
    
30. 
    
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>

复制代码

 

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

 

代碼說明

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


11. 新會員部分

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

 

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

 

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>
    
19. 
    
20. <p align=center><img src="http://i.imgur.com/cVfux14.gif"></p>
    
21. 
    
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>

复制代码

 

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

 

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

 

代碼說明

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

1. http://i.imgur.com/cVfux14.gif

复制代码

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

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


三. n 格完成

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

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

圓角有陰影的 n 格

 

圓角沒有陰影的 n 格

 

直角沒有陰影的 n 格