線上書籍

Home

[1061] XOOPS佈景設計

一、 關於 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. 額外設定可以彌補現有架構欄位之不足，提供佈景開發者一個簡易的新增欄位途徑： //字型設定 $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 下），那麼，請寫成類似這樣： $theme_config[$i]['default']=constant('語系常數'); $theme_config[$i]['default']=constant('TF_TOPMENU_DEFAULT');
  6. 若欄位類型為 array ，其預設值格式為 json 格式，例如：
  7. [{"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"}>
五、 製作縮圖
  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 中加入以下設定 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. 下載圖示，並解壓到佈景的 images 中

  3. 如果設定符號不是放在區塊，兒是在其他如頁尾的地方，請自行在其上一層容器加上 position: relative; 的CSS設定，例如：

    #footer { background: #123456; color: #fff; text-align: center; padding: 30px 0px; margin-top: 30px; position: relative; }