Tad 教材網 - 線上書籍

:::

XOOPS佈景製作
=========

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/theme/04.zip)

[下載基本佈景練習檔](http://120.115.2.76/tad/tad_book3/file/theme/school2010.zip)

下載區塊練習背景圖：[圖一](http://120.115.2.76/tad/tad_book3/file/theme/block_bg.png)

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達到和別的區域區隔效果：

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; 
 }

:::