X-Space应用技巧：与论坛保持统一风格 (1)

与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行之后加入如下代码

%26lt;divalign="right"style="background-color:#07b8ff;padding-bottom:5px;padding-top:5px;padding-right:17px;color:#FFFFFF"%26gt;
%26lt;tableborder="0"cellpadding="0"cellspacing="0"%26gt;
%26lt;tr%26gt;
%26lt;tdwidth="11"height="22"%26gt;%26lt;imgsrc="http://edu.xinasp.com/uploadfile/web/uploadfile/200804/20080425042631444.gif"align="absmiddle"/%26gt;%26lt;/td%26gt;
%26lt;tdbgcolor="#FFFFFF"style="padding-left:5px;padding-right:5px"%26gt;%26lt;ahref="/index.php"%26gt;%26amp;raquo;日光海岸首页%26lt;/a%26gt;|%26lt;ahref="/space"%26gt;个人空间%26lt;/a%26gt;|%26lt;ahref="/space/action/blog"%26gt;日志%26lt;/a%26gt;|%26lt;ahref="/space/action/image"%26gt;相册%26lt;/a%26gt;|%26lt;ahref="/bbs/school.php"%26gt;学校%26lt;/a%26gt;|%26lt;ahref="http://www.sunschina.org"target="_blank"%26gt;会员服务中心%26lt;/a%26gt;|%26lt;ahref="/bbs/index.php"%26gt;论坛%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;tdwidth="11"height="22"%26gt;%26lt;imgsrc="http://edu.xinasp.com/uploadfile/web/uploadfile/200804/20080425042631784.gif"align="absmiddle"/%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/table%26gt;
%26lt;/div%26gt;

3、保存该文件，然后刷新X-Space首页。可以看到X-Space的首页风格已经发生变化，上部的导航条已经按照我们的设计加入进来。

二、给X-Space首页顶部外围加上自定义样式

1用记事本或编辑器打开 “supesite/templates/default/header.html.php”文件，在“header.html.php”中的第18行之后加入如下代码“

%26lt;tablewidth="100%"border="0"cellpadding="0"cellspacing="0"bgcolor="#07b8ff"%26gt;
%26lt;tr%26gt;
%26lt;tdwidth="15"%26gt;%26amp;nbsp;%26lt;/td%26gt;
%26lt;tdalign="center"%26gt;
%26lt;tablewidth="100%"border="0"cellspacing="0"cellpadding="0"align="center"%26gt;

%26lt;tr%26gt;
%26lt;tdwidth="10%"height="20"style="padding-left:5px"%26gt;%26lt;imgsrc="http://edu.xinasp.com/uploadfile/web/uploadfile/200804/20080425042632811.gif"%26gt;%26lt;/td%26gt;
%26lt;tdwidth="90%"align="right"valign="top"%26gt;%26amp;nbsp;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/table%26gt;%26lt;/td%26gt;
%26lt;tdwidth="15"%26gt;%26amp;nbsp;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/table%26gt;
%26lt;tablewidth="100%"border="0"cellpadding="0"cellspacing="0"%26gt;
%26lt;tr%26gt;
%26lt;tdwidth="30"%26gt;%26lt;imgsrc="http://edu.xinasp.com/uploadfile/web/uploadfile/200804/20080425042632389.gif"width="30"height="60"%26gt;%26lt;/td%26gt;
%26lt;tdalign=centerbackground="http://www.sunschina.com/space/images/sunpp/indexbg.gif"%26gt;%26lt;ahref="index.php"%26gt;%26lt;/a%26gt;
%26lt;tablewidth="100%"border="0"cellspacing="0"cellpadding="0"%26gt;
%26lt;tr%26gt;
%26lt;tdalign=left%26gt;%26lt;tablewidth="98%"border="0"align="center"cellpadding="2"cellspacing="0"%26gt;
%26lt;tr%26gt;
%26lt;tdalign="center"valign="middle"%26gt;
%26lt;/td%26gt;
%26lt;/tr%26gt;

%26lt;/table%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/table%26gt;
%26lt;tablewidth="100%"border="0"cellspacing="0"cellpadding="0"%26gt;
%26lt;tr%26gt;%26lt;/tr%26gt;
%26lt;/table%26gt;%26lt;/td%26gt;
%26lt;tdwidth="30"%26gt;%26lt;imgsrc="http://edu.xinasp.com/uploadfile/web/uploadfile/200804/20080425042633275.gif"width="30"height="60"%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/table%26gt;
%26lt;tablewidth="100%"border="0"cellspacing="0"cellpadding="0"%26gt;
%26lt;tr%26gt;
%26lt;tdwidth="26"height="182"valign="top"background="http://www.sunschina.com/space/images/sunpp/leftbg.gif"%26gt;%26lt;imgsrc="http://edu.xinasp.com/uploadfile/web/uploadfile/200804/20080425042633158.gif"width="26"height="355"%26gt;%26lt;/td%26gt;
%26lt;tdbgcolor="#FFFFFF"%26gt;
%26lt;tableMAINTABLEBGCODEwidth="MAINTABLEWIDTH"cellpadding="MAINTABLESPACE"cellspacing="0"border="0"align="center"%26gt;
%26lt;tr%26gt;%26lt;td%26gt;

2、保存该文件，然后刷新X-Space首页

图片3

三、为X-Space首页页面底部加上自定义代码

1用记事本或编辑器打开 “supesite/templates/default/header.html.php”文件，在“header.html.php”中的第13行，标记上方添加外框封闭代码“
%26lt;/td%26gt;%26lt;/tr%26gt;
%26lt;tr%26gt;%26lt;tdstyle="padding:BORDERWIDTH"%26gt;
%26lt;br/%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;%26lt;/table%26gt;
%26lt;/td%26gt;
%26lt;tdwidth="23"height="182"valign="top"background="http://www.sunschina.com/space/images/sunpp/rightbg.gif"%26gt;%26lt;imgsrc="http://edu.xinasp.com/uploadfile/web/uploadfile/200804/20080425042634221.gif"width="23"height="370"%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/table%26gt;
%26lt;tablewidth="100%"border="0"cellpadding="0"cellspacing="0"%26gt;
%26lt;tr%26gt;
%26lt;tdwidth="26"height="76"background="http://www.sunschina.com/space/images/sunpp/leftbg.gif"%26gt;%26amp;nbsp;%26lt;/td%26gt;
%26lt;tdalign="center"bgcolor="#FFFFFF"%26gt;%26lt;tablewidth="850"border="0"cellpadding="0"cellspacing="0"style="font-size:11px;font-family:Tahoma,Arial"%26gt;
%26lt;tr%26gt;
%26lt;tdalign="left"%26gt;%26lt;imgsrc="http://edu.xinasp.com/img/linklogo.gif"width="88"height="31"align="top"/%26gt;%26amp;nbsp;%26amp;nbsp;%26lt;ahref="/bbs/rule.php?tid=1"%26gt;关于我们%26lt;/a%26gt;%26amp;nbsp;%26amp;nbsp;|%26amp;nbsp;%26amp;nbsp;%26lt;ahref="/bbs/rule.php?tid=2"%26gt;免责声明%26lt;/a%26gt;%26lt;ahref="thread-1524050-1-1.html"%26gt;%26lt;/a%26gt;%26amp;nbsp;%26amp;nbsp;|%26amp;nbsp;%26amp;nbsp;%26lt;ahref="/bbs/rule.php?tid=3"%26gt;隐私政策%26lt;/a%26gt;%26lt;ahref="rule.php?tid=1524050"%26gt;%26lt;/a%26gt;%26lt;ahref="thread-1524050-1-1.html"%26gt;%26lt;/a%26gt;%26amp;nbsp;%26amp;nbsp;|%26amp;nbsp;%26amp;nbsp;%26lt;ahref="/bbs/rule.php?tid=4"%26gt;联系我们%26lt;/a%26gt;%26lt;ahref="mailto:"%26gt;%26lt;/a%26gt;%26amp;nbsp;%26amp;nbsp;|%26amp;nbsp;%26amp;nbsp;%26lt;ahref="http://www.sunschina.org"target="_blank"%26gt;会服中心%26lt;/a%26gt;
%26lt;br/%26gt;%26lt;/td%26gt;
%26lt;tdalign="right"valign="top"class="footerlink"%26gt;%26lt;ahref="#top"%26gt;%26lt;imgsrc="/uploadfile/web/uploadfile/200804/20080425042634520.gif"border="0"/%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;tr%26gt;
%26lt;tdalign="left"valign="bottom"style="font-size:11px;font-family:sans-serif;Arial,Helvetica"%26gt;
Poweredby%26lt;ahref="http://x-space.discuz.net"target="_blank"%26gt;%26lt;fontcolor="#7186B0"%26gt;%26lt;strong%26gt;X-Space%26lt;/strong%26gt;%26lt;/font%26gt;%26lt;/a%26gt;
1.0%26amp;copy;2001-2006%26lt;ahref="http://www.comsenz.com"target="_blank"%26gt;ComsenzTechnologyLtd%26lt;/a%26gt;
%26lt;br/%26gt;
%26lt;fontcolor="#0000FF"%26gt;招商电话:+86.12345678900客服热线:+86.12345678900法律顾问:+86.12345678900%26lt;/font%26gt;%26lt;/td%26gt;
%26lt;tdalign="right"valign="bottom"style="font-size:11px;font-family:sans-serif;Arial,Helvetica"%26gt;
%26amp;copy;2002-2006%26lt;b%26gt;日光海岸%26lt;ahref="http://www.sunschina.com"%26gt;SunsChina.com%26lt;/a%26gt;%26lt;/b%26gt;AllRightsReservsed%26lt;br/%26gt;%26lt;atarget="_blank"href="http://www.miibeian.gov.cn"%26gt;%26lt;fontcolor="#333333"%26gt;鄂ICP备05005214号%26lt;/font%26gt;%26lt;/a%26gt;
%26lt;scriptlanguage="JavaScript"type="text/javascript"src="http://js.d.s35.51.la/1566.js"%26gt;%26lt;/script%26gt;
%26lt;scriptlanguage='JavaScript'src='http://v2.cnzz.com/stat.php?id=48085%26amp;amp;web_id=48085%26amp;amp;show=pic'type="text/javascript"charset='gb2312'%26gt;%26lt;/script%26gt;
%26lt;strong%26gt;SkinDesignedbyDanny%26lt;/strong%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/table%26gt;
%26lt;/td%26gt;
%26lt;tdwidth="23"height="76"background="http://www.sunschina.com/space/images/sunpp/rightbg.gif"%26gt;%26amp;nbsp;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/table%26gt;
%26lt;tablewidth="100%"border="0"cellpadding="0"cellspacing="0"background="http://www.sunschina.com/space/images/sunpp/footbg.gif"%26gt;
%26lt;tr%26gt;
%26lt;tdwidth="40"height="31"%26gt;%26lt;imgsrc="http://edu.xinasp.com/uploadfile/web/uploadfile/200804/20080425042634726.gif"width="40"height="31"/%26gt;%26lt;/td%26gt;
%26lt;tdalign="right"background="http://www.sunschina.com/space/images/sunpp/cpimgup.gif"%26gt;%26amp;nbsp;

%26lt;/td%26gt;
%26lt;tdwidth="40"height="31"%26gt;%26lt;imgsrc="http://edu.xinasp.com/uploadfile/web/uploadfile/200804/20080425042635891.gif"width="40"height="31"/%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/table%26gt;

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

图片4

3、但是页面主体与左右两边的间距有些大了，造成了布局上的不美观。用记事本或编辑器打开“/supesite/css/main.css”，在第92行修改wrap的宽度为“width: 850px; ”

4、然后保存该文件，刷新X-Space首页。至此，对X-Space首页的修改已经基本完成。

5、接下来是对“日志”、“资讯”、“相册”、“文件”等相关页面的风格统一化修改，修改方法与首页操作步骤相同。

总结

风格统一化修改其实很简单，要修改页面头部和左边的风格，只需要改动对应的header模板即可，而对应的右边和底部的风格，则在footer模板里修改。