X-Space应用技巧（一）：如何与论坛保持统一风格？

php007 · 发表于 2006-7-14 10:14:08

转载：http://my.donews.com/discuz/2006/07/11/x-space-dev-001
X-Space是Discuz!针对站长推出的一套个人门户系统，它以BLOG功能为核心，结合了图片、收藏、书签、好友圈等Web2.0应用元素，以及商品、文件、友情链接等互联网流行应用，同时又与Discuz!社区系统有着良好的融合。通过X-Space，站长们可以轻松的搭建起媲美和讯个人门户、MSN Space、QQ个人空间的个人门户。
X-Space一经推出，就受到了广大站长的欢迎和关注。尤其是已经在使用Discuz!社区系统的网站，有很多网站在X-Space一经推出，就立即采用X-Space架设辅助站点，加入到个人门户阵营中来。这其中包括日光海岸（ http://www.sunschina.com）等知名论坛。
但就目前已经使用X-Space搭建起来的站点来看，大多数站点的聚合首页的风格是没有经过调整的，都还保持着官方默认的风格，而他们的论坛很多却是自己定义的，往往是访问论坛，风格非常华丽，而转到聚合首页上，却是非常朴素、非常单调的页面，这看起来很不协调。
在论坛与个人门户风格统一的问题上，日光海岸处理的非常好。他们的论坛与空间、与相册看起来几乎保持着同一种风格，这样在访问的时候，就不至于造成类似在两个网站之间跳转的错觉。
（本文所有图片右键 -> 图片另存为到本地后可查看完整大图）

细心的站长可能会发现，日光海岸的这种改动其实是很小的，主要是在背景和头部做了一些修饰，其他的区块风格仍然保持了官方的样式。所以，对已经安装了X-Space的站长来说，也可以稍作改动即可将自己的X-Space风格与论坛风格保持统一。下面，我们就以日光海岸做参考，逐步给出要改动的地方和代码实例（ 警告：在更改之前建议备份wwwroot/supesite/templates/default下所有文件）：
首先看这是本机上没有改动之前的X-Space首页，保持这官方的风格：

第一步：先给X-Space首页的顶部加上自定义导航条；

操作步骤：

用记事本或编辑器打开 wwwroot/supesite/templates/default/header.html.php，在第18行<body>之后加入相关导航代码，提示：如果要保持与论坛相同的风格，代码最好从论坛相应的对应模板文件中拷贝。如在本示例中的代码为：（附件代码1）

保存，刷新X-Space首页。这时X-Space的首页风格已经发生变化，上部的导航条已经按照我们的设计加入进来了。

第二步：给X-Space首页顶部外围加上自定义样式；

操作步骤：

同样修改 wwwroot/supesite/templates/default/header.html.php，在第一步添加的代码之后紧跟着加入外框代码：（附件代码2）

保存，刷新X-Space首页。这时外围风格基本形成，但只是在页面的顶部和左部有效果，右边和下边仍然没有加入进来。具体参考第三步。

第三步：为X-Space首页页面底部加上自定义代码，完善外围样式；

操作步骤：

用记事本或编辑器打开 wwwroot/supesite/templates/default/footer.html.php，在第13行，</body>标记上方添加外框封闭代码：（附件代码3）

保存，刷新X-Space首页。

OK，我们来看一下修改后的截图：

看似已经完成，但是我们也注意到，页面主体与左右两边的间距有些大了，造成了布局上的不美观。这就需要作以下补充修改来完善这个瑕疵：
第四步：修改css，完善最后页面上的布局调整。

操作步骤：

用记事本或编辑器打开 wwwroot/supesite/css/main.css，在第92行修改wrap的宽度为：width: 850px;

保存，刷新X-Space首页。

OK，刷新之后再看一下首页上的布局，已经相当的协调了。

至此，对X-Space首页的修改已经基本完成。
接下来是对日志页面、咨询页面、相册页面、文件页面等相关页面的风格统一化修改。这些页面的修改与首页操作步骤一模一样，仅仅只是对应操作文件上的不同而已，这里就不做详细的演示。总结一下操作规律，其实很简单，要修改头部和左边的风格，只需要改动对应的header模板即可，而对应的右边和底部的风格，则在footer模板里修改。对于有必要的css修改，则只需要修改对应css文件即可。例如要修改日志页面：

对应的头文件为：wwwroot/supesite/templates/default/space_header.html.php
对应的尾文件为：wwwroot/supesite/templates/default/space_footer.html.php
对应的css文件为：wwwroot/supesite/css/space.css

在一般情况下，只需要修改这三个文件即可。
说明：附件文件中包含要修改的示例代码，站长可以下载参考使用。在实际的修改过程中，要参考自己的论坛所使用的风格的代码来进行对应的修改才能保证在风格上保持一致，本文只作参考示例：

附件，相关修改代码示例：http://yauboo.googlepages.com/code.demo.supesite.txt

vanhom · 发表于 2006-7-14 16:27:18

沙发,顶一下,好好研究

ㄨЬái鷺♂ · 发表于 2006-7-14 17:10:27

收藏先``

lovews · 发表于 2006-7-14 18:46:04

顶一个教程写的很辛苦~

我是前几天刚空间按照这个方法改换的。。。
www.sunshome.net/space 演示

有人需要space与论坛风格一致，可以找我~

[ 本帖最后由 lovews 于 2006-7-14 19:12 编辑 ]

macdxh · 发表于 2006-7-14 23:21:18

好东西，留个记号，学习学习

wotlitn · 发表于 2006-7-15 09:54:58

好东西，正需要这样的精品。谢谢

清风古道 · 发表于 2006-7-15 12:22:38

好东西，谢谢

bbdbb · 发表于 2006-7-15 14:10:51

收藏，学习

飒风 · 发表于 2006-7-15 15:47:35

收藏～

管理员007 · 发表于 2006-7-16 21:32:02

顶一下

		自动登录	找回密码
密码			立即注册

[教程] X-Space应用技巧（一）：如何与论坛保持统一风格？

评分