设为首页收藏本站
切换到宽版

Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
Discuz!官方免费开源建站系统»论坛 › Discuz! 交流与讨论 › Discuz!-模板 › 【分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本) ...
12345下一页
返回列表 发新帖

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

[复制链接]
dicky57 发表于 2017-2-15 22:01:24 | 显示全部楼层 |阅读模式
本帖最后由 dicky57 于 2017-2-16 21:30 编辑

大家好
今天和大家分享一個 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% 框架到這個位置



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="https://discuz.dismall.com/thread-3589972-1-1.html" target="_blank"><div style="color:#FF60AF; font-size:13px;">【分享】後台添加取消註冊郵箱必填功能 (x3.2 版本 繁和簡)</div></a>
  11. <a href="https://discuz.dismall.com/thread-3690286-1-1.html" target="_blank"><div style="color:#00AEAE; font-size:13px;">【分享】純 diy 論壇直排美化 (適用於可以 diy 的任何版本)</div></a>
  12. <a href="https://discuz.dismall.com/thread-3681294-1-1.html" target="_blank"><div style="color:#EA7500; font-size:13px;">【分享】仿官方已解決插件 (X3.1 ~ X3.2 版本 繁和簡)</div></a>
  13. <a href="https://discuz.dismall.com/thread-3649883-1-1.html" target="_blank"><div style="color:#02DF82; font-size:13px;">【分享】特定版塊帖子列表頁只顯示自己的主題 (X3.0 ~ X3.2 版本 簡和繁)</div></a>
  14. <a href="https://discuz.dismall.com/thread-3624448-1-1.html" target="_blank"><div style="color:#2894FF; font-size:13px;">【分享】如何讓網站變成多種語言翻譯 (繁和簡)</div></a>
  15. <a href="https://discuz.dismall.com/thread-3466015-1-1.html" target="_blank"><div style="color:#E800E8; font-size:13px;">【分享】如何使用目錄功能和橫排美化及寬度調整 (X3.0 ~ X3.2 版本 已更新)</div></a>
  16. <a href="https://discuz.dismall.com/thread-3582271-1-1.html" target="_blank"><div style="color:#808040; font-size:13px;">【分享】收藏版塊橫排 (x2.5 ~ x3.2 版本 兩種方案 已更新 繁和簡)</div></a>
  17. <a href="https://discuz.dismall.com/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>
复制代码




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



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>

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

  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>

  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>

  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>

  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"> &#4326; 更多心情 &#4326; </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>
复制代码




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>

  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>
复制代码




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



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



代碼說明

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

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

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

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


三. n 格完成

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

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

圓角有陰影的 n 格



圓角沒有陰影的 n 格



直角沒有陰影的 n 格

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

uesoho 发表于 2017-2-16 09:35:26 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

 楼主| dicky57 发表于 2017-2-16 18:08:17 | 显示全部楼层
uesoho 发表于 2017-2-16 09:35
支持一下

嗯~
謝謝您的回覆支持喔^^
回复

使用道具 举报

 楼主| dicky57 发表于 2017-2-16 18:09:44 | 显示全部楼层
特別感謝 民審大大 的幫忙^^
回复

使用道具 举报

bonimon 发表于 2017-2-19 16:39:43 | 显示全部楼层
不错啊！学习中。。。
回复

使用道具 举报

luoer13 发表于 2017-3-7 19:51:58 | 显示全部楼层
我看的都辛苦，别说楼主了，太强悍了，收藏了，谢谢分享
回复

使用道具 举报

楚轻狂 发表于 2017-3-9 22:43:24 | 显示全部楼层



为啥按你的设置我显示的是5行链接，你的展示是1行？
回复

使用道具 举报

楚轻狂 发表于 2017-3-9 22:46:43 | 显示全部楼层
www.miehun.com
回复

使用道具 举报

 楼主| dicky57 发表于 2017-3-14 17:25:46 | 显示全部楼层
bonimon 发表于 2017-2-19 16:39
不错啊！学习中。。。

嗯~
謝謝您的回覆支持
大家互相學習交流^^
回复

使用道具 举报

 楼主| dicky57 发表于 2017-3-14 17:27:14 | 显示全部楼层
luoer13 发表于 2017-3-7 19:51
我看的都辛苦，别说楼主了，太强悍了，收藏了，谢谢分享

嗯~
不客氣
謝謝您的回覆支持喔^^
回复

使用道具 举报

下一页 »
12345下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-23 20:25 , Processed in 0.032027 second(s), 5 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表