大家好
今天和大家分享一個 diy 的 n 格
分享給有需要的站長們^^
一. 首先自定義 n 格的外框架及兩個 diy 域
打開
template/default/forum/discuz.htm 文件
查找
上方添加
這裡我們提供三種方案
1. 圓角有陰影的 n 格框架
2. 圓角沒陰影的 n 格框架
3. 直角沒陰影的 n 格框架
代碼說明
#F0F8FF
這是 n 格最上方欄目的背景色
可以改成自己的色碼
如果這裡您修改了色碼
那等一下 diy 模塊樣式背景色時
模塊樣式背景色也要修改一致
這是自定義 diy 域
前後數字須一致才行
如果您之前有自定義 diy 域
要小心數字不要重覆即可
二. 開始 diy
1. 時間和推薦主題及發帖按鈕部分
1) 拉一個 100% 框架到這個位置
2) 編輯框架標題
框架標題:這裡留空
設置好後按確定即可
3) 拉一個靜態模塊
模塊標識:時間和推薦主題及發帖按鈕
數據來源:選擇自定義 html
其它按照您自己的需求設置
設置好後填入代碼按確定即可
填入代碼
模塊標題:這裡留空
設置好後按確定即可
4) 編輯模塊樣式
外邊距:上下左右都設置為 0
背景顏色:設置 #F0F8FF
這裡要和修改文件時的背景色一致
設置好後按確定即可
5) 都設置完成後按保存即可
點擊發帖按鈕時
會跳出版塊選單
然後選擇版塊來發帖
點擊收起和展開按鈕時
n 格自動收起和展開
發帖圖標
代碼說明
代碼中有註明代碼開始代碼結束
這些文字按保存後前台不會顯示
主要是讓站長們知道哪段代碼作用是什麼
還有就是方便以後查找修改之用
如果不喜歡也可以刪除即可 (不影響原本代碼)
時間代碼部分
可以到這個頁面來選擇您想要的顏色和設置
獲取代碼後請記得參考我給的代碼比對一下數值設置
才不會有移位或是不對稱的情形
http://clocklink.com/gallery/view/html5-004
如果這種樣式的時鐘您不喜歡的話
也可以點選左邊選項
挑選自己喜歡的時鐘樣式來使用
推薦主題部分
這裡設置了 8 個主題
您也可以自己再新增 (參考代碼再新增即可)
這部份您也可以改用公告或是論壇規定等主題
也可以改成文字廣告又或者格言之類的詞來使用
也可以改成貼心問候語或是音樂盒等等
看您個人的喜好而定即可 (或是一段時間改一下樣式)
如果都不喜歡的話可以把這段代碼刪除即可
發帖按鈕部分
這是發帖按鈕的圖片完整網址
改成您自己的即可
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) 編輯最新圖片屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 編輯最新圖片樣式
上邊框:3px 實線 顏色:#339999
外邊距:上 0 右 2px 下 0 左 2px
設置好後按確定即可
4) 都設置完成後按保存即可
代碼說明
#FF79BC
這是主題名稱的背景顏色
您可以改成自己要的色碼
4. 最新帖子部分
1) 拉一個帖子模塊
模塊標識:最新帖子
模塊分類:帖子模塊
數據來源:最新帖
顯示條數:10
顯示樣式:[內置]帖子標題+作者
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:最新帖子
位置:居左 偏移量:-14px
設置好後按確定即可
2) 編輯最新帖子屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 都設置完成後按保存即可
左邊數字是方型 (下一個熱門主題時提供圓型數字)
會提供兩種方案有方型和圓型
您可以搭配或是單獨使用一種樣式
顯示帖子所在版塊名稱
滑鼠移到主題時會顯示相關資訊
另外新手站長可能不知道
diy 時可以挑選一個主題
點擊右邊的編輯進入
可以設置固定主題的位置
設置高亮粗體等等功能
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
5. 熱門帖子部分
1) 拉一個帖子模塊
模塊標識:熱門帖子
模塊分類:帖子模塊
數據來源:熱門帖
顯示條數:10
顯示樣式:[內置]帖子標題+作者
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:熱門帖子
設置好後按確定即可
2) 編輯熱門帖子屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 都設置完成後按保存即可
左邊數字是圓型
您可以搭配或是單獨使用一種樣式
顯示帖子所在版塊名稱
滑鼠移到主題時會顯示相關資訊
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
6. 主題分類部分
1) 拉一個帖子模塊
模塊標識:主題分類
模塊分類:帖子模塊
數據來源:最新帖
所在版塊:勾選有主題分類的版塊
顯示條數:10
顯示樣式:[內置]帖子標題+作者
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:主題分類
設置好後按確定即可
2) 編輯主題分類屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 都設置完成後按保存即可
左邊數字是方型
您可以搭配或是單獨使用一種樣式
顯示帖子所在版塊名稱及主題分類名稱
滑鼠移到主題時會顯示相關資訊
這裡看到主題分類有三種顏色
主要是 diy 調用後台設置
您的後台如果有設置顏色
前台就會顯示顏色
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
7. 分類信息部分
1) 拉一個帖子模塊
模塊標識:分類信息
模塊分類:帖子模塊
數據來源:高級自定義
所在版塊:勾選有分類信息的版塊
分類信息:勾選要顯示的分類信息
顯示條數:10
顯示樣式:[內置]帖子標題+作者
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:分類信息
設置好後按確定即可
2) 編輯分類信息屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 都設置完成後按保存即可
左邊數字是圓型
您可以搭配或是單獨使用一種樣式
顯示帖子所在版塊名稱及分類信息名稱
滑鼠移到主題時會顯示相關資訊
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
8. 即時聊天部分
1) 拉一個靜態模塊
模塊標識:即時聊天
數據來源:自定義html
其它部分按照您的需求設置
設置好後填入代碼按確定即可
填入代碼
這裡不提供代碼
如果提供我的代碼共用一個聊天室的話
您和我的站聊天內容會同時顯示在一起
模塊標題:即時聊天
設置好後按確定即可
2) 都設置完成後按保存即可
代碼說明
建議您到這個網站
申請一個免費的聊天室
http://www.cbox.ws/?r=6-772754
雖然是免費的聊天室
但功能還是很強大的
申請好後獲取代碼來使用
會有一個類似的後台
可以對聊天室進行管理
後台功能
可以自定義風格樣式
可以自定義語詞過濾
可以自定義表情符號
可以查看留言者的 ip
可以禁止或解禁留言者的 ip
可以管理刪除不雅留言等等
當然如果您覺得還不夠的話
也可以升級到付費
功能更多更強大
個人覺得免費的就很好用了^^
9. 發帖達人部分
1) 拉一個會員模塊
模塊標識:發帖達人
數據來源:發帖排行
顯示條數:4
顯示樣式:[內置]頭像+用戶名+發帖數 (有序)
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:發帖達人
位置:居左 偏移量:-14px
設置好後按確定即可
2) 編輯發帖達人屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 都設置完成後按保存即可
顯示排名及作者頭像
顯示用戶名及發帖數和積分數
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
10. 心情點播部分
1) 拉一個記錄模塊
模塊標識:心情點播
數據來源:最新記錄
顯示條數:10
顯示樣式:[內置]頭像+作者+內容
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:心情點播
設置好後按確定即可
2) 編輯心情點播屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 都設置完成後按保存即可
心情點播會上下滾動
點擊我的可以查看自己發佈的動態
點擊好友的可以查看好友發佈的動態
點擊更多心情時可以查看更多動態
點擊發佈時可以到發佈頁面發佈動態
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
11. 新會員部分
1) 拉一個會員模塊
模塊標識:新會員
數據來源:新會員
顯示條數:15
顯示樣式:[內置]會員頭像列表
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:這裡留空
設置好後按確定即可
2) 編輯新會員屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 編輯新會員樣式
外邊距:上 0 右 2px 下 0 左 2px
4) 都設置完成後按保存即可
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
這是分隔線圖片完整網址
改成您自己的即可
如果不想要的話
可以刪除那段圖片代碼即可
border-radius: 50%
這是頭像圓角的百分比
愈小的話愈接近方型
您可以適度的調整
三. n 格完成
您可以自己改成自己想要的樣式
也可以選擇不同的數據來源來使用
然後再參考給的代碼來添加 (比如數字順序等)
不想要的模塊也可以隨時刪除
想要時再添加即可
另外不好意思
不提供懶人包 (導入文件)
主要想讓站長們能自己手動操作
來增加對 diy 的一些印象
圓角有陰影的 n 格
圓角沒有陰影的 n 格
直角沒有陰影的 n 格
今天和大家分享一個 diy 的 n 格
分享給有需要的站長們^^
一. 首先自定義 n 格的外框架及兩個 diy 域
打開
template/default/forum/discuz.htm 文件
查找
上方添加
這裡我們提供三種方案
1. 圓角有陰影的 n 格框架
2. 圓角沒陰影的 n 格框架
3. 直角沒陰影的 n 格框架
代碼說明
#F0F8FF
這是 n 格最上方欄目的背景色
可以改成自己的色碼
如果這裡您修改了色碼
那等一下 diy 模塊樣式背景色時
模塊樣式背景色也要修改一致
這是自定義 diy 域
前後數字須一致才行
如果您之前有自定義 diy 域
要小心數字不要重覆即可
二. 開始 diy
1. 時間和推薦主題及發帖按鈕部分
1) 拉一個 100% 框架到這個位置
2) 編輯框架標題
框架標題:這裡留空
設置好後按確定即可
3) 拉一個靜態模塊
模塊標識:時間和推薦主題及發帖按鈕
數據來源:選擇自定義 html
其它按照您自己的需求設置
設置好後填入代碼按確定即可
填入代碼
模塊標題:這裡留空
設置好後按確定即可
4) 編輯模塊樣式
外邊距:上下左右都設置為 0
背景顏色:設置 #F0F8FF
這裡要和修改文件時的背景色一致
設置好後按確定即可
5) 都設置完成後按保存即可
點擊發帖按鈕時
會跳出版塊選單
然後選擇版塊來發帖
點擊收起和展開按鈕時
n 格自動收起和展開
發帖圖標
代碼說明
代碼中有註明代碼開始代碼結束
這些文字按保存後前台不會顯示
主要是讓站長們知道哪段代碼作用是什麼
還有就是方便以後查找修改之用
如果不喜歡也可以刪除即可 (不影響原本代碼)
時間代碼部分
可以到這個頁面來選擇您想要的顏色和設置
獲取代碼後請記得參考我給的代碼比對一下數值設置
才不會有移位或是不對稱的情形
http://clocklink.com/gallery/view/html5-004
如果這種樣式的時鐘您不喜歡的話
也可以點選左邊選項
挑選自己喜歡的時鐘樣式來使用
推薦主題部分
這裡設置了 8 個主題
您也可以自己再新增 (參考代碼再新增即可)
這部份您也可以改用公告或是論壇規定等主題
也可以改成文字廣告又或者格言之類的詞來使用
也可以改成貼心問候語或是音樂盒等等
看您個人的喜好而定即可 (或是一段時間改一下樣式)
如果都不喜歡的話可以把這段代碼刪除即可
發帖按鈕部分
這是發帖按鈕的圖片完整網址
改成您自己的即可
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) 編輯最新圖片屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 編輯最新圖片樣式
上邊框:3px 實線 顏色:#339999
外邊距:上 0 右 2px 下 0 左 2px
設置好後按確定即可
4) 都設置完成後按保存即可
代碼說明
#FF79BC
這是主題名稱的背景顏色
您可以改成自己要的色碼
4. 最新帖子部分
1) 拉一個帖子模塊
模塊標識:最新帖子
模塊分類:帖子模塊
數據來源:最新帖
顯示條數:10
顯示樣式:[內置]帖子標題+作者
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:最新帖子
位置:居左 偏移量:-14px
設置好後按確定即可
2) 編輯最新帖子屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 都設置完成後按保存即可
左邊數字是方型 (下一個熱門主題時提供圓型數字)
會提供兩種方案有方型和圓型
您可以搭配或是單獨使用一種樣式
顯示帖子所在版塊名稱
滑鼠移到主題時會顯示相關資訊
另外新手站長可能不知道
diy 時可以挑選一個主題
點擊右邊的編輯進入
可以設置固定主題的位置
設置高亮粗體等等功能
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
5. 熱門帖子部分
1) 拉一個帖子模塊
模塊標識:熱門帖子
模塊分類:帖子模塊
數據來源:熱門帖
顯示條數:10
顯示樣式:[內置]帖子標題+作者
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:熱門帖子
設置好後按確定即可
2) 編輯熱門帖子屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 都設置完成後按保存即可
左邊數字是圓型
您可以搭配或是單獨使用一種樣式
顯示帖子所在版塊名稱
滑鼠移到主題時會顯示相關資訊
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
6. 主題分類部分
1) 拉一個帖子模塊
模塊標識:主題分類
模塊分類:帖子模塊
數據來源:最新帖
所在版塊:勾選有主題分類的版塊
顯示條數:10
顯示樣式:[內置]帖子標題+作者
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:主題分類
設置好後按確定即可
2) 編輯主題分類屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 都設置完成後按保存即可
左邊數字是方型
您可以搭配或是單獨使用一種樣式
顯示帖子所在版塊名稱及主題分類名稱
滑鼠移到主題時會顯示相關資訊
這裡看到主題分類有三種顏色
主要是 diy 調用後台設置
您的後台如果有設置顏色
前台就會顯示顏色
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
7. 分類信息部分
1) 拉一個帖子模塊
模塊標識:分類信息
模塊分類:帖子模塊
數據來源:高級自定義
所在版塊:勾選有分類信息的版塊
分類信息:勾選要顯示的分類信息
顯示條數:10
顯示樣式:[內置]帖子標題+作者
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:分類信息
設置好後按確定即可
2) 編輯分類信息屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 都設置完成後按保存即可
左邊數字是圓型
您可以搭配或是單獨使用一種樣式
顯示帖子所在版塊名稱及分類信息名稱
滑鼠移到主題時會顯示相關資訊
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
8. 即時聊天部分
1) 拉一個靜態模塊
模塊標識:即時聊天
數據來源:自定義html
其它部分按照您的需求設置
設置好後填入代碼按確定即可
填入代碼
這裡不提供代碼
如果提供我的代碼共用一個聊天室的話
您和我的站聊天內容會同時顯示在一起
模塊標題:即時聊天
設置好後按確定即可
2) 都設置完成後按保存即可
代碼說明
建議您到這個網站
申請一個免費的聊天室
http://www.cbox.ws/?r=6-772754
雖然是免費的聊天室
但功能還是很強大的
申請好後獲取代碼來使用
會有一個類似的後台
可以對聊天室進行管理
後台功能
可以自定義風格樣式
可以自定義語詞過濾
可以自定義表情符號
可以查看留言者的 ip
可以禁止或解禁留言者的 ip
可以管理刪除不雅留言等等
當然如果您覺得還不夠的話
也可以升級到付費
功能更多更強大
個人覺得免費的就很好用了^^
9. 發帖達人部分
1) 拉一個會員模塊
模塊標識:發帖達人
數據來源:發帖排行
顯示條數:4
顯示樣式:[內置]頭像+用戶名+發帖數 (有序)
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:發帖達人
位置:居左 偏移量:-14px
設置好後按確定即可
2) 編輯發帖達人屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 都設置完成後按保存即可
顯示排名及作者頭像
顯示用戶名及發帖數和積分數
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
10. 心情點播部分
1) 拉一個記錄模塊
模塊標識:心情點播
數據來源:最新記錄
顯示條數:10
顯示樣式:[內置]頭像+作者+內容
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:心情點播
設置好後按確定即可
2) 編輯心情點播屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 都設置完成後按保存即可
心情點播會上下滾動
點擊我的可以查看自己發佈的動態
點擊好友的可以查看好友發佈的動態
點擊更多心情時可以查看更多動態
點擊發佈時可以到發佈頁面發佈動態
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
11. 新會員部分
1) 拉一個會員模塊
模塊標識:新會員
數據來源:新會員
顯示條數:15
顯示樣式:[內置]會員頭像列表
其它部分按照您的需求設置
設置好後按確定即可
模塊標題:這裡留空
設置好後按確定即可
2) 編輯新會員屬性
模塊模板:將原本的代碼替換掉
設置好後按更新即可
替換代碼
3) 編輯新會員樣式
外邊距:上 0 右 2px 下 0 左 2px
4) 都設置完成後按保存即可
代碼說明
代碼中的色碼部分
您可以改成自己要的色碼
這是分隔線圖片完整網址
改成您自己的即可
如果不想要的話
可以刪除那段圖片代碼即可
border-radius: 50%
這是頭像圓角的百分比
愈小的話愈接近方型
您可以適度的調整
三. n 格完成
您可以自己改成自己想要的樣式
也可以選擇不同的數據來源來使用
然後再參考給的代碼來添加 (比如數字順序等)
不想要的模塊也可以隨時刪除
想要時再添加即可
另外不好意思
不提供懶人包 (導入文件)
主要想讓站長們能自己手動操作
來增加對 diy 的一些印象
圓角有陰影的 n 格
圓角沒有陰影的 n 格
直角沒有陰影的 n 格