Tad 教材網 - 線上書籍

:::

\[972\]CSS打造XOOPS佈景
===================

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

### 一、模組樣板基本概念

1.模組樣板位置：/modules/模組/templates/\*.html  
 2.裝模組時，XOOPS會將模組樣板存入資料庫，以便從「後台→模板管理」來控制之。  
 3.改模組樣板有兩種方式：  
 (1) 徹底的改：直接修改「模組/templates/\*.html」，上傳，更新模組即可。  
 (2) 安全的改：線上新增一樣板組，到偏好設定改用新樣板組，然後修改樣板組即可。  
 a.「後台→模板管理→新樣板組名稱」  
 b.「後台→系統選項→一般設定→基本參數設定→預設樣板組」

### 二、設計頁面跳轉畫面

1.跳轉頁面樣板檔案：「modules/system/templates/system\_redirect.html」  
 2.修改完，上傳，更新模組即可。

![](http://tad0616.net/uploads/tad_book3/image/bluefish/tad049.png)

### 三、快速把<div>加上圓角

1.http://www.dillerdesign.com/experiment/DD\_roundies/  
 2.將DD\_roundies\_0.0.1a-min.js放到佈景資料夾中。  
 3.要套上圓角的<div>加上「class="樣式名稱"」，然後，在<head>中加入：  
 <script src="<{$xoops\_url}>/themes/佈景資料夾/DD\_roundies\_0.0.1a-min.js"></script>  
 <script>  
 DD\_roundies.addRule('.樣式名稱', 10);  
 </script>

### 四、簡易修改模組外觀

1.不見得每個模組都有套用樣板，即使有套用樣板，其可修改的程度也不同，端視該模組頁面套用的樣板的精細程度。  
 2.像底下這種是最混的，但也最好改（底下就是插入一個標題圖片，圖片是先直接放到該模組的images中）：  
 <{$toolbar}>  
 <img src="<{$xoops\_url}>/modules/tad\_cbox/images/cbox.png">  
 <{$css}>  
 <{$content}>  
   
 3.越精細，代表修改彈性越大，但相對的也越複雜。  
 4.樣板中，除了<{$xxx}>這樣的樣板標籤不能修改外，其餘的都可以自行修改！

![](http://tad0616.net/uploads/tad_book3/image/bluefish/tad050.png)

### 五、使用「自訂樣板組」的必須特別注意！

1.網站使用自訂樣板組者，若是後來有修改模組或區塊的樣板，那麼，上傳後，即使是更新模組也是無效果的。  
 2.此時，您可以進到樣板組的設定畫面，並直接編輯之，或者將樣板全部刪除，然後重新產生之，若不產生也沒關係，XOOPS會自動讀取 default 樣板組。  
 3.樣板組修改後，可自行下載儲存，日後需要時，亦可上傳重複使用，也可分享給他人使用。

:::