線上書籍

Home

[972]CSS打造XOOPS佈景

一、模組樣板基本概念

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

二、設計頁面跳轉畫面

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

三、快速把<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}>這樣的樣板標籤不能修改外,其餘的都可以自行修改!

 

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

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