[教學] 如何製作phpbb風格

phpBB 2 Style Support
討論的範圍包含版面排列、樣式、配置;外掛問題,請到相關版面依發問格式發表!
(發表文章請按照公告格式發表,違者砍文)

版主: 版主管理群

主題已鎖定
Artemas
竹貓忠實會員
竹貓忠實會員
文章: 514
註冊時間: 2003-08-23 03:18
來自: NorthBlue
聯繫:

[教學] 如何製作phpbb風格

文章 Artemas » 2006-10-01 03:25

製作phpbb風格,因為過程有很多種狀況,所以分成幾個章節來說明

首先先剖析tpl風格檔的用意,T解釋成Temporary或Templates都可以,P解釋為Program或page....反正不重要啦XD
重點就是phpbb將tpl當成部分HTM與特殊函式的鑲嵌檔案,這與ASP或PHP中include的安插原裡一樣
因此不需要每隻tpl都要有完整的<htm>、<head>或<body>等等這些絕對元素。
以下圖解來解釋何謂 include 概念

圖檔
圖中範例的顏色框標示了安插檔案的範圍作用,overall_header.tpl是htm、meta與body及css等等的起點包含了整體的背景與最外圍的框架,
overall_footer.tpl僅只是htm、body及終點,及包含版本宣告文而已。
中間的viewtopic_body.tpl 又安插了viewtopic_poll_result.tpl與jumpbox.tpl功能,這是最典型的動態資料網頁模組。
這跟一般的靜態htm檔案有何不同,舉個簡單的例子,如目錄選單,傳統靜態網頁不管幾頁,若是目錄結構更新異動,則每一隻htm檔案都要去更改,動態網頁則不管幾百頁,只要掌管目錄的一隻檔案修改即可,例如overall_header.tpl 中的目錄,phpbb每一個畫面都基本自動包含了這隻檔案引入,因此一隻檔案管遍所有頁面共同的目錄。
再舉一例,phpbb並不是每個頁面都需要有---[前往]選擇版面的下拉式選擇表---,於是把這個功能獨立寫一隻jumpbox.tpl,當有需要的頁面要有此功能時,則安插引入即可。
或許很多asp或php設計師會納悶,既然include就可以分解做到的事情,為何又要把他以tpl的檔案重工分解?
這就是phpbb迷人的地方,因為就是有開放風格開發設計的地方。如果一開始就採php來包含風格與主程式引擎,那麼風格永遠就只有一種囉,所以他們以php語法當成論壇引擎,tpl另外打包成為個別的風格版型。

再來了解每個TPL檔案代表的用途:

agreement.tpl --- 註冊同意聲明
-----------------------------------------------------------------------------------------------
bbcode.tpl --- BBcode代碼轉換瀏覽頁面時的HTM或CSS語法
-----------------------------------------------------------------------------------------------
confirm_body.tpl --- 系統訊息確認頁面 //有是與否的選擇按鈕
-----------------------------------------------------------------------------------------------
error_body.tpl --- 錯誤訊息頁面
-----------------------------------------------------------------------------------------------
faq_body.tpl --- 常見問題
-----------------------------------------------------------------------------------------------
groupcp_info_body.tpl---會員群組資訊頁面
-----------------------------------------------------------------------------------------------
groupcp_pending_info.tpl --- 等待審核群組成員
-----------------------------------------------------------------------------------------------
groupcp_user_body.tpl---會員群組成員一覽表
-----------------------------------------------------------------------------------------------
index_body.tpl --- 首頁 //僅只是首頁中間討論區總攬表與誰在線上的簡易檢視表
-----------------------------------------------------------------------------------------------
jumpbox.tpl --- [前往]選擇版面的下拉式選擇表
-----------------------------------------------------------------------------------------------
login_body.tpl --- 會員登入頁面
-----------------------------------------------------------------------------------------------
memberlist_body.tpl --- 會員列表
-----------------------------------------------------------------------------------------------
message_body.tpl --- 系統訊息告示區 //都是結論報告訊息
-----------------------------------------------------------------------------------------------
modcp_body.tpl --- 版面管理,主視窗
-----------------------------------------------------------------------------------------------
modcp_move.tpl --- 版面管理,移動主題控制台
-----------------------------------------------------------------------------------------------
modcp_split.tpl --- 版面管理,主題分割控制台
-----------------------------------------------------------------------------------------------
modcp_viewip.tpl --- 版面管理,檢視文章發表人IP位置
-----------------------------------------------------------------------------------------------
overall_footer.tpl --- 整體頁面的底部 //包含htm、head與body的結束
-----------------------------------------------------------------------------------------------
overall_header.tpl --- 整體頁面頂部 //包含htm、meta與body及css等等的完整起頭元素
-----------------------------------------------------------------------------------------------
posting_body.tpl --- 貼文頁面 //包含回覆與私人訊息
-----------------------------------------------------------------------------------------------
posting_poll_body.tpl --- 貼文區下方的投票選項
-----------------------------------------------------------------------------------------------
posting_preview.tpl --- 貼文區上方的預覽區
-----------------------------------------------------------------------------------------------
posting_smilies.tpl --- 表情圖示彈跳小視窗
-----------------------------------------------------------------------------------------------
posting_topic_review.tpl-- 回覆文章下方的原文檢視區 //採iframe的方式
-----------------------------------------------------------------------------------------------
privmsgs_body.tpl --- 私人訊息首頁
-----------------------------------------------------------------------------------------------
privmsgs_popup.tpl --- 私人訊息彈跳通知小視窗
-----------------------------------------------------------------------------------------------
privmsgs_preview.tpl --- 私人訊息貼文區上方的預覽區
-----------------------------------------------------------------------------------------------
privmsgs_read_body.tpl --- 閱讀私人訊息文章頁面
-----------------------------------------------------------------------------------------------
profile_add_body.tpl ---- 註冊與會員編輯個人資料頁面
-----------------------------------------------------------------------------------------------
profile_avatar_gallery.tpl --- 個人資料中的系統頭像選擇頁面
-----------------------------------------------------------------------------------------------
profile_send_email.tpl --- (啟用)會員郵件傳送的貼文視窗 //僅能純文字輸入
-----------------------------------------------------------------------------------------------
profile_send_pass.tpl --- 忘記密碼時的步驟流程頁面
-----------------------------------------------------------------------------------------------
profile_view_body.tpl --- 檢視會員的個人資料頁面
-----------------------------------------------------------------------------------------------
search_body.tpl --- 搜尋輸入選項主頁面
-----------------------------------------------------------------------------------------------
search_results_posts.tpl --- 搜尋結果以文章顯示排列
-----------------------------------------------------------------------------------------------
search_results_topics.tpl --- 搜尋結果以主題顯示排列
-----------------------------------------------------------------------------------------------
search_username.tpl --- 搜尋收件人的彈跳小視窗
-----------------------------------------------------------------------------------------------
simple_footer.tpl --- 任何彈跳小視窗的底部 //包含htm、head與body的結束
-----------------------------------------------------------------------------------------------
simple_header.tpl --- 任何彈跳小視窗頂部 //包含htm、meta與body及css等等的完整起頭元素
-----------------------------------------------------------------------------------------------
viewforum_body.tpl --- 檢視版面
-----------------------------------------------------------------------------------------------
viewonline_body.tpl --- 檢視誰在線上的人員清單表 //不是首頁的誰在線上表喔
-----------------------------------------------------------------------------------------------
viewtopic_body.tpl --- 檢視文章頁面
-----------------------------------------------------------------------------------------------
viewtopic_poll_ballot.tpl --- 檢視文章上方(瀏覽者)未投票選單項目表
-----------------------------------------------------------------------------------------------
viewtopic_poll_result.tpl --- 檢視文章上方(瀏覽者)已投票百分比結果
-----------------------------------------------------------------------------------------------

如有誤之處請多指教 :mrgreen:
圖檔
Os: Windows 2003
Constitute: IIS.6 + php4 + MySql 4 + ODBC + phpMyAdmin2.6.0 + phpBB 2.0.23
url: http://oops.cafepark.com

Artemas
竹貓忠實會員
竹貓忠實會員
文章: 514
註冊時間: 2003-08-23 03:18
來自: NorthBlue
聯繫:

[教學] 風格製作基礎篇

文章 Artemas » 2006-10-01 03:27

風格製作基礎篇

首先製作風格必須有範本當基礎元件,你可以找出你喜歡的風格版本來當基礎版本。只要拷貝選定的原風格目錄夾,另取一個名稱來當風格新名子。
特別要注意:如果說你自己原先使用的風格已經有安裝一些MOD,那麼你以這個修改的來製作新的風格,雖然能省去你重複安裝MOD的好處,但是不能夠打包給他人使用囉。

我們先以 subSilver 官方預設風格來當範本,拷貝一份並取好名稱,假設取名為ABC,之後同放置於 templates\當中,再來必須找出所有檔案中有任何subSilver關鍵字的檔案,你可以使用檔案總管或者UltraEdit-32軟體搜尋,搜尋templates\ABC與templates\ABC\admin二個目錄夾。
ABC目錄夾可以找出16個包含關鍵字的檔案,ABC\admin可以找出4個包含關鍵字的檔案。

--------------------------------------------------------------------------------
在 ...\subSilver\faq_body.tpl' :
第40行 <td class="spaceRow" height="1"><img src="templates/subSilver/images/spacer.gif" alt="" width="1" height="1" /></td>
--------------------------------------------------------------------------------
在 ...\subSilver\index.htm' :
第3行 <title>subSilver created by subBlue Design</title> ***這裡可以把subBlue字改成你的名字***
--------------------------------------------------------------------------------
在 ...\subSilver\index_body.tpl' :
第58行 <td class="row1" align="center" valign="middle" rowspan="2"><img src="templates/subSilver/images/whosonline.gif" alt="{L_WHO_IS_ONLINE}" /></td>
第100行 <td width="20" align="center"><img src="templates/subSilver/images/folder_new_big.gif" alt="{L_NEW_POSTS}"/></td>
第103行 <td width="20" align="center"><img src="templates/subSilver/images/folder_big.gif" alt="{L_NO_NEW_POSTS}" /></td>
第106行 <td width="20" align="center"><img src="templates/subSilver/images/folder_locked_big.gif" alt="{L_FORUM_LOCKED}" /></td>
--------------------------------------------------------------------------------
在 ...\subSilver\modcp_split.tpl' :
第49行 <td valign="middle"><img src="templates/subSilver/images/icon_minipost.gif" alt="{L_POST}"><span class="postdetails">{L_POSTED}:
第62行 <td colspan="3" height="1" class="row3"><img src="templates/subSilver/images/spacer.gif" width="1" height="1" alt="."></td>
--------------------------------------------------------------------------------
在 ...\subSilver\overall_header.tpl' :
第9行 <!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->
第13行 The original subSilver Theme for phpBB version 2+
第58行 background-image: url(templates/subSilver/images/{T_TH_CLASS3});
第66行 background-image: url(templates/subSilver/images/{T_TH_CLASS2});
第70行 background-image: url(templates/subSilver/images/{T_TH_CLASS1});
第209行 @import url("templates/subSilver/formIE.css");
第231行 <td><a href="{U_INDEX}"><img src="templates/subSilver/images/logo_phpBB.gif" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
第235行 <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_FAQ}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_faq.gif" width="12" height="13" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a>&nbsp; &nbsp;<a href="{U_SEARCH}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_search.gif" width="12" height="13" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a>&nbsp; &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_members.gif" width="12" height="13" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a>&nbsp; &nbsp;<a href="{U_GROUP_CP}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_groups.gif" width="12" height="13" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a>&nbsp;
第237行 &nbsp;<a href="{U_REGISTER}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_register.gif" width="12" height="13" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a>&nbsp;
第242行 <td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_PROFILE}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_profile.gif" width="12" height="13" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a>&nbsp; &nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_message.gif" width="12" height="13" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a>&nbsp; &nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_login.gif" width="12" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a>&nbsp;</span></td>
--------------------------------------------------------------------------------
在 ...\subSilver\posting_preview.tpl' :
第7行 <td class="row1"><img src="templates/subSilver/images/icon_minipost.gif" alt="{L_POST}" /><span class="postdetails">{L_POSTED}: {POST_DATE} &nbsp;&nbsp;&nbsp; {L_POST_SUBJECT}: {POST_SUBJECT}</span></td>
第19行 <td class="spaceRow" height="1"><img src="templates/subSilver/images/spacer.gif" width="1" height="1" /></td>
--------------------------------------------------------------------------------
在 ...\subSilver\posting_topic_review.tpl' :
第31行 <td colspan="2" height="1" class="spaceRow"><img src="templates/subSilver/images/spacer.gif" alt="" width="1" height="1" /></td>
--------------------------------------------------------------------------------
在 ...\subSilver\privmsgs_body.tpl' :
第41行 <td bgcolor="{T_TD_COLOR2}"><img src="templates/subSilver/images/spacer.gif" width="{INBOX_LIMIT_IMG_WIDTH}" height="8" alt="{INBOX_LIMIT_PERCENT}" /></td>
--------------------------------------------------------------------------------
在 ...\subSilver\search_results_posts.tpl' :
...\subSilver\search_results_posts.tpl(21行 <td class="catHead" colspan="2" height="28"><span class="topictitle"><img src="templates/subSilver/images/folder.gif" align="absmiddle" />&nbsp; {L_TOPIC}:&nbsp;<a href="{searchresults.U_TOPIC}" class="topictitle">{searchresults.TOPIC_TITLE}</a></span></td>
--------------------------------------------------------------------------------
在 ...\subSilver\simple_header.tpl' :
第15行 <!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->
第20行 The original subSilver Theme for phpBB version 2+
第69行 background-image: url(templates/subSilver/images/{T_TH_CLASS3});
第77行 background-image: url(templates/subSilver/images/{T_TH_CLASS2});
第81行 background-image: url(templates/subSilver/images/{T_TH_CLASS1});
第231行 @import url("templates/subSilver/formIE.css");
--------------------------------------------------------------------------------
在 ...\subSilver\subSilver.cfg' :
第3行 // ** Configuration file for subSilver template **
第9行 // ** subSilver dev. forum: http://www.subSky.com/phpBB2/ **
第11行 // $Id: subSilver.cfg,v 1.11.2.1 2005/10/08 19:41:31 grahamje Exp $
--------------------------------------------------------------------------------
在 ...\subSilver\subSilver.css' :
第2行 The original subSilver Theme for phpBB version 2+
--------------------------------------------------------------------------------
在 ...\subSilver\theme_info.cfg' :
第4行 // phpBB 2.x auto-generated theme config file for subSilver
第8行 $subSilver[0]['template_name'] = "subSilver";
第9行 $subSilver[0]['style_name'] = "subSilver";
第10行 $subSilver[0]['head_stylesheet'] = "subSilver.css";
第11行 $subSilver[0]['body_background'] = "";
第12行 $subSilver[0]['body_bgcolor'] = "E5E5E5";
第13行 $subSilver[0]['body_text'] = "000000";
第14行 $subSilver[0]['body_link'] = "006699";
第15行 $subSilver[0]['body_vlink'] = "5493B4";
第16行 $subSilver[0]['body_alink'] = "";
第17行 $subSilver[0]['body_hlink'] = "DD6900";
第18行 $subSilver[0]['tr_color1'] = "EFEFEF";
第19行 $subSilver[0]['tr_color2'] = "DEE3E7";
第20行 $subSilver[0]['tr_color3'] = "D1D7DC";
第21行 $subSilver[0]['tr_class1'] = "";
第22行 $subSilver[0]['tr_class2'] = "";
第23行 $subSilver[0]['tr_class3'] = "";
第24行 $subSilver[0]['th_color1'] = "98AAB1";
第25行 $subSilver[0]['th_color2'] = "006699";
第26行 $subSilver[0]['th_color3'] = "FFFFFF";
第27行 $subSilver[0]['th_class1'] = "cellpic1.gif";
第28行 $subSilver[0]['th_class2'] = "cellpic3.gif";
第29行 $subSilver[0]['th_class3'] = "cellpic2.jpg";
第30行 $subSilver[0]['td_color1'] = "FAFAFA";
第31行 $subSilver[0]['td_color2'] = "FFFFFF";
第32行 $subSilver[0]['td_color3'] = "";
第33行 $subSilver[0]['td_class1'] = "row1";
第34行 $subSilver[0]['td_class2'] = "row2";
第35行 $subSilver[0]['td_class3'] = "";
第36行 $subSilver[0]['fontface1'] = "Verdana, Arial, Helvetica, sans-serif";
第37行 $subSilver[0]['fontface2'] = "Trebuchet MS";
第38行 $subSilver[0]['fontface3'] = "Courier, \'Courier New\', sans-serif";
第39行 $subSilver[0]['fontsize1'] = "10";
第40行 $subSilver[0]['fontsize2'] = "11";
第41行 $subSilver[0]['fontsize3'] = "12";
第42行 $subSilver[0]['fontcolor1'] = "444444";
第43行 $subSilver[0]['fontcolor2'] = "006600";
第44行 $subSilver[0]['fontcolor3'] = "FFA34F";
第45行 $subSilver[0]['span_class1'] = "";
第46行 $subSilver[0]['span_class2'] = "";
第47行 $subSilver[0]['span_class3'] = "";
第48行 $subSilver[0]['img_size_poll'] = "0";
第49行 $subSilver[0]['img_size_privmsg'] = "0";
--------------------------------------------------------------------------------
在 ...\subSilver\viewonline_body.tpl' :
第25行 <td colspan="3" height="1" class="row3"><img src="templates/subSilver/images/spacer.gif" width="1" height="1" alt="."></td>
--------------------------------------------------------------------------------
在 ...\subSilver\viewtopic_body.tpl' :
第59行 <td class="spaceRow" colspan="2" height="1"><img src="templates/subSilver/images/spacer.gif" alt="" width="1" height="1" /></td>
--------------------------------------------------------------------------------
在 ...\subSilver\viewtopic_poll_result.tpl' :
第17行 <td><img src="templates/subSilver/images/vote_lcap.gif" width="4" alt="" height="12" /></td>
第19行 <td><img src="templates/subSilver/images/vote_rcap.gif" width="4" alt="" height="12" /></td>
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
在 ...\admin\forum_admin_body.tpl' :
第33行 <td colspan="7" height="1" class="spaceRow"><img src="../templates/subSilver/images/spacer.gif" alt="" width="1" height="1" /></td>
--------------------------------------------------------------------------------
在 ...\admin\index_body.tpl' :
第73行 <td colspan="5" height="1" class="row3"><img src="../templates/subSilver/images/spacer.gif" width="1" height="1" alt="."></td>
--------------------------------------------------------------------------------
在 ...\admin\index_navigate.tpl' :
第4行 <td align="center" ><a href="{U_FORUM_INDEX}" target="_parent"><img src="../templates/subSilver/images/logo_phpBB_med.gif" border="0" /></a></td>
--------------------------------------------------------------------------------
在 ...\admin\page_header.tpl' :
第6行 <!-- link rel="stylesheet" href="../templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->
第11行 The original subSilver Theme for phpBB version 2+
第62行 background-image: url(../templates/subSilver/images/{T_TH_CLASS3});
第70行 background-image: url(../templates/subSilver/images/{T_TH_CLASS2});
第74行 background-image: url(../templates/subSilver/images/{T_TH_CLASS1});
第219行 @import url("../templates/subSilver/formIE.css");
--------------------------------------------------------------------------------

上面所找出的檔案,把檔案中有關 subSilver 字全部取代為ABC(假設名字),特別注意 subSilver.cfg 與 subSilver.css 這二支檔案的檔名也要改成ABC.cfg與ABC.css 喔。

到這邊必須先考慮一件事情,你的風格要採行內建的css或者是引入式的css,這關乎你安裝風格日後css的異動模式,內建css的模式將是以後台風格管理來修改css,再藉由輸出寫入資料庫才會發生作用,而你一開始所創的ABC.cfg就是第一次安裝風格時候會自動輸入到資料庫的css參數。採用這模式的話,不用去理會ABC.css這隻檔案。而css檔案引入模式則是任何css修改都要去修改ABC.css,關於這部分我再另外寫一篇更詳細說明文件。

如果你一開始找的範本風格是採css引入式,則你也要跟著他採行這方式,要不你就要自己想辦法改回內建式囉。

接著你就可以先安裝試看看,到後台風格管理中的建立即可看到新設立的風格名稱囉!
安裝好之後,你就能開始著手修改美工圖,背景啦,圖示啦等等。
當然版型修改就要去找出哪隻控制的tpl檔案囉。
最後由 Artemas 於 2006-10-01 16:48 編輯,總共編輯了 2 次。
圖檔
Os: Windows 2003
Constitute: IIS.6 + php4 + MySql 4 + ODBC + phpMyAdmin2.6.0 + phpBB 2.0.23
url: http://oops.cafepark.com

Artemas
竹貓忠實會員
竹貓忠實會員
文章: 514
註冊時間: 2003-08-23 03:18
來自: NorthBlue
聯繫:

[教學] PHPBB的CSS

文章 Artemas » 2006-10-01 03:28

再來討論phpbb的css的用法,我們以官方subSilver為例,在overall_header.tpl 與 simple_header.tpl 及 admin/page_header.tpl 檔案中會發現,有內建式<style type="text/css">.....</style> 與引入式<!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->
而引入式的方式卻以<!-- 這符號來中斷引入*.CSS檔案,成為標註模式,這是要告訴你PHPBB可以支援這二種模式,而預設是採行內建方式,因此subSilver.css這隻檔案在這裡是沒有意義的,僅供你日後採用引入式時候的參考用途。
但並非採用了內建式css就不能使用引入式,你也可以再設計與原內定的css以外效果來加入你的風格中。

預設在 overall_header.tpl 與 simple_header.tpl 及 admin/page_header.tpl 中所寫的css模式,你會發現一個奇怪的現象,參數位置都變成了 {T_TR_COLOR1}、{T_TH_CLASS3} 等等的怪字串?
這些字串所在的位置多半是控制字體大小或字型與顏色,PHPBB是把這些字串再另外由後台風格管理選項中再去設定參數,這樣子的模式,是讓不會相關程式的使用者方便修改喜歡的字體與顏色樣式。
他的運作原理是利用theme_info.cfg當中預設的參數,當第一次安裝時候,資料庫就以這隻檔案的CSS參數寫入資料庫中,當伺服器讀取到這些{T_TR_COLOR1}時候字串,會去對應資料庫中的參數,來顯示網頁的CSS變化,
也因此每次修改後台的CSS參數,系統會告訴你要進行輸出的動作,然後下載系統幫你寫好的theme_info.cfg進行覆蓋舊檔案。輸出時候就已經寫入資料庫了,而下載其實只是讓你備分這次修改的數據。

如果你以這類內建式CSS的模式風格檔案來進行風格修改設計,當你安裝好風格之後不用管theme_info.cfg原本的內容,只要從後台去修改參數,進行輸出然後下載就能取得更新的theme_info.cfg檔案了。
除非是參數以外的CSS效果,你就得自己設計囉,不過都要再他已知的名稱定義下進行修編,既有名稱是指例如 th.thSides,td.catSides,td.spaceRow 這些名稱,因為這些名稱都已經在所有的TPL檔案中定位好了,
你要自創名稱當然對於初級者而言,簡直是給自己找麻煩,而一方面也非常不建議去修改任何TPL檔案中的CSS名稱與定位,因為這對於日後安裝MOD時候,會無法按照安裝文件中的位置尋找,切記三思。
以下修改CSS的飯粒解說:

代碼: 選擇全部

th.thSides,td.catSides,td.spaceRow    { border-width: 0px 1px 0px 1px; } 
你可以修改框架的厚度參數,或移動名稱位置,如td.catSides,移到別處等等,但絕對不能改變他的名稱。
------------------------------------------------------------------------
td.row1   { background-color: {T_TR_COLOR1}; }
這種有牽扯後台參數修改的則名稱絕對不能移動,只能再加入其他功能。例如:
td.row1   { background-color: {T_TR_COLOR1}; line-height: 120%; text-decoration: none;}
特別注意,每次修改都要包含overall_header.tpl 與 simple_header.tpl 與admin/page_header.tpl 這三個檔案一起改。

==================================================================================


如果要採行引入外部css檔案方式,則必須把內建式的CSS加註標註符號,而把引入CSS的標註符號取消:

代碼: 選擇全部

<!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" --> 
改成
<link rel="stylesheet" href="templates/subSilver/***你的***.css" type="text/css"> 
然後把
<style type="text/css"> 一直到 </style> 
整段改成
<!--style type="text/css"> 一直到 </style--> 
或者整段刪除也可以。
之後可開始動手修改subSilver.css(或者你自己的*.css)
但依舊不能改變css檔案原有定義好的名稱喔!因為所有的TPL檔案中的CSS名稱依舊是存在的,也就是說你只是利用原有名稱與位置去修改CSS而已
使用引入css檔案的好處是,當要異動css時候不用每次去修改overall_header.tpl 與 simple_header.tpl 與admin/page_header.tpl 這三支檔案,只要修改唯一的*.CSS檔案即可,也不用去管後台的風格管理輸出。

但是特別注意:引入css的方式依舊有幾項欄位是無法完全被css檔案所取代的,theme_info.cfg當中以下這幾個項目,是無法由css取代的,必須由這支檔案寫入,並且還是要按照傳統後台方式修改與輸出才能有作用。

代碼: 選擇全部

<?php

//
// phpBB 2.x auto-generated theme config file for xxxxxx
// Do not change anything in this file!
//

$company_type[0]['template_name'] = "xxxxxx"; //你的風格名稱
$company_type[0]['style_name'] = "xxxxxx"; //你的風格名稱
$company_type[0]['head_stylesheet'] = "xxxxxx.css"; //你的風格名稱CSS檔
$company_type[0]['body_background'] = "";
$company_type[0]['body_bgcolor'] = "";
$company_type[0]['body_text'] = "";
$company_type[0]['body_link'] = "";
$company_type[0]['body_vlink'] = "";
$company_type[0]['body_alink'] = "";
$company_type[0]['body_hlink'] = "";
$company_type[0]['tr_color1'] = "";
$company_type[0]['tr_color2'] = "";
$company_type[0]['tr_color3'] = "";
$company_type[0]['tr_class1'] = "";
$company_type[0]['tr_class2'] = "";
$company_type[0]['tr_class3'] = "";
$company_type[0]['th_color1'] = "";
$company_type[0]['th_color2'] = "";
$company_type[0]['th_color3'] = "";
$company_type[0]['th_class1'] = "cellpic1.gif"; //不可變更的項目
$company_type[0]['th_class2'] = "cellpic3.gif"; //不可變更的項目
$company_type[0]['th_class3'] = "";
$company_type[0]['td_color1'] = "";
$company_type[0]['td_color2'] = "";
$company_type[0]['td_color3'] = "";
$company_type[0]['td_class1'] = "row1"; //不可變更的項目
$company_type[0]['td_class2'] = "row2"; //不可變更的項目
$company_type[0]['td_class3'] = "";
$company_type[0]['fontface1'] = "Verdana, Arial, Helvetica, sans-serif"; //預設系統字型1,可以忽略由CSS檔案控制,但這裡不能沒有數值。
$company_type[0]['fontface2'] = "Trebuchet MS"; //預設系統字型2,可以忽略由CSS檔案控制,但這裡不能沒有數值。
$company_type[0]['fontface3'] = "Courier, \'Courier New\', sans-serif"; //預設系統字型3,可以忽略由CSS檔案控制,但這裡不能沒有數值。
$company_type[0]['fontsize1'] = "";
$company_type[0]['fontsize2'] = "";
$company_type[0]['fontsize3'] = "";
$company_type[0]['fontcolor1'] = "";
$company_type[0]['fontcolor2'] = "******"; // 自訂版面管理員字體顏色
$company_type[0]['fontcolor3'] = "******"; // 自訂系統管理員字體顏色
$company_type[0]['span_class1'] = "";
$company_type[0]['span_class2'] = "";
$company_type[0]['span_class3'] = "";
$company_type[0]['img_size_poll'] = "";
$company_type[0]['img_size_privmsg'] = "";

?>
上面控著的欄位就讓他空著沒關係,重要是版面與系統管理員的字體顏色,必須靠這裡才能統一改變。
當你尚未安裝你設計好的風格時候,這隻theme_info.cfg是必須先有修改的資料,才能進行安裝程序喔。
如果說你是想先安裝好一個樣板風格再去修改成引入式CSS,那麼也不必擔心,事後修改CSS檔與theme_info.cfg再由後台輸出一次即可。

==================================================================================

其他說明:
在原有的subSilver內建CSS當中你會最後一行有一段

代碼: 選擇全部

/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("templates/subSilver/formIE.css"); 
這是告訴你說,以下的CSS檔案是採引入式 formIE.css,這些效果僅支援IE瀏覽器,不支援NETSCAPE與MOZILLA或FIREFOX!
formIE.css這隻檔案內就是使用IE瀏覽器看PHPBB時候,按鈕、捲軸等等之類的會有顏色與式樣上的變化。
這些語法都不是標準版的CSS,是微軟自己發明的怪語法。

目前想到的這些偶先寫,日後想到有關CSS再補充吧,XD
最後由 Artemas 於 2006-10-05 22:18 編輯,總共編輯了 1 次。
圖檔
Os: Windows 2003
Constitute: IIS.6 + php4 + MySql 4 + ODBC + phpMyAdmin2.6.0 + phpBB 2.0.23
url: http://oops.cafepark.com

Artemas
竹貓忠實會員
竹貓忠實會員
文章: 514
註冊時間: 2003-08-23 03:18
來自: NorthBlue
聯繫:

文章 Artemas » 2006-10-01 03:30

附註小技巧......就分成這四篇吧

先看看,滿不滿意偶日後改進 ;-)
圖檔
Os: Windows 2003
Constitute: IIS.6 + php4 + MySql 4 + ODBC + phpMyAdmin2.6.0 + phpBB 2.0.23
url: http://oops.cafepark.com

Artemas
竹貓忠實會員
竹貓忠實會員
文章: 514
註冊時間: 2003-08-23 03:18
來自: NorthBlue
聯繫:

文章 Artemas » 2006-10-01 16:51

對了還要補一篇css
先佔版位 :roll:
圖檔
Os: Windows 2003
Constitute: IIS.6 + php4 + MySql 4 + ODBC + phpMyAdmin2.6.0 + phpBB 2.0.23
url: http://oops.cafepark.com

頭像
心靈捕手
默默耕耘的老師
默默耕耘的老師
文章: 8632
註冊時間: 2004-04-30 01:54
來自: Taiwan

文章 心靈捕手 » 2006-10-01 23:03

感謝您的熱情分享! (:Y)

ps.
將此文置頂, 方便網友查詢.
施比受有福,歡迎來信賜教,謝謝 & 再見!
祝福您 好運 ^_^
歡迎加入★★心靈捕手★★ :: 討論區!!
http://wang5555.hopto.org/phpBB3/
p.s. 奉老婆之命:在晚上十一點前,得關機睡覺!!!

johnson784069
星球普通子民
星球普通子民
文章: 12
註冊時間: 2007-01-17 20:41

文章 johnson784069 » 2007-01-18 10:58

你的解說非常詳細!
對於一個初學者來說,真的寫的很好!
謝謝!

bbdwu612
星球普通子民
星球普通子民
文章: 1
註冊時間: 2007-01-24 10:17

文章 bbdwu612 » 2007-01-24 10:34

謝謝你的分享,讓我們更了解如何去更改....

veryen
星球普通子民
星球普通子民
文章: 1
註冊時間: 2007-03-28 12:21

文章 veryen » 2007-03-28 14:22

太谢谢你啦,我代表全中国关注phpbb的朋友谢谢你啦!

Artemas
竹貓忠實會員
竹貓忠實會員
文章: 514
註冊時間: 2003-08-23 03:18
來自: NorthBlue
聯繫:

文章 Artemas » 2007-03-28 21:01

veryen 寫:太谢谢你啦,我代表全中国关注phpbb的朋友谢谢你啦!
感謝你的檯愛不過。降子太嚴肅了...承受不起 :lol:

本來還要補二篇小小的技巧,一方面又怕離題太多,一方面也工作忙,
沒腦筋去整理 :roll:

不過到底寫的有沒有問題或意見,似乎沒看到反應。
真不知是否寫的令人看不懂,不知該如何所云吧 :-|


題外話..還真是感謝"心靈捕手"大大
看他真的很熱心竹喵版務,超有熱誠!讚 :mrgreen:
圖檔
Os: Windows 2003
Constitute: IIS.6 + php4 + MySql 4 + ODBC + phpMyAdmin2.6.0 + phpBB 2.0.23
url: http://oops.cafepark.com

頭像
cloudsnow30
星球公民
星球公民
文章: 213
註冊時間: 2005-03-27 03:38
來自: 雲上天國       狀態: 冬眠喵型:想回頭擁抱PHPBB
聯繫:

文章 cloudsnow30 » 2007-04-01 11:02

不好意思~
不知這篇是否可以借轉PO在我的小站裡?


出處及作者當然不會忘記附上的...
一個容易三心二意的女人...著迷於網站的製作,但又不專精...
從html.到asp,再跳cgi...一個因緣際會,邂逅了php....
才知自己的能力是多麼的膚淺~~~~Orz

近況:站長的心變成浮動ip.不定時罷工中.= =
目標:努力成為一個人人喜歡的好站,....^^"
-----------------------------------------
● (目前是租用虛擬主機架站)

● 冬眠中--似非。言葉

運作中...orz

++++自家主機使用++++
●架設主機作業系統:Windows 7
●快速架站程式:Appserv2.5.9
●您的上網方式:ADSL 100M/50M
●您安裝的程式:Apache 2.2.4 + PHP 5.2.3 +MySQL 5.0.45 + phpMyAdmin-2.10.2
●錯誤代碼及狀態:如說明

頭像
kkt
竹貓忠實會員
竹貓忠實會員
文章: 630
註冊時間: 2005-06-15 01:37
來自: H.K.
聯繫:

文章 kkt » 2007-04-01 11:25

Artemas 寫: 不過到底寫的有沒有問題或意見,似乎沒看到反應。
真不知是否寫的令人看不懂,不知該如何所云吧 :-|
先不管有沒有問題, 能夠抽出寶貴時間造福别人, 實屬難得.
文章欠整理而已, 我自己同樣沒時間. 理解的.


期盼你更多教學文章, 支持!!
舊站台經已結朿了, 學生們可到遊戲站玩玩 Flash Game (不必註冊) 免費 Flash Game
在此學到很多架站知識, 永遠多謝:
心靈捕手老師, ~倉木麻衣~, 依夢兒 及 神川小羽各位大大相助

Artemas
竹貓忠實會員
竹貓忠實會員
文章: 514
註冊時間: 2003-08-23 03:18
來自: NorthBlue
聯繫:

文章 Artemas » 2007-04-02 11:47

cloudsnow30 寫:不好意思~
不知這篇是否可以借轉PO在我的小站裡?
出處及作者當然不會忘記附上的...
要花輝web2.0的大愛精神!當然是任你貼,不過出處要寫竹喵這裡喔!
蛋素偶想還是請示一下竹喵比較好啦,畢竟佔人碼頭怎不能不拜一下勒XD
圖檔
Os: Windows 2003
Constitute: IIS.6 + php4 + MySql 4 + ODBC + phpMyAdmin2.6.0 + phpBB 2.0.23
url: http://oops.cafepark.com

athlon
星球公民
星球公民
文章: 82
註冊時間: 2002-09-23 04:00

文章 athlon » 2007-06-20 02:54

這篇真是對使用PHPBB2的人受用無窮阿~
之前光改CSS大多用摸的...也得摸個好幾個工作天...

----
話說...
現在改用PHPBB3
檔案位置設計迥然不同
不知道該如何下手,
已經摸了兩個禮拜了還是摸不出個所以然
如果PHPBB3也能有類似文章就好了~

Artemas
竹貓忠實會員
竹貓忠實會員
文章: 514
註冊時間: 2003-08-23 03:18
來自: NorthBlue
聯繫:

文章 Artemas » 2008-03-29 00:10

為了三餐,又為了討老婆,只好脫離很久時間沒回來這了 :((
說實在小弟其實不是專門研究語法的,美術設計才是偶的本業。最近看到PHPBB 3出來了,大致上看了一下版型,果然不出料百分之80以上是以CSS為架構,目前國外大型社群網站都很流行這種作法,這對於網頁維護可節省很大時間,方便修訂更新改版,功能實用訴求為主,也可減輕伺服器的編譯傳送,優點當然不只是這樣,但缺點是:刻版造型,剛毅木訥的感覺(呆字不好意思說 :roll: ),因為區塊太明顯了,讓美術創作侷限太多,其次是伺服器的編譯工作轉而由使用者瀏覽器來解讀,蠻吃系統資源的。不曉得有沒有人發現,有時候資料已經傳完畫面會慢些才出現(不過這不是重點啦)。
我的想法是,如果在未來還沒有更好的風格設計或新的解決技術出來,漸漸的可能有人寧可繼續使用2.0版,像我就偏好風格的人,很難吸引我轉3.0版。
不過我倒也想嘗試是否能將3.0版,創造出驚世駭俗的玩意 :mrgreen: ,期待能不能中樂透,閒閒在家專門搞這 (:H)
其實我在規劃告別 PHPBB2.0 風格紀念版,只是這幾個月被公司盯的很緊....(酸
以上只是閒扯。
PS.為何就沒有企業贊助我們這些研究者 :-(
圖檔
Os: Windows 2003
Constitute: IIS.6 + php4 + MySql 4 + ODBC + phpMyAdmin2.6.0 + phpBB 2.0.23
url: http://oops.cafepark.com

主題已鎖定

回到「風格問題討論」