:::

7. 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;
    }

     


:::

書籍目錄

展開 | 闔起

線上使用者

36人線上 (6人在瀏覽線上書籍)

會員: 0

訪客: 36

更多…