17. 調整網站樣板

一、 XOOPS的樣板概念

1. XOOPS的畫面是透過各種樣板所組成的，例如佈景樣板、模組頁面樣板、區塊樣板等。
2. 所謂樣板，就是HTML檔。透過Smarty佈景引擎，將網站內容和樣板做結合，以產生使用者看到的畫面。這過程會產生快取檔於xoops_data\caches\smarty_compile
3. 當偏好設定「自動編譯您修改的樣板檔？」選擇「否」的時候（預設值），系統會優先讀取快取檔，而不會真的去運行樣板檔。因此當樣板有異動時，往往無法立即生效。
4. 模組或區塊不見得有樣板，但如果有樣板，則意味著：我們可以自己修改。
5. 修改並不是直接去修改真正的模組或區塊樣板檔案，而是透過後台「樣板」功能來修改。

二、 後台的「樣板」功能

1. 後台的「樣板」主要有兩大功能：1.產生可以讓您修改的樣板檔；2.線上修改樣板。
2. 要產生樣板檔，就必須先設定目前佈景下的modules目錄為可讀寫的狀態，例如目前用的是school2013則「themes/school2013/modules」要設成777。
3. 同一個模組或區塊頁面，不同的佈景可以有不同的外觀（樣板）。
4. XOOPS會優先讀取佈景下modules中的樣板，故若模組的樣板有大幅更新，導致之前自己做的或者先前產生的樣板不適用，那會導致畫面不正常。解決方法有三：一是後過後台樣板重新強制產生樣板檔；二是直接刪掉目前佈景下的modules/該模組名稱的目錄；三則是自行修改該樣板以符合新版（這難度很高）。

三、 以修改「搜尋」區塊的畫面為例

1. 因受到bootstrap的影響，搜尋區塊在某些佈景（如：zetagenesis）或1024的解析度下輸入框會因為太長而導致區塊破版，因此，可以透過樣板修正之。
2. 進入後台，選擇「樣板」。「選擇佈景」點選目前使用的佈景；「強制產生檔案」選「是」（若選「否」則已存在的樣板就不會再產生）；「選擇模組」請選system，因為評論是屬於系統功能，換言之，凡不屬於單一模組專用的功能，八成都在system中。
3. 下一步是挑選樣板檔，大部分我們可以從檔名猜測是否是我們要修改的樣板，例如「搜尋區塊」就請選擇「system_block_search.html」。
4. 送出後，再次回到「樣板」界面，從左側開啟已產生的樣板檔，以編輯之。
5. 若改壞了，只要將該樣板刪除即可恢復原貌！所以，不用擔心會改出問題！

四、 常用的BootStrap語法（http://kkbruce.tw）

1. 可以用流動網格將要編輯的內容包起來，如：<div class="row-fluid">內容</div>，此為一個水平的區域，裡面的元件可用class="span3"的方式做水平排列。
2. 內容中可加入「class="span12"」來控制元件大小（1~12），span12即100%。

   <div class="row-fluid">
     <input type="text" name="query" size="14" class="span12" />
   </div>

3. 連結可加入class="btn"將之變成按鈕。class="btn btn-primary"可換按鈕顏色。

五、 常用的CSS語法（http://css.doyoe.com）

1. 可在元件中加入「style="CSS語法"」來控制元件外觀，CSS語法以「;」隔開。
2. 文字大小：「font-size:文字大小px」，顏色：「color:顏色碼」，背景色：「background-color:顏色碼」，行高：「line-height:150%」，水平對齊方向：「text-align:right」，垂直對齊方向：「vertical-align:middle」，陰影：「text-shadow:1px 1px 1px 顏色碼」
3. 背景圖：「background-image:url(圖檔連結)」，背景重複：「background-repeat:no-repeat」，背景位置：「background-position:left top」
4. 框線：「border:1px solid 顏色碼」，內距：「padding:距離px」，外距：「margin:距離px」