轉載
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
對應的尾文件為：ww
wroot/supesite/templates/default/space_footer.html.php
對應的css文件為：wwwroot/supesite/css/space.css
在一般情況下，只需要修改這三個文件即可。
說明：附件文件中包含要修改的示例代碼，站長可以下載參考使用。在實際的修改過程中，要參考自己的論壇所使用的風格的代碼來進行對應的修改才能保證在風格上保持一致，本文只作參考示例：
附件，相關修改代碼示例：下載附件
