PhpWind:風(fēng)格制作教程

導(dǎo)航: 上一級(jí) | PhpWind | 首頁(yè) | Discuz | 動(dòng)網(wǎng)論壇 | vBulletin | phpBB | MolyX | Discuz!NT

PHPWIND風(fēng)格制作

一、創(chuàng)建新風(fēng)格的文件

• 復(fù)制.\bbs\image\下的wind文件夾，粘貼到.\bbs\image\，即得到“復(fù)件wind ”文件夾，并將該文件夾重命名為XXX
• 復(fù)制.\bbs\template\下的wind文件夾，粘貼到.\bbs\template即得到“復(fù)件wind”文件夾，仍然將該文件夾重命名為XXX
• 復(fù)制.\bbs\data\style下的wind.php，粘貼到.\bbs\data\style即得到“復(fù)件wind.php文件，并將該文件重命名為XXX.php.(該文件為風(fēng)格核心文件)

二、風(fēng)格制作核心

上面已經(jīng)得到了你的新風(fēng)格需要的文件了，現(xiàn)在可以進(jìn)行制作屬于你自己的風(fēng)格了

• 修改風(fēng)格核心文件
　將.\bbs\data\style\XXX.php文件用記事本打開(kāi)，進(jìn)行修改，具體修改如下：

注意“//”表示注釋，可以不寫進(jìn)去，你只需要在文件里修改就可以了
顏色代碼改成你自己風(fēng)格需要的顏色代碼
表格寬度設(shè)置為你的風(fēng)格需要的寬度，可以是固定值或百分比
$stylepath = 'xxx'; //此風(fēng)格在image目錄下的文件夾名稱
$tplpath = 'xxx'; //此風(fēng)格在template目錄下的風(fēng)格文件夾名稱
$yeyestyle = 'no';//表格內(nèi)部是否使用白色("yes"內(nèi)部表格邊框?qū)橥该鞯模?no"表格邊框的顏色就是你下面定義的顏色)
$tablecolor = '#E5E3E3'; //表格邊框顏色(外邊框)
$tablewidth = '98%'; //表格寬度
$mtablewidth= '760'; //頭部和尾部表格寬度
//論壇版塊列表顏色一(版塊的"論壇" "最后發(fā)表"兩列的表格背景顏色及"我的信息" "友情鏈接" "在線用戶"長(zhǎng)表格背景顏色)
$forumcolorone = '#F7F7F7';
//論壇版塊列表顏色二(版塊的"有無(wú)新貼認(rèn)證論壇"一列,"主題" "文章" "版主" 幾列的表格背景顏色及"貼子管理" "提交"按鈕的顏色)
$forumcolortwo = '#F7F7F7';
//版塊內(nèi)的文章列表顏色一("版塊" "作者" "最后發(fā)表" 幾列的顏色)
$threadcolorone = '#F1F3F5';
//版塊內(nèi)文章列表顏色二("標(biāo)題" "回復(fù)" "人氣" 幾列的顏色 及 版塊內(nèi)"在線用戶" 長(zhǎng)表格背景顏色)
$threadcolortwo = '#F7F7F7'; //版塊內(nèi)文章列表顏色二
//閱讀主題時(shí)文章背景顏色一(左右兩列的背景顏色)
$readcolorone= '#F7F7F7'; //閱讀主題時(shí)文章背景顏色一
$readcolortwo= '#F1F3F5'; //閱讀主題時(shí)文章背景顏色二
$maincolor = '#F3F3F3'; //開(kāi)發(fā)程序備用顏色(一般不用修改)

• 修改風(fēng)格CSS 相應(yīng)效果和顏色改成你自己風(fēng)格需要的(templete下面的header.htm里)

.head { color: #ffffff;background: #6699CC;padding: 5px;}
這個(gè)定義的板塊頭部的顏色 就是顯示分類板塊名稱 分類版主的那行 此處的是字體顏色為白色 背景色為#6699cc
padding就是單元格內(nèi)部的字和四周邊框的距離
.f_one {background: $forumcolorone;}
.f_two {background: $forumcolortwo;}
.t_one {background: $threadcolorone;}
.t_two {background: $threadcolortwo;}
這里定義的是論壇板塊的顏色 一般有兩種色 在data\style里的相對(duì)應(yīng)php文件里控制
.cbg { color: #000000;background: #D1DCEB;}這是控制板塊頭部下邊 論壇 回復(fù) 人氣 作者 最后回復(fù)的那條
.smalltxt {font-family: Tahoma, Verdana; font-size: 8pt;color: #000000;}小字體的設(shè)置比如在回復(fù)那一欄里面的字
.table { color:#000000;}
.cfont { color:#ffffff; }有些連接放置到HEAD里 就變成黑色了 用這個(gè)CSS可以控制 使它變成白色
.fnamecolor { color:#003366;}板塊名稱的顏色
.bold {font-weight:bold;}
定義了一個(gè)粗體的css類 可以隨時(shí)用 調(diào)用 相當(dāng)于
.headurl { color:#ffffff;} 這個(gè)好像和cfont一樣的功能 （只是我的感覺(jué)）
.index_font{color: #3A4F6C;background-color:#D1DCEB; font-weight:bold;padding: 5px;}
定義 我的信息 友情連接 在線會(huì)員 那一欄的
.tpc_title { font-size: 12px;font-weight:bold;}read.htm里的標(biāo)題文字 粗體 大小12px
.tpc_content { font-size: 12px;}read.htm里的內(nèi)容文字 大小12px
.i_table {BORDER: $tablecolor 1px solid;}定義表格的邊框線 顏色在相應(yīng)的data/style/***.php文件里控制 寬度一像素

三、修改風(fēng)格需要的圖片

將.\bbs\image\XXX里的圖片換成風(fēng)格需要的圖片

   .\bbs\image\xxx目錄下圖片是一些和版塊相關(guān)的,還有發(fā)新貼一類的
   lock.gif----認(rèn)證版塊圖片
   logo.gif----論壇LOGO
   new.gif----有新貼
   old.gif----無(wú)新貼
   post.gif----發(fā)表主題
   reply.gif----回復(fù)主題
   sigline.gif----簽名分隔線
   vote.gif----發(fā)表新投票 
   file文件夾：一般是些小圖標(biāo)，
   attc.gif----附件
   digest_1.gif----精華1
   digest_2.gif----精華2
   headtopic_1.gif----置頂1
   headtopic_2.gif----置頂2
   headtopic_3.gif----置頂3
   img.gif----圖片類型
   multipage.gif----多頁(yè)圖片
   music.gif----音樂(lè)圖片
   new.gif----新貼圖片
   txt.gif----文本圖片
   zip.gif----壓縮文件圖片
   forumlogo文件夾：如果要在版塊前加logo圖，放在這里，不過(guò)要后臺(tái)設(shè)置，這里不討論之

   group文件夾：用戶組小圖標(biāo)（游客，管理員，會(huì)員等。。）
   2.gif----游客圖片
   3.gif----管理員圖片
   4.gif----總版主圖片
   5.gif----版主圖片
   6.gif----普通會(huì)員圖片
   16.gif----榮譽(yù)會(huì)員圖片 

   index文件夾：[[首頁(yè)]]細(xì)節(jié)的小圖片
   birth.gif
   foruminfo.gif
   home.gif----首頁(yè)論壇圖片
   msg.gif----我的信息圖片
   online.gif----在線用戶圖片
   share.gif----友情鏈接圖片 
   level文件夾：論壇用戶級(jí)別的圖片
   3.gif---管理員
   4.gif---總版主
   5.gif---版主
   8.gif---游客、default、驗(yàn)證會(huì)員、禁止發(fā)言、新手上路
   9.gif---俠客
   10.gif---騎士
   11.gif---圣騎士
   12.gif---精靈王
   13.gif---風(fēng)云使者
   13.gif---光明使者
   15.gif---天使 
   read文件夾：讀帖時(shí)候的小圖片（信息，引用，編輯等。。）
   profile.gif 資料
   message.gif 短信
   email.gif 郵件
   emailto.gif 推薦
   quote.gif 引用
   edit.gif 編輯
   online.gif 在線圖標(biāo)
   offline 離線圖標(biāo)
   rate.gif 版主評(píng)分圖標(biāo)
   postban.gif 禁言圖標(biāo)
   top.gif 跳到頂部圖標(biāo) 

   thread文件夾：版塊里帖子狀態(tài)小圖片（就是置頂，熱門，鎖定等主題帖狀態(tài)）
   anc.gif----公告圖片
   topicclose.gif----主題關(guān)閉圖片
   topichot.gif----熱門主題圖片
   topiclock.gif----鎖定主題圖片
   topicnew.gif----新主題圖片
   vote.gif----投票圖片
   votelock.gif----鎖定投票圖片

另外如果你模版里需要另外的圖片，可以直接放在xxx目錄下，或在xxx目錄下新建個(gè)你自己隨便取的文件夾名字，在模版里用的時(shí)候圖片路徑指向該文件夾就可以了

－－－－－－－－ 附加說(shuō)明：

  論壇安裝后的官方WIND風(fēng)格建議各位不要?jiǎng)h除?！?yàn)楦鶕?jù)PW的程序設(shè)計(jì)，你自己設(shè)計(jì)的風(fēng)格時(shí)，比如你自己的風(fēng)格里READ.HTM模板和官方的 WIND風(fēng)格里的READ.HTM模板沒(méi)有區(qū)別并且準(zhǔn)備保持一致，那么，你就不需要給你自己的風(fēng)格里面加入READ.HTM模板，且完全可以刪除你的READ.HTM模板。這樣，當(dāng)程序發(fā)現(xiàn)你的風(fēng)格里沒(méi)有READ.HTM模板時(shí)，會(huì)自動(dòng)調(diào)用WIND風(fēng)格的READ.HTM模板來(lái)補(bǔ)充，這樣就和官方的READ.HTM模板做到了保持一致。其他諸如THREAD.HTM等等模板也是一樣的。PW程序是特意這樣做的。這樣做的好處：如果PW推出新版，官方WIND風(fēng)格里的READ.HTM模板有一個(gè)小改動(dòng)，同時(shí)由于你自己風(fēng)格的READ.HTM模板和官方WIND相同且準(zhǔn)備保持一致，因而沒(méi)有設(shè)置READ.HTM模板，那么當(dāng)升級(jí)的時(shí)候，你就無(wú)需操心官方模板的變化，程序自然會(huì)調(diào)用WIND風(fēng)格的READ.HTM模板。此時(shí)，你的風(fēng)格等于無(wú)縫升級(jí)到了新版本。