如何製作phpbb風格-作者:Artemas

風格問題討論版面排列、樣式、配置,自製風格分享~
享受多樣化的 phpBB 。
回覆文章
頭像
櫻井綾乃
.※.稜鏡之森の守護使者.※.
.※.稜鏡之森の守護使者.※.
文章: 1331
註冊時間: 週二 2006-03-07 09:08
個人狀態: 論壇爆走中...
性別: 醜醜的大美女
來自: 雲上天國
表達感謝: 68 次
擁有感謝: 837 次
星座:
聯繫:

如何製作phpbb風格-作者:Artemas

文章 櫻井綾乃 »

此文經作者同意轉貼,
原文出處-竹貓星球: http://phpbb-tw.net/phpbb/viewtopic.php?t=46481

---------------------------------------------------------------------------------------------
製作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 --- 檢視文章上方(瀏覽者)已投票百分比結果
-----------------------------------------------------------------------------------------------

如有誤之處請多指教
如果.....
也許.....
這些都是事後的想法
如果會想著當初怎麼做也許會有什麼結果
不如在當初就做出正確的決定.....
有些事不去嚐試是不會真的體會他的奧妙的~
頭像
櫻井綾乃
.※.稜鏡之森の守護使者.※.
.※.稜鏡之森の守護使者.※.
文章: 1331
註冊時間: 週二 2006-03-07 09:08
個人狀態: 論壇爆走中...
性別: 醜醜的大美女
來自: 雲上天國
表達感謝: 68 次
擁有感謝: 837 次
星座:
聯繫:

[教學] 風格製作基礎篇

文章 櫻井綾乃 »

風格製作基礎篇

首先製作風格必須有範本當基礎元件,你可以找出你喜歡的風格版本來當基礎版本。只要拷貝選定的原風格目錄夾,另取一個名稱來當風格新名子。
特別要注意:如果說你自己原先使用的風格已經有安裝一些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"> <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>   <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>   <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>   <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> 
第237行  <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> 
第242行 <td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu"> <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>   <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>   <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> </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}     {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" />  {L_TOPIC}: <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: 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檔案囉。
如果.....
也許.....
這些都是事後的想法
如果會想著當初怎麼做也許會有什麼結果
不如在當初就做出正確的決定.....
有些事不去嚐試是不會真的體會他的奧妙的~
頭像
櫻井綾乃
.※.稜鏡之森の守護使者.※.
.※.稜鏡之森の守護使者.※.
文章: 1331
註冊時間: 週二 2006-03-07 09:08
個人狀態: 論壇爆走中...
性別: 醜醜的大美女
來自: 雲上天國
表達感謝: 68 次
擁有感謝: 837 次
星座:
聯繫:

[教學] PHPBB的CSS

文章 櫻井綾乃 »

再來討論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
如果.....
也許.....
這些都是事後的想法
如果會想著當初怎麼做也許會有什麼結果
不如在當初就做出正確的決定.....
有些事不去嚐試是不會真的體會他的奧妙的~
回覆文章

回到「投機取巧の風格改造篇」