[風格] 個人公開資料頁面 P.C.P 排版風格

Styles Released by Other phpbb Sites
推薦您喜歡的非官方認證風格吧!享受多樣化的 phpBB 。

版主: 版主管理群譯文組

主題已鎖定
天霜
竹貓忠實會員
竹貓忠實會員
文章: 882
註冊時間: 2003-04-15 19:40
來自: 星之鄉學園
聯繫:

[風格] 個人公開資料頁面 P.C.P 排版風格

文章 天霜 »

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

代碼: 選擇全部

templates/subSilver/profile_view_body.tpl
#
#-----[ FIND 尋找 ]------------------------------------------------
#

代碼: 選擇全部

  <tr> 
	<td class="catLeft" width="40%" height="28" align="center"><b><span class="gen">{L_AVATAR}</span></b></td>
	<td class="catRight" width="60%"><b><span class="gen">{L_ABOUT_USER}</span></b></td>
  </tr>
  <tr> 
	<td class="row1" height="6" valign="top" align="center">{AVATAR_IMG}<br /><span class="postdetails">{POSTER_RANK}</span></td>
	<td class="row1" rowspan="3" valign="top"><table width="100%" border="0" cellspacing="1" cellpadding="3">
		<tr> 
		  <td valign="middle" align="right" nowrap="nowrap"><span class="gen">{L_JOINED}: </span></td>
		  <td width="100%"><b><span class="gen">{JOINED}</span></b></td>
		</tr>
		<tr> 
		  <td valign="top" align="right" nowrap="nowrap"><span class="gen">{L_TOTAL_POSTS}: </span></td>
		  <td valign="top"><b><span class="gen">{POSTS}</span></b><br /><span class="genmed">[{POST_PERCENT_STATS} / {POST_DAY_STATS}]</span> <br /><span class="genmed"><a href="{U_SEARCH_USER}" class="genmed">{L_SEARCH_USER_POSTS}</a></span></td>
		</tr>
		<tr> 
		  <td valign="middle" align="right" nowrap="nowrap"><span class="gen">{L_LOCATION}: </span></td>
		  <td><b><span class="gen">{LOCATION}</span></b></td>
		</tr>
		<tr> 
		  <td valign="middle" align="right" nowrap="nowrap"><span class="gen">{L_WEBSITE}: </span></td>
		  <td><span class="gen"><b>{WWW}</b></span></td>
		</tr>
		<tr> 
		  <td valign="middle" align="right" nowrap="nowrap"><span class="gen">{L_OCCUPATION}: </span></td>
		  <td><b><span class="gen">{OCCUPATION}</span></b></td>
		</tr>
		<tr> 
\n		  <td valign="top" align="right" nowrap="nowrap"><span class="gen">{L_INTERESTS}:</span></td>
		  <td> <b><span class="gen">{INTERESTS}</span></b></td>
		</tr>
	  </table>
	</td>
  </tr>
  <tr> 
	<td class="catLeft" align="center" height="28"><b><span class="gen">{L_CONTACT} {USERNAME} </span></b></td>
  </tr>
  <tr> 
	<td class="row1" valign="top"><table width="100%" border="0" cellspacing="1" cellpadding="3">
		<tr> 
		  <td valign="middle" align="right" nowrap="nowrap"><span class="gen">{L_EMAIL_ADDRESS}:</span></td>
		  <td class="row1" valign="middle" width="100%"><b><span class="gen">{EMAIL_IMG}</span></b></td>
		</tr>
		<tr> 
		  <td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_PM}:</span></td>
		  <td class="row1" valign="middle"><b><span class="gen">{PM_IMG}</span></b></td>
		</tr>
		<tr> 
		  <td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_MESSENGER}:</span></td>
		  <td class="row1" valign="middle"><span class="gen">{MSN}</span></td>
		</tr>
		<tr> 
		  <td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_YAHOO}:</span></td>
		  <td class="row1" valign="middle"><span class="gen">{YIM_IMG}</span></td>
		</tr>
		<tr> 
		  <td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_AIM}:</span></td>
		  <td class="row1" valign="middle"><span class="gen">{AIM_IMG}</span></td>
		</tr>
		<tr> 
		  <td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_ICQ_NUMBER}:</span></td>
		  <td class="row1"><script language="JavaScript" type="text/javascript"><!-- 

		if ( navigator.userAgent.toLowerCase().indexOf('mozilla') != -1 && navigator.userAgent.indexOf('5.') == -1 && navigator.userAgent.indexOf('6.') == -1 )
			document.write(' {ICQ_IMG}');
		else
			document.write('<table cellspacing="0" cellpadding="0" border="0"><tr><td nowrap="nowrap"><div style="position:relative;height:18px"><div style="position:absolute">{ICQ_IMG}</div><div style="position:absolute;left:3px;top:-1px">{ICQ_STATUS_IMG}</div></div></td></tr></table>');
		  
		  //--></script><noscript>{ICQ_IMG}</noscript></td>
		</tr>
	  </table>
	</td>
  </tr>
#
#-----[ REPLACE WITH 替換 ]----------------------------------------
#

代碼: 選擇全部

 <tr>
	<td class="row3" valign="top">
		<table cellpadding="2" cellspacing="4" border="0" width="100%">
		<tr>
			<td valign="top">
				<table cellpadding="4" cellspacing="0" border="0" class="bodyline" width="100%">
				<tr>
					<td class="cat" align="center" colspan="1"><span class="cattitle">{L_AVATAR}</span></td>
				</tr>
				<tr>
					<td class="row1" align="center">{AVATAR_IMG}</td>
				</tr>
				<tr>
					<td class="row1" align="center"><span class="postdetails">{POSTER_RANK}</span></td>
				</tr>
				</table>
				<br style="font-size: 4 px;" />
				<table cellpadding="4" cellspacing="0" border="0" class="bodyline" width="100%">
				<tr>
					<td class="cat" align="center" colspan="3"><span class="cattitle">{L_CONTACT} {USERNAME}</span></td>
				</tr>
				<tr>
					<td class="row2" colspan="3"><span style="font-size: 2px"> </span></td>
				</tr>
				<tr>
					<td class="row2" align="right" width="40%" nowrap="nowrap"><span class="gen">{L_EMAIL_ADDRESS}: </span></td>
					<td class="row1" align="left" width="100%" ><span class="gen">{EMAIL_IMG}</span></td>
					<td class="row2"></td>
				</tr>
				<tr>
					<td class="row2" align="right" width="40%" nowrap="nowrap"><span class="gen">{L_PM}: </span></td>
					<td class="row1" align="left" width="100%" ><span class="gen">{PM_IMG}</span></td>
					<td class="row2"></td>
				</tr>
				<tr>
					<td class="row2" colspan="3"><span style="font-size: 2px"> </span></td>
				</tr>
				<tr>
					<td class="row2" align="right" width="40%" nowrap="nowrap"><span class="gen">{L_MESSENGER}: </span></td>
					<td class="row1" align="left" width="100%" ><span class="gen">{MSN}</span></td>
					<td class="row2"></td>
				</tr>
				<tr>
					<td class="row2" align="right" width="40%" nowrap="nowrap"><span class="gen">{L_YAHOO}: </span></td>
					<td class="row1" align="left" width="100%" ><span class="gen">{YIM_IMG}</span></td>
					<td class="row2"></td>
				</tr>
				<tr>
					<td class="row2" align="right" width="40%" nowrap="nowrap"><span class="gen">{L_AIM}: </span></td>
					<td class="row1" align="left" width="100%" ><span class="gen">{AIM_IMG}</span></td>
					<td class="row2"></td>
				</tr>
				<tr>
					<td class="row2" align="right" width="40%" nowrap="nowrap"><span class="gen">{L_ICQ_NUMBER}: </span></td>
					<td class="row1" align="left" width="100%" ><span class="gen"><script language="JavaScript" type="text/javascript"><!-- 

		if ( navigator.userAgent.toLowerCase().indexOf('mozilla') != -1 && navigator.userAgent.indexOf('5.') == -1 && navigator.userAgent.indexOf('6.') == -1 )
			document.write(' {ICQ_IMG}');
		else
			document.write('<table cellspacing="0" cellpadding="0" border="0"><tr><td nowrap="nowrap"><div style="position:relative;height:18px"><div style="position:absolute">{ICQ_IMG}</div><div style="position:absolute;left:3px;top:-1px">{ICQ_STATUS_IMG}</div></div></td></tr></table>');
		  
		  //--></script><noscript>{ICQ_IMG}</noscript></span></td>
					<td class="row2"></td>
				</tr>
				<tr>
					<td class="row2" colspan="3"><span style="font-size: 2px"> </span></td>
				</tr>
				</table>
			</td>
			<td valign="top">
				<table cellpadding="4" cellspacing="0" border="0" class="bodyline" width="100%">
				<tr>
					<td class="cat" align="center" colspan="3"><b><span class="gen">{L_ABOUT_USER}</span></b>
					</td>
				</tr>
		<tr>
		  <td class="row2" colspan="3"><span style="font-size: 2px"> </span></td>
		</tr>
		<tr> 
		  <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_JOINED}: </span></td>
		  <td class="row1" align="left" width="100%" ><span class="gen"><b>{JOINED}</b></span></td>
		  <td class="row2"></td>
		</tr>
		<tr>
		  <td class="row2" colspan="3"><span style="font-size: 2px"> </span></td>
		</tr>
		<tr> 
		  <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_TOTAL_POSTS}: </span></td>
		  <td class="row1" align="left" width="100%" ><b><span class="gen">{POSTS}</span></b><br /><span class="genmed">[ {POST_PERCENT_STATS} / {POST_DAY_STATS}]</span> <br /><span class="genmed"><a href="{U_SEARCH_USER}" class="genmed">{L_SEARCH_USER_POSTS}</a></span></td>
		  <td class="row2"></td>
		</tr>
		<tr>
		  <td class="row2" colspan="3"><span style="font-size: 2px"> </span></td>
		</tr>
		<tr> 
		  <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_LOCATION}: </span></td>
		  <td class="row1" align="left" width="100%" ><b><span class="gen">{LOCATION}</span></b></td>
		  <td class="row2"></td>	
		</tr>
		<tr> 
		  <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_WEBSITE}: </span></td>
		  <td class="row1" align="left" width="100%" ><span class="gen"><b>{WWW}</b></span></td>
		  <td class="row2"></td>
		</tr>
		<tr> 
		  <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_OCCUPATION}: </span></td>
		  <td class="row1" align="left" width="100%" ><b><span class="gen">{OCCUPATION}</span></b></td>
		  <td class="row2"></td>	
		</tr>
		<tr> 
		  <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_INTERESTS}: </span></td>
		  <td class="row1" align="left" width="100%" > <b><span class="gen">{INTERESTS}</span></b></td>
		  <td class="row2"></td>		
		</tr>
<tr>
	<td class="row2" colspan="3"><span style="font-size: 2px"> </span></td>
</tr>
</table>			
			</td>
		</tr>

		</table>
<br style="font-size: 4 px;" />
	</td>
</tr>
#
#-----[ SAVE/CLOSE ALL FILES 儲存/關閉所有檔案 ]-------------------
#
# EoM 外掛修正結束

  • 如何在右邊欄位加入資料?

    我以Birthday(生日模組)這個外掛來當例子
#
#-----[ OPEN 打開 ]------------------------------------------------
#

代碼: 選擇全部

templates/subSilver/profile_view_body.tpl
#
#-----[ FIND 尋找 ]------------------------------------------------
#

代碼: 選擇全部

		  <td> <b><span class="gen">{INTERESTS}</span></b></td>
		</tr>
#
#-----[ AFTER, ADD 之後, 加上 ]------------------------------------
#

代碼: 選擇全部

<!-- Start add - Birthday MOD -->
		<tr>
		  <td valign="top" align="right" nowrap="nowrap"><span class="gen">{L_BIRTHDAY}:</span></td>
		  <td><b><span class="gen">{BIRTHDAY}</span></b></td>
		</tr>
<!-- End add - Birthday MOD -->

之中要我們尋找的
<td> <b><span class="gen">{INTERESTS}</span></b></td>
</tr>
就改成尋找(紅色為新增的部份)
<td class="row1" align="left" width="100%" > <b><span class="gen">{INTERESTS}</span></b></td>
<td class="row2"></td>
</tr>
要我們加入的
<!-- Start add - Birthday MOD -->
<tr>
<td valign="top" align="right" nowrap="nowrap"><span class="gen">{L_BIRTHDAY}:</span></td>
<td><b><span class="gen">{BIRTHDAY}</span></b></td>
</tr>
<!-- End add - Birthday MOD -->
就改成加入(紅色為新增的部份)
<!-- Start add - Birthday MOD -->
<tr>
<td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_BIRTHDAY}: </span></td>
<td class="row1" align="left" width="100%" ><b><span class="gen">{BIRTHDAY}</span></b></td>
<td class="row2"></td>
</tr>
<!-- End add - Birthday MOD -->
如何加入分隔線?
在 DEMO 圖中 你會看到 Joined 項目跟 Total posts 項目中間有分隔開來
圖檔
在這兩個項目中 加入以下代碼就可分隔開來

代碼: 選擇全部

		<tr>
		  <td class="row2" colspan="3"><span style="font-size: 2px"> </span></td>
		</tr>
這通常是加入在兩個 tr 的中間
</tr>

<tr>
例如 Interests 和 Birthday 想要分隔開來就是如下
<tr>
<td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_INTERESTS}: </span></td>
<td class="row1" align="left" width="100%" > <b><span class="gen">{INTERESTS}</span></b></td>
<td class="row2"></td>
</tr>
<tr>
<td class="row2" colspan="3"><span style="font-size: 2px"> </span></td>
</tr>

<!-- Start add - Birthday MOD -->
<tr>
<td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_BIRTHDAY}: </span></td>
<td class="row1" align="left" width="100%" ><b><span class="gen">{BIRTHDAY}</span></b></td>
<td class="row2"></td>
</tr>
<!-- End add - Birthday MOD -->
  • 如何在下方加入橫越兩邊欄位的寬欄位?(例如本站的簽名檔
    我以簽名檔及個人簡介來當例子
#
#-----[ OPEN 打開 ]------------------------------------------------
#

代碼: 選擇全部

templates/subSilver/profile_view_body.tpl
#
#-----[ FIND 尋找 ]------------------------------------------------
#
<br style="font-size: 4 px;" />
</td>
</tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="right"><span class="nav"><br />{JUMPBOX}</span></td>
</tr>
</table>
#
#-----[ BEFORE ADD 之前, 加上 ]------------------------------------
#
<!-- BEGIN switch_user_sig_block -->
<table cellpadding="4" align="center" cellspacing="0" border="0" class="bodyline" width="99%">
<tr>
<td class="cat" align="center" colspan="1"><span class="cattitle">{switch_user_sig_block.L_SIGNATURE}</span></td>
</tr>
<tr>
<td class="row1" width="99%" ><span class="gen">{switch_user_sig_block.USER_SIG}</span></td>
</tr>
</table>
<!-- END switch_user_sig_block -->

藍色的部份你得依照外掛的數值來替換
例如個人簡介是\r
<!-- BEGIN user_introduces_oneself -->
<tr>
<td colspan="2" class="catLeft" align="center" height="28"><b><span class="gen">{user_introduces_oneself.L_INTRODUCES_ONESELF} </span></b></td>
</tr>
<tr>
<td colspan="2" class="row1"><span class="genmed">{user_introduces_oneself.INTRODUCES_ONESELF}</span></td>
</tr>
<!-- END user_introduces_oneself -->
只要將標示紅色代碼比對替換就可以了

註:你可能會發現到簽名檔欄位沒有跟上面兩個左右欄位對齊
  因我對HTML語法還不夠了解 所以希望各位來一起想如何對齊
  目前 99% 是最接近欄位的數值

  • 外掛資訊寫法:
    HP/MP/EXP Mod (Version 2) 1.2.0
    <!-- [BEGIN LEVEL MOD] -->
    <tr>
    <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="postdetails">{L_CLASS}: </span></td>
    <td class="row1" align="left" width="100%"><b><span class="gen">{LEVEL_CLASSNAME}</span></b></td>
    <td class="row2"></td>
    </tr>
    <tr>
    <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="postdetails">{L_SPECIAL_ABILITY}: </span></td>
    <td class="row1" align="left" width="100%"><span class="gen">{LEVEL_SPECIAL_ABILITY}</span></td>
    <td class="row2"></td>
    </tr>
    <tr>
    <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="postdetails">{L_LEVEL}: </span></td>
    <td class="row1" align="left" width="100%"><b><span class="gen">{LEVEL}</span></b></td>
    <td class="row2"></td>
    </tr>
    <tr>
    <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="postdetails">{L_SKILL_RATIO}: </span></td>
    <td class="row1" align="left" width="100%"><b><span class="gen">{LEVEL_SKILLRATIO}</span></b></td>
    <td class="row2"></td>
    </tr>
    <tr>
    <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="postdetails">{L_ELEMENT}: </span></td>
    <td class="row1" align="left" width="100%">{LEVEL_ELEMENT}</td>
    <td class="row2"></td>
    </tr>
    <tr>
    <td class="row2" align="right" width="20%" nowrap="nowrap"><img src="{LEVEL_CLASSIMG}" alt="{LEVEL_CLASSNAME}" title="{LEVEL_CLASSNAME}" border="0" /></td>
    <td class="row1" align="left" width="100%"><span class="postdetails"> </span>
    <table width="143" border="0" cellpadding="0" cellspacing="0" style="background-image:url(templates/subSilver/images/level_mod/lm_bkg.gif)">
    <tr><td><img src="images/spacer.gif" alt="" width="31" height="49" /></td>
    <td width="100%">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/spacer.gif" alt="" width="20" height="6" /></td>
    </tr>
    <tr>
    <td><img src="templates/subSilver/images/level_mod/lm_hp_bar.gif" alt="{HP}" title="{HP}" width="{HP_WIDTH}" height="9" /><img src="templates/subSilver/images/level_mod/lm_hp_bar_end.gif" alt="" width="4" height="9" /></td>
    </tr>
    <tr>
    <td><img src="images/spacer.gif" alt="" width="20" height="4" /></td>
    </tr>
    <tr>
    <td><img src="templates/subSilver/images/level_mod/lm_mp_bar.gif" alt="{MP}" title="{MP}" width="{MP_WIDTH}" height="9" /><img src="templates/subSilver/images/level_mod/lm_mp_bar_end.gif" alt="" width="4" height="9" /></td>
    </tr>
    <tr>
    <td><img src="images/spacer.gif" alt="" width="20" height="4" /></td>
    </tr>
    <tr>
    <td><img src="templates/subSilver/images/level_mod/lm_exp_bar.gif" alt="{EXP}" title="{EXP}" width="{EXP_WIDTH}" height="9" /><img src="templates/subSilver/images/level_mod/lm_exp_bar_end.gif" alt="" width="4" height="9" /></td>
    </tr>
    <tr>
    <td><img src="images/spacer.gif" alt="" width="20" height="8" /></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    <td class="row2"></td>
    </tr>
    <!-- [END LEVEL MOD] -->
    Birthday 1.5.4
    <tr>
    <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_BIRTHDAY}: </span></td>
    <td class="row1" align="left" width="100%" ><b><span class="gen">{BIRTHDAY}</span></b></td>
    <td class="row2"></td>
    </tr>
    Birthday ADD-ON zodiac's
    <tr>
    <td class="row2" align="right" width="20%" nowrap="nowrap">{L_ZODIAC}: </span></td>
    <td class="row1" align="left" width="100%" ><b><span class="gen">{ZODIAC} {ZODIAC_IMG}</b></span></td>
    \n <td class="row2"></td>
    </tr>
    Birthday ADD-ON Chinese zodiac
    <tr>
    <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_CHINESE}: </span></td>
    <td class="row1" align="left" width="100%" ><b><span class="gen">{CHINESE} {CHINESE_IMG}</b></span></td>
    <td class="row2"></td>
    </tr>
    Gender
    <tr>
    <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_GENDER}: </span></td>
    <td class="row1" align="left" width="100%" > <b><span class="gen">{GENDER}</span></b></td>
    </tr>
    Show user groups
    <tr>
    <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_USER_GROUP}{L_NO_USER_GROUP}: </span></td>
    <td class="row1" align="left" width="100%" ><b><span class="gen">{SHOW_USERGROUPS}{L_NO_USERGROUPS}</span></b></td>
    <td class="row2"></td>
    </tr>
    Last visit
    <tr>
    <td class="row2" align="right" width="20%" nowrap="nowrap"><span class="gen">{L_LOGON}: </span></td>
    <td class="row1" align="left" width="100%" ><b><span class="gen">{LAST_LOGON}</span></b></td>
    <td class="row2"></td>
    </tr>
主題已鎖定

回到「非官方認證風格」