也因為大家的口耳相傳,把phpbb在中文論壇中打出了名號!!
相信大家,除了把phpbb架上,和掛上一些外掛外,也想和竹貓一樣穿個漂亮的外衣!!
經竹貓管理團隊討論後,小竹子大大願意將此教學釋出!!
也希望藉此能拋磚引玉,激發出更多好的自創風格!!
本教學版權歸竹貓星球所有,如欲轉載請先告知!!
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框架
第一次寫教學,請多指教!!
參與討論 - http://phpbb-tw.net/phpbb/viewtopic.php?t=16117