[972]CSS打造XOOPS佈景
一、加入XOOPS佈景檔頭
1.請開啟教材包中的「檔頭.txt」，並將裡頭所有內容複製起來。
2.開啟theme.html，貼上並覆蓋<body>之前（含<body>）的所有HTML語法。
二、加入XOOPS佈景語法
1.請開啟教材包中的「樣板碼.txt」，並將裡頭所有內容依序複製起來。
2.將複製起來的語法複製到theme.html中，並覆蓋原先標示的中文。
三、建立基本的區塊呈現區樣板檔（block.html）
1.區塊區域樣板檔不見得要有，也可直接做到them.html裡頭，但這樣容易導致theme.html不易維護，所以大多獨立出來。
2.您可以針對八個區域做八個不同的區塊呈現區樣板檔，也可以做一個大家一起用。
3.區塊呈現區樣板只有兩個樣板碼：
(1) 區塊標題：<{$block.title}>
(2) 區塊內容：<{$block.content}> （區塊內容另外有區塊本身樣板控制）
4.建議寫法如下：有標題，則秀出套樣式的標題及內容，若無，則秀出不套樣式的內容：
| <{if $block.title}> <div class="blockTitle"><{$block.title}></div> <div class="blockContent"><{$block.content}></div> <{else}> <{$block.content}> <{/if}> |
5.接著修改style.css加入 . blockTitle 以及 . blockContent 的樣式設定。
四、套用佈景
1.建議加入「版面風格」區塊，方便切換佈景，並記得到偏好設定將新的佈景加入選項。
2.修改基本CSS，如使用者選單（id="usermenu"）或主選單（id="mainmenu"）
| #usermenu a,#mainmenu a{ display: block; font-size: 12px; text-decoration: none; color: #4169E1; margin:3px; padding:2px; } |
#usermenu a:hover ,#mainmenu a:hover{ color: White; background-color: #3F74A2; } |
3.若要垂直靠上（如id="content"），請加入「vertical-align:top;」即可。
五、有區塊才顯示（避免一堆無謂的空白）
1.有「上中區塊」才顯示（若網站沒套用任何區快到上中區塊呈現區，則整區消失）：
| <{if $xoBlocks.page_topcenter}>區塊樣板語法<{/if}> |
(1) 上左區塊：$xoBlocks.page_topleft
(2) 上右區塊：$xoBlocks.page_topright
(3) 上中區塊：$xoBlocks.page_topcenter
(4) 下左區塊：$xoBlocks.page_bottomleft
(5) 下右區塊：$xoBlocks.page_bottomright
(6) 下中區塊：$xoBlocks.page_bottomcenter
(7) 左區塊：$xoBlocks.page_left
(8) 右區塊：$xoBlocks.page_right