[風格] 個人公開資料頁面 P.C.P 排版風格
發表於 : 2004-03-24 10:00
- 原始作者：
Ptirhiik < admin@rpgnet-fr.com > (Pierre) http://rpgnet.clanmckeen.com
我只是將 Profile Control Panel v 2.0.0 的個人公開資料頁面排版風格將其抽離出來
不算上是什麼作者
- DEMO 圖：
http://myweb.hinet.net/home6/riot/snap039.JPG
由於個人公開資料頁面有很多外掛都會加上其相關資訊
所以我是先替換成最原始的方式 再教各位如何輸入額外外掛的相關資訊
#-----[ 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>例如 Interests 和 Birthday 想要分隔開來就是如下</tr>
<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>
<!-- 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
Birthday 1.5.4<!-- [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 ADD-ON zodiac's<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 Chinese zodiac<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>
Gender<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>
Show user groups<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>
Last visit<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><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>