作者 主題: opencart2.x 模版製作教學  (閱讀 1637 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
opencart2.x 模版製作教學
« 於: 六月 10, 2015, 06:29:13 下午 »
opencart2.x 的模版與 opencart1.5.x 的不能通用,因為 opencart2.x 開始模版都是響應式的,因此代碼會有變化,但是 opencart 的模版都是繼承自 default(預設模版)的因此只需製作需要改變的檔案即可,缺少的檔案都會由 default 資料夾存取,所以 default 資料夾也不可以刪除...


底下的示範會說明如何以 default(預設模版)為基礎來建立自己風格的模版,首先請先複製一份 default(預設模版)改名為 mystyly(不要用中文),然後進入模版目錄 mystyle/template 目錄內刪除 common 以外的資料夾


再進入common 資料夾內,只保留 header.tpl(頁首)和 footer.tpl(頁尾)其餘全數刪除,因為我只想修改這兩個地方,其他都不變所以不需留著,程式會自動到 default(預設模版)內找對應檔案,tpl 就是模版檔的副檔名,而 header.tpl(頁首)和 footer.tpl(頁尾)是全站共用的,因此更改了這兩個模版,所有頁面的頁首和頁尾都會隨之變動...


每個模版裡至少有三個資料夾 :
1、image:用來放置模版用到的圖片,圖片上盡量不要包含文字,以免無法使用於多語言環境...
2、stylesheet:用來放置模版用到的樣式表檔案(CSS)
3、template:用來放置所有模組的模版,每個模組的模版都以資料夾分類(    account、    affiliate、    checkout、    common、    error、    information、    mail、    module、    payment、    product)
除了這三個資料夾外你也可以增加自己的資料夾,如:js、fonts...
另外在 view 內有個 javascript  資料夾,是用來放置所有模版通用的 js 或 css,你也可以在裡面增加自己的腳本,來供網站所有模版調用


打開 header.tpl 一看,有人可能會昏倒,這一堆<?...?>包住的程式碼,你可以移動但不能刪除,他們的作用等同於ECSHOP內的SMARTY標籤,若是仔細看你就會發現在 body 裡面其實只有三個大區塊...
大約在第32行必須將
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
default 改為模版目錄
<link href="catalog/view/theme/mystyle/stylesheet/stylesheet.css" rel="stylesheet">


忽略 <?...?> 包住的程式碼之後,剩下的是HTML,這些HTML程式碼也不需要你去修改他,而是要找出要修改的地方式那個CSS設定,然後從 stylesheet/stylesheet.css 找到相關樣式設定,例如:我想把頂部導航背景改為深黑半透明,而頂部導航是由<nav id="top">CSS控制的,所以要找 stylesheet/stylesheet.css  #top 的樣式設定


background-color 是設定背景顏色,因為要讓他具有半透明效果,因此必須改為 rgba 模式,background-color: rgba(30, 30, 30, 0.85);,進入頁面就能看到變化,半透明效果是因為沒有元素重疊所以不明顯...


所以增加一些額外的CSS設定,將頂部導航固定住,然後捲動頁面就能看出差異了



footer.tpl 就只有一個大區塊,裡面包含了一些文章連結和版權資訊,其中「商店資訊、客戶服務、其他服務、會員中心」是沒有連結的標題,我想讓他文字顏色與連結不同,但是這些標提示變數並不是文字,因此你必須從瀏覽器得知大概位置,藉助 FireFox 的 Firebug 可以快速的找到相關位置,並得知CSS所在行數


把標題改成黃色,字型用微軟正黑體,再把字放大一點...



版權資訊包含了一般和連結兩種字,並且CSS用的是全站的通用設定,因此你在CSS中會找不到對應的樣式設定,但在 Firebug 中可以看出他是裝在P標籤內的


這時就可以加入自己的樣式設定



關於含連結的版權文字,若是沒有單獨設定,會影響到上方的文章連結設定,所以要單獨建立樣式



在 HTML5 和 CSS3 裡新增了很多時用的效果,但是支援 HTML5 的瀏覽器標準不一,反倒是CSS3的支援較為普遍,不過也些語法還是稍嫌複雜,因此你也可以用 CSS3 語法產生器來快速產生需要的語法...
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php