4. 製作區塊樣板

下載基本佈景練習檔

下載區塊練習背景圖：圖一

1. 修改block.html的主架構

    (1) 區塊標題：<{$block.title}>
    (2) 區塊內容：<{$block.content}>

2. 修改xoops.css中的區塊外觀設定

3. 每個區塊放置區都可引入不同的區塊樣板。

4. 安裝您的佈景：「管理區→一般設定→基本參數設定 」進行佈景安裝

    (1) 「預設佈景（theme）」：選擇您做的佈景
    (2) 「從/themes/yourtheme/templates更新模組的樣板文件」選「是」。
    (3) 「用戶可選擇的佈景」：使用者可套用的佈景，一定要包含「預設版面風格」。
    (4) 登出後，佈景始生效。

5. 修改CSS檔，開啟style.css來修改之，例如：

    (1) 設定body字型大小（font-size）為12px
    (2) 設定連結的顏色（color），或者是否去除底線（text-decoration）
    (3) 加入.blockTitle設定，設定區塊標題。
    (4) 加入.blockContent，設定區塊內容。
    (5) 可用以下css設定來加入文字陰影：

text-shadow: #cfcfcf 1px 1px 0px;
filter: progid:DXImageTransform.Microsoft.Shadow (color="#cfcfcf", strength="3", direction="135");

6. 請修改中間區塊的外觀（或右邊），並另存成新的區塊樣板檔，如：center_block.html

7. 修改theme.html中，該區塊放置區所引入的樣板檔，如：

<{foreach item=block from=$xoBlocks.page_topcenter}>
     <{includeq file="$theme_name/xotpl/center_block.html"}>
<{/foreach}>

8. 區塊樣板可以使用不同id達到和別的區域區隔效果：

<div class="block" id="center_black"> …略…</div>

9. 樣式設定時，便可針對該區域設定外觀：

.center_block .blockTitle{
    border-bottom:1px dotted #D7D7D7;
    padding:3px 6px;
    margin-bottom:4px;
    color:gray;
    font-size:24px;
    text-shadow: #cfcfcf 1px 1px 0px;
}