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

导语:一. 首先自定义 n 格的外框架及兩个 diy 域 打开 template/default/forum/discuz.htm 文件(注意:修改有风险,修改前请先备份源文件) 查找 上方添加 ...
查看: 128|回复: 0

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

[复制链接]
  
一. 首先自定义 n 格的外框架及兩个 diy 域

打开

template/default/forum/discuz.htm 文件(注意:修改有风险,修改前请先备份源文件

查找

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


上方添加

(这里我们提供三种方案)

1. 圆角有陰影的 n 格

1.jpg

2. 圓角沒陰影的 n 格

2.JPG

3. 直角沒陰影的 n 格

3.JPG

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% 框架到這个位置

1.jpg

2) 编辑框架标题
框架标题:这里留空
设置好后按确定即可

2.JPG

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

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

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


1.jpg

板块标题:这里留空
设置好后按确定即可

2.JPG

4) 编辑模块样式
外边距:上下左右都设置為 0
背景顏色:设置 #F0F8FF
这里要和修改文件时的背景色一致
设置好后按确定即可

3.JPG

5) 都设置完成后按保存即可
点击发帖按鈕时
会跳出板块选单
然后选择板块來发帖

点击收起和展开按鈕时
n 格自动收起和展开

4.JPG

发帖图标

5.jpg

6.jpg

代碼說明

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

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

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

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

1.jpg

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

2.JPG

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

3.JPG

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

4.JPG

5.jpg

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

6.jpg

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

7.jpg

3. 最新圖片部分

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

1.jpg

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

1.jpg

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. <script type="text/javascript">
  9. runslideshow();
  10. </script>

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


1.jpg

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

1.jpg

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

代碼說明

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


4. 最新帖子部分

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

1.jpg

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

1.jpg

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. 标题: {title}
  51. 发表: {author}  {dateline}
  52. 浏览: {views}
  53. 回复: {lastposter}  {lastpost}
  54. 回复: {replies}"
  55. {target}>{title}</a></li>
  56. [/loop]
  57. </div>
  58. </td></tr>
  59. </table>

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


1.jpg

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

1.jpg

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

1.jpg

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

1.jpg

代碼說明

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


5. 熱門帖子部分

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

1.jpg

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

1.jpg

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="https://kuchingshare.my/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. 标题: {title}
  50. 发表: {author}  {dateline}
  51. 浏览: {views}
  52. 回复: {lastposter}  {lastpost}
  53. 回复: {replies}"
  54. {target}>{title}</a></li>
  55. [/loop]
  56. </div>
  57. </td></tr>
  58. </table>
复制代码


1.jpg

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

1.jpg

代碼說明

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


6. 主題分類部分

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

1.jpg

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

1.jpg

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. 标题: {title}
  50. 发表: {author}  {dateline}
  51. 浏览: {views}
  52. 回复: {lastposter}  {lastpost}
  53. 回复: {replies}"
  54. {target}>{title}</a></li>
  55. [/loop]
  56. </div>
  57. </td></tr>
  58. </table>
复制代码


1.jpg

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

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

1.jpg

代碼說明

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


7. 分類信息部分

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

1.jpg

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

1.jpg

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. 标题: {title}
  50. 发表: {author}  {dateline}
  51. 浏览: {views}
  52. 回复: {lastposter}  {lastpost}
  53. 回复: {replies}"
  54. {target}>{title}</a></li>
  55. [/loop]
  56. </div>
  57. </td></tr>
  58. </table>
复制代码


1.jpg

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

1.jpg

代碼說明

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


8. 即時聊天部分

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

填入代碼

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

1.jpg

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

1.jpg

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

1.jpg

代碼說明

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

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

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

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

後台功能

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

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

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

9. 發帖達人部分

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

1.jpg

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

1.jpg

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


1.jpg

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

1.jpg

代碼說明

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


10. 心情點播部分

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

1.jpg

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

1.jpg

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. <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;">
  17. <br>
  18. <table align="center">
  19. <tr><td>
  20. <font color="#FF60AF"><b>多久沒和大家分享心情了    <p>
  21. 即刻分享您的點點滴滴吧<p></font>
  22. <font color="964BF0">.................</font><a href="/home.php?mod=space&do=home&view=all" target="_blank"><font color="#964BF0"> &#4326; 更多心情 &#4326; </font></a></font></b></td>
  23. <td style="padding-left: 5px;">
  24. <a href="/home.php" target="_blank"><img src="/static/image/common/mood_input_btn.png"></a>
  25. </td></tr>
  26. </table>
  27. <br>
  28. </fieldset>

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


1.jpg

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

1.jpg

代碼說明

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


11. 新會員部分

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

1.jpg

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

1.jpg

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

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


1.jpg

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

1.jpg

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

1.jpg

代碼說明

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

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


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

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


三. n 格完成

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


来源:Discuz!论坛

免责声明:本网站的图片资料内容大部分取自于互联网,如果侵犯了原作者的权利请及时通知本站,把邮件发送至hsbk@hotmail.com,我们会在收到邮件24小时内尽快删除。





上一篇:[分享]在线会员显示小头像
下一篇:[分享]解决--对不起!你安装的不是正版应用,安装程序无法继续执行


回复

使用道具 举报

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

本版积分规则

手机扫码下载app

手机版|Archiver|站点地图|古晋分享站 运行:

© 2001-2019 Comsenz Inc.  Powered by Discuz! X3.4