Tad 教材網 - 線上書籍

:::

6-2 tad2017/css/style.css

7-1 tad2017/config.php next

\[1061\] XOOPS佈景設計
==================

[![](http://tad0616.net/uploads/dl.gif)](https://www.tad0616.net/uploads/tad_book3/file/42/07.pdf)

### 一、 關於 theme\_css.tpl

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

1. 額外設定可以彌補現有架構欄位之不足，提供佈景開發者一個簡易的新增欄位途徑： ```
  <pre class="brush:php;gutter:false;">
  //字型設定
  $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');
  ```
2. name用來讓佈景套用
3. text是設定界面的項目名稱，desc則是設定說明。
4. type有text（文字框）、color（挑顏色）、textarea（大量文字）、yesno（是否單選）、file（上傳框）、array（選項）等類型。
5. default 是該欄位預設值，若預設值中有中文，或是要套用語系（語系在 language 下），那麼，請寫成類似這樣： ```
  <pre class="brush:php;gutter:false;">
  $theme_config[$i]['default']=constant('語系常數');
  $theme_config[$i]['default']=constant('TF_TOPMENU_DEFAULT');
  ```
6. 若欄位類型為 array ，其預設值格式為 json 格式，例如：
7. ```
  <pre class="brush:jscript;gutter:false;">
  [{"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"}]
  ```
 
### 三、 內建五種滑動圖文

```
<pre class="brush:xml;gutter:false;">

<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/slideshow_responsive.tpl"}>

<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/slider/amazingslider1.tpl"}>

<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/slider/amazingslider2.tpl"}>

<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/slider/amazingslider3.tpl"}>

<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/slider/sliderman.tpl"}>
```

###   
 四、 內建四種導覽選單

```
<pre class="brush:xml;gutter:false;">

<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/navbar.tpl"}>

<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/menu/cssmenu/menu.tpl"}>

<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/menu/superfish/menu.tpl"}>

<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/menu/nav-pills/menu.tpl"}>
```

###   
 五、 製作縮圖

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

1. <{$xoops\_langcode}>：語系（lang）
2. <{$xoops\_charset}>：語系編碼（charset）
3. <{$xoops\_sitename}>：網站名稱
4. <{$xoops\_slogan}>：網站口號
5. <{$xoops\_pagetitle}>：頁面標題
6. <{$xoops\_isuser}>：是否有登入
7. <{$xoops\_userid}>：使用者編號
8. <{$xoops\_uname}>：登入帳號
9. <{$xoops\_isadmin}>：是否為管理員
10. <{$xoops\_theme}>：使用佈景名稱
11. <{$xoops\_imageurl}>：佈景路徑
12. <{$xoops\_themecss}>：佈景CSS路徑
13. <{$xoops\_requesturi}>：執行的網址
14. <{$xoops\_dirname}>：XOOPS目錄
15. <{$xoops\_banner}>：廣告
16. <{$xoops\_avatar}>：使用者圖像（XOOPS2.4.3新增）
17. <{$xoops\_usergroups}>：使用者所屬群組（XOOPS2.4.3新增）
18. <{$xoops\_url}>：網址
19. <{$xoops\_rootpath}>：實體路徑
20. <{$xoops\_url}>：網址
21. <{$xoops\_version}>：xoops版本
22. <{$xoops\_upload\_url}>：上傳目錄網址
 
### 七、區塊設定圖示

1. 在 xoops.css 中加入以下設定 ```
  <pre class="brush:css;gutter:false;">
  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);
  }
  ```
2. [下載圖示](https://www.tad0616.net/uploads/tad_book3/file/42/block_config.zip)，並解壓到佈景的 images 中
3. 如果設定符號不是放在區塊，兒是在其他如頁尾的地方，請自行在其上一層容器加上 position: relative; 的CSS設定，例如：
  
   ```
  <pre class="brush:css;gutter:false;">
  #footer {
      background: #123456;
      color: #fff;
      text-align: center;
      padding: 30px 0px;
      margin-top: 30px;
      position: relative;
  }
  ```

:::