7. XOOPS可調式佈景開發（下）

一、關於 theme_css.tpl

theme_css.tpl 裡面分別為「網頁文字設定」、「連結文字設定」、「背景設定」的CSS設定，另引入 theme_css_blocks.tpl（區塊標題的樣式設定檔）及theme_css_navbar.tpl（導覽列的樣式設定檔）
theme_css.tpl 就是用來將使用者在後台針對「網頁文字」、「連結文字」、「背景」、「區塊標題」、「導覽列」設定的值套用到佈景上。
亦可將theme_css.tpl 的內容複製到頁面中使用，不見得要照單全收。

二、 config2.php額外設定

額外設定可以彌補現有架構欄位之不足，提供佈景開發者一個簡易的新增欄位途徑：

//字型設定
$i++;
$theme_config[$i]['name']    = "font_family";
$theme_config[$i]['text']    = TF_FONT_FAMILY;
$theme_config[$i]['desc']    = TF_FONT_FAMILY_DESC;
$theme_config[$i]['type']    = "text";
$theme_config[$i]['default'] = constant('TF_FONT_FAMILY_DEFAULT');

name用來讓佈景套用
text是設定界面的項目名稱，desc則是設定說明。
type有text（文字框）、color（挑顏色）、textarea（大量文字）、yesno（是否單選）、file（上傳框）、array（選項）等類型。
default 是該欄位預設值，若預設值中有中文，或是要套用語系（語系在 language 下），那麼，請寫成類似這樣：
```
$theme_config[$i]['default']=constant('語系常數');
$theme_config[$i]['default']=constant('TF_TOPMENU_DEFAULT');
```
若欄位類型為 array ，其預設值格式為 json 格式，例如：

[{"name":"回首頁","url":"{XOOPS_URL}","target":"_self"},
{"name":"最新消息","url":"{XOOPS_URL}/modules/tadnews/","target":"_self"},
{"name":"電子相簿","url":"{XOOPS_URL}/modules/tadgallery/,"target":"_self""},
{"name":"檔案下載","url":"{XOOPS_URL}/modules/tad_uploader/","target":"_self"},
{"name":"聯絡我們","url":"{XOOPS_URL}/modules/ugm_contact_us/","target":"_self"}]

三、內建五種滑動圖文

<!-- 預設滑動圖文（可自適應） -->
<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/slideshow_responsive.tpl"}>
<!-- 進階滑動圖文 1（固定寬度） -->
<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/slider/amazingslider1.tpl"}>
<!-- 進階滑動圖文 2（可自適應） -->
<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/slider/amazingslider2.tpl"}>
<!-- 進階滑動圖文 3（可自適應） -->
<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/slider/amazingslider3.tpl"}>
<!-- sliderman 滑動圖文（固定寬度） -->
<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/slider/sliderman.tpl"}>

四、內建四種導覽選單

<!-- 預設選單（$menu_var_kind 建議用 my_menu） -->
<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/navbar.tpl"}>
<!-- CSS選單（$menu_var_kind 建議用 all） -->
<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/menu/cssmenu/menu.tpl"}>
<!-- superfish選單（$menu_var_kind 建議用 all） -->
<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/menu/superfish/menu.tpl"}>
<!-- nav-pills 選單（$menu_var_kind 建議用 all） -->
<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/menu/nav-pills/menu.tpl"}>

五、製作縮圖

Firefox可安裝此附加元件來擷取螢幕：https://addons.mozilla.org/zh-TW/firefox/addon/easyscreenshot/?src=api
擷取螢幕，存成screenshot.png，並將圖片大小縮至450px，接著，再轉檔為shot.gif，並將其寬度縮至150px
直接上傳到網站並套用，或壓縮成zip檔，準備釋出。

六、 xoops內建的樣板標籤

<{$xoops_langcode}>：語系（lang）
<{$xoops_charset}>：語系編碼（charset）
<{$xoops_sitename}>：網站名稱
<{$xoops_slogan}>：網站口號
<{$xoops_pagetitle}>：頁面標題
<{$xoops_isuser}>：是否有登入
<{$xoops_userid}>：使用者編號
<{$xoops_uname}>：登入帳號
<{$xoops_isadmin}>：是否為管理員
<{$xoops_theme}>：使用佈景名稱
<{$xoops_imageurl}>：佈景路徑
<{$xoops_themecss}>：佈景CSS路徑
<{$xoops_requesturi}>：執行的網址
<{$xoops_dirname}>：XOOPS目錄
<{$xoops_banner}>：廣告
<{$xoops_avatar}>：使用者圖像（XOOPS2.4.3新增）
<{$xoops_usergroups}>：使用者所屬群組（XOOPS2.4.3新增）
<{$xoops_url}>：網址
<{$xoops_rootpath}>：實體路徑
<{$xoops_url}>：網址
<{$xoops_version}>：xoops版本
<{$xoops_upload_url}>：上傳目錄網址

七、區塊設定圖示

在 xoops.css 中加入以下設定

a.block_config {
  position:absolute;
  top:10px;
  right:10px;
  display: block;
  width: 16px;
  height: 16px;
  background-image: url(../images/block_config.png);
}

a.block_config:hover {
  background-image: url(../images/block_config_hover.png);
}

下載圖示，並解壓到佈景的 images 中
如果設定符號不是放在區塊，兒是在其他如頁尾的地方，請自行在其上一層容器加上 position: relative; 的CSS設定，例如：
```
#footer {
    background: #123456;
    color: #fff;
    text-align: center;
    padding: 30px 0px;
    margin-top: 30px;
    position: relative;
}
```