X-Space應用技巧：與論壇保持統一風格

2024-04-27 13:55:45

字體：大中小

來源：轉載

供稿：網友

X-Space應用技巧：如何與論壇保持統一風格？

與Discuz!論壇無縫融合是X-Space個人門戶系統的特色之一，很多站長管理員為了方便用戶瀏覽使用，加強用戶的記憶，統一了論壇與個人門戶的風格。比如，這個日光海岸（ http://www.sunschina.com），他們的論壇與個人門戶的背景、頁頭做了統一修飾，在訪問的時候，就不至于造成在兩個網站之間跳轉的感覺。

很多用戶站長很羨慕這種統一的風格，卻不知道該如何去做。我們就以“日光海岸”做參考，進行實例修改。（提示：在更改之前請備份“supesite/templates/default”下所有文件）。

一、給X-Space首頁的頂部加上自定義導航條
1、這是X-Space安裝后的默認首頁。

圖片1

圖片2

2、用記事本或編輯器打開 “supesite/templates/default/header.html.php”文件，在“header.html.php”中的第18行之后加入如下代碼：

<div align="right" style="background-color:#07b8ff;padding-bottom:5px; padding-top:5px; padding-right:17px;color:#FFFFFF">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="11" height="22"><img src="http://www.sunschina.com/space/images/sunpp/sunpp_ban_bg1.gif"  align="absmiddle" /></td>
        <td bgcolor="#FFFFFF" style="padding-left:5px; padding-right:5px"><a href="/index.php">»日光海岸首頁</a> | <a href="/space">個人空間</a> | <a href="/space/action/blog">日志</a> | <a href="/space/action/image">相冊</a> | <a href="/bbs/school.php">學校</a> | <a >論壇</a> </td>
        <td width="11" height="22"><img src="http://www.sunschina.com/space/images/sunpp/sunpp_ban_bg2.gif"  align="absmiddle" /></td>
      </tr>
    </table>
  </div>

3、保存該文件，然后刷新X-Space首頁。可以看到X-Space的首頁風格已經發生變化，上部的導航條已經按照我們的設計加入進來。

二、給X-Space首頁頂部外圍加上自定義樣式

1：用記事本或編輯器打開 “supesite/templates/default/header.html.php”文件，在“header.html.php”中的第18行之后加入如下代碼“

2、保存該文件，然后刷新X-Space首頁

圖片3

三、為X-Space首頁頁面底部加上自定義代碼

1：用記事本或編輯器打開 “supesite/templates/default/header.html.php”文件，在“header.html.php”中的第13行，標記上方添加外框封閉代碼：“

</td></tr>
<tr><td style="padding: BORDERWIDTH">
<br /></td>
</tr></table>
</td>
    <td width="23" height="182" valign="top" background="http://www.sunschina.com/space/images/sunpp/rightbg.gif"><img src="http://www.sunschina.com/space/images/sunpp/right.gif" width="23" height="370"></td>
  </tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="26" height="76" background="http://www.sunschina.com/space/images/sunpp/leftbg.gif"> </td>
    <td align="center" bgcolor="#FFFFFF"><table width="850" border="0"  cellpadding="0" cellspacing="0" style="font-size: 11px; font-family: Tahoma, Arial">
            <tr>
              <td align="left"><img src="/img/linklogo.gif" width="88" height="31"  align="top"/>  <a href="/bbs/rule.php?tid=1">關于我們</a>  |  <a href="/bbs/rule.php?tid=2">免責聲明</a><a href="thread-1524050-1-1.html"></a>  |  <a href="/bbs/rule.php?tid=3">隱私政策</a><a href="rule.php?tid=1524050"></a><a href="thread-1524050-1-1.html"></a>  |  <a href="/bbs/rule.php?tid=4">聯系我們</a><a href="mailto: "></a>  |  <a >會服中心</a>
  <br /></td>
              <td align="right" valign="top" class="footerlink"><a href="#top"><img src="http://www.sunschina.com/space/images/sunpp/gototop.gif" border="0" /></a></td>
            </tr>
            <tr>
              <td align="left" valign="bottom" style="font-size:11px; font-family:sans-serif;Arial, Helvetica">
    Powered by <a ><strong>X-Space</strong></font></a>
        1.0      © 2001-2006 <a >Comsenz Technology Ltd</a>
      <br />
      <font color="#0000FF">招商電話:+86.12345678900 客服熱線:+86.12345678900 法律顧問:+86.12345678900</font></td>
              <td align="right" valign="bottom" style="font-size:11px; font-family:sans-serif;Arial, Helvetica">
                  ©2002 - 2006 <b>日光海岸 <a >鄂ICP備05005214號</font></a>
                  <scrjavaScript" type="text/Javascript" src="http://js.d.s35.51.la/1566.js"></script>
                  <script language='JavaScript' src='http://v2.cnzz.com/stat.php?id=48085&web_id=48085&show=pic' type="text/javascript" charset='gb2312'></script>
                <strong>Skin Designed by Danny</strong></td>
            </tr>
        </table>
</td>
    <td width="23" height="76" background="http://www.sunschina.com/space/images/sunpp/rightbg.gif"> </td>
  </tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="http://www.sunschina.com/space/images/sunpp/footbg.gif">
  <tr>
    <td width="40" height="31"><img src="http://www.sunschina.com/space/images/sunpp/footleft.gif" width="40" height="31" /></td>
    <td align="right" background="http://www.sunschina.com/space/images/sunpp/cpimgup.gif"> 

</td>
    <td width="40" height="31"><img src="http://www.sunschina.com/space/images/sunpp/footright.gif" width="40" height="31" /></td>
  </tr>
</table>

2、保存該文件，然后刷新X-Space首頁，就可以看到修改后的首頁

圖片4