[教學]如何加入"竹貓"的橘色外框?!

與 phpBB 2.0.x 相關主題。

版主: 版主管理群

回覆文章
maostudio
竹貓好朋友
竹貓好朋友
文章: 381
註冊時間: 2002-07-02 01:59
來自: BayArea
聯繫:

[教學]如何加入"竹貓"的橘色外框?!

文章 maostudio » 2002-09-10 07:36

想必很多人第一次來到竹貓,就被它清爽的layout給吸引了!! :-o :-o
也因為大家的口耳相傳,把phpbb在中文論壇中打出了名號!! ;-) ;-)
相信大家,除了把phpbb架上,和掛上一些外掛外,也想和竹貓一樣穿個漂亮的外衣!! :!: :!:

經竹貓管理團隊討論後,小竹子大大願意將此教學釋出!! :idea: :idea:
也希望藉此能拋磚引玉,激發出更多好的自創風格!! :lol: :lol:

本教學版權歸竹貓星球所有,如欲轉載請先告知!!

Demo: 竹貓星球

概念教學:
1. 用繪圖程式畫出一個圓邊框。(如圖1)
圖檔 <<< 圖1

2. 再用繪圖程式把框裁出。(如圖2)
圖檔 <<< 圖2

3. 最後去改風格中的overall_header.tpl和overall_footer.tpl,把框架出。

代碼: 選擇全部

############################################################## 
## Mod Title: [Style] Forum Frame 
## Mod Version: 1.0.0 for phpbb 2.0.x
## Author: Joe Cho < mao@dnb2tw.info > http://www.maostudio.com/
## Copyright belong to 竹貓星球 < http://phpbb-tw.net/ >
## 
## Description: This mod will add a frame around your forum.
## 
## Demo: http://phpbb-tw.net/
##	 http://bbs.dnb2tw.info/index.php?style_id=1
## 
## Installation Level: easy 
## Installation Time: 3-5 Minutes 
## Files To Edit: templates/your_theme/your_theme.css,
##		  templates/your_theme/overall_header.tpl,
##		  templates/your_theme/overall_footer.tpl
##		 
## Included Files: BLCorner.gif, BRCorner.gif, TLCorner.gif, 
## TRCorner.gif,Side_L.gif, Side_R.gif, Side_T.gif, Side_B.gif,
############################################################## 
## 
## Author Note: I am using subSilver for example here. 
## Feel free to use it, but be sure to backup before you install 
## it. Enjoy It!! 
## 
##############################################################
# 
#-----[ 打開 ]------------------------------------------ 
# 

/phpBB2/templates/subSilver/subSilver.css


# 
#-----[ 尋找 ]------------------------------------------ 
# 

.bodyline	{ background-color: #FFFFFF; border: 1px #98AAB1 solid; }

# 
#-----[ 替換 ]------------------------------------------ 
# [color=#ff0000]把subSilver的黑框移除[/color]

.bodyline	{ background-color: #FFFFFF; }

# 
#-----[ 尋找 ]------------------------------------------ 
# 

/* Main table cell colours and backgrounds */
td.row1	{ background-color: #EFEFEF; }
td.row2	{ background-color: #DEE3E7; }
td.row3	{ background-color: #D1D7DC; }
	
# 
#-----[ 之後,加入 ]------------------------------------------ 
# [color=#ff0000]在*.css導入圖示中area 2、4、6、8[/color]

/* Forum Frame Mod */
td.top { background-color: #E5E5E5; background-image: url(templates/subSilver/images/frame/Side_T.gif); }
td.bottom { background-color: #E5E5E5; background-image: url(templates/subSilver/images/frame/Side_B.gif); }
td.left { background-color: #E5E5E5; background-image: url(templates/subSilver/images/frame/Side_L.gif); repeat-y; }
td.right { background-color: #E5E5E5; background-image: url(templates/subSilver/images/frame/Side_R.gif); repeat-y; }

# 
#-----[ 打開 ]------------------------------------------ 
# 

/phpBB2/templates/subSilver/overall_header.tpl

# 
#-----[ 尋找 ]------------------------------------------ 
# 

.bodyline	{ background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }

# 
#-----[ 替換 ]------------------------------------------ 
# [color=#ff0000]把subSilver的黑框移除[/color]

.bodyline	{ background-color: {T_TD_COLOR2}; }

# 
#-----[ 尋找 ]------------------------------------------ 
# 

/* Main table cell colours and backgrounds */
td.row1	{ background-color: {T_TR_COLOR1}; }
td.row2	{ background-color: {T_TR_COLOR2}; }
td.row3	{ background-color: {T_TR_COLOR3}; }
	
# 
#-----[ 之後,加入 ]------------------------------------------ 
# [color=#ff0000]在*.css導入圖示中area 2、4、6、8[/color]

/* Forum Frame Mod */
td.top { background-color: #E5E5E5; background-image: url(templates/subSilver/images/frame/Side_T.gif); }
td.bottom { background-color: #E5E5E5; background-image: url(templates/subSilver/images/frame/Side_B.gif); }
td.left { background-color: #E5E5E5; background-image: url(templates/subSilver/images/frame/Side_L.gif); repeat-y; }
td.right { background-color: #E5E5E5; background-image: url(templates/subSilver/images/frame/Side_R.gif); repeat-y; }

# 
#-----[ 尋找 ]------------------------------------------ 
# 
	
<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}" />

<a name="top"></a>

<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
	<tr>
	
# 
#-----[ 替換 ]------------------------------------------ 
# [color=#ff0000]加入圖示中area 1、2、3、4[/color]

<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}" />

<a name="top"></a>

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
	<tr>
		<td width="15" height="15" nowrap="nowrap"><img src="templates/subSilver/images/frame/TLCorner.gif" width="15" height="15" border="0" /></td>
		<td width="100%" height="15" nowrap="nowrap" class="top"></td>
		<td width="15" height="15" nowrap="nowrap"><img src="templates/subSilver/images/frame/TRCorner.gif" width="15" height="15" border="0" /></td>
	</tr>
	<tr> 
		<td class="left"> </td>
		
# 
#-----[ 打開 ]------------------------------------------ 
# 

/phpBB2/templates/subSilver/overall_footer.tpl

	
# 
#-----[ 尋找 ]------------------------------------------ 
# 

Powered by <a href="http://www.phpbb.com/" target="_phpbb" class="copyright">phpBB</a> {PHPBB_VERSION} © 2001, 2002 phpBB Group<br />{TRANSLATION_INFO}</span></div>
		</td>		
	</tr>
</table>

# 
#-----[ 替換 ]------------------------------------------ 
# [color=#ff0000]加入圖示中area 6、7、8、9[/color]

Powered by <a href="http://www.phpbb.com/" target="_phpbb" class="copyright">phpBB</a> {PHPBB_VERSION} © 2001, 2002 phpBB Group | Frame Designed By <a href="http://www.maostudio.com/" target="_blank" class="copyright">MaoStudio</a><br />{TRANSLATION_INFO}</span></div>
		</td>
		<td class="right"> </td>		
	</tr>
	<tr>
		<td width="15" height="15" nowrap="nowrap"><img src="templates/subSilver/images/frame/BLCorner.gif" width="15" height="15" border="0" /></td>
		<td width="100%" height="15" nowrap="nowrap" class="bottom"></td>
		<td width="15" height="15" nowrap="nowrap"><img src="templates/subSilver/images/frame/BRCorner.gif" width="15" height="15" border="0" /></td>
	</tr>
</table>
	
# 
#-----[ 儲存 ]---------------------------------------
# 

# 
#-----[ 上傳 ]------------------------------------------ 
# 

圖檔:
BLCorner.gif, BRCorner.gif, TLCorner.gif, TRCorner.gif,
Side_L.gif, Side_R.gif, Side_T.gif, Side_B.gif,

到:
templates/subSilver/images/frame/

# EoM
下載:

完整下載 <<< 新安裝可直接覆蓋
圖檔下載 - subSilver框架

第一次寫教學,請多指教!! :oops: :oops: :oops:

參與討論 - http://phpbb-tw.net/phpbb/viewtopic.php?t=16117
最後由 maostudio 於 2002-10-11 00:39 編輯,總共編輯了 2 次。
圖檔
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-

ITPE!!

回覆文章

回到「2.0」