前言

先前研究了一下各家 Joomla Template 提供商
發覺 T3 版面最乾淨舒適，後台介面也比較人性化
因為專案需求，又要開始我的 T3 Template 撞牆期了~

事前準備

1. T3 官方文件檔 很豐富，有關 Template 的文章都大概瀏覽一遍。
    幸好英文用字簡單，還有影片可以觀看!

2. 這次使用的 Template 名稱是 purity-iii
    由 JoomlaArt 提供，它也有官方文件。

3. 熟悉 T3 Template 後台操作及功能。
    有 Less Compiler To CSS、Development Mode、Optimize CSS、Theme…等

初步了解

1. T3 所有的 CSS 檔 ，是由  LESS Compiler 而成。
   所以不要直接調整 CSS 檔，要調整 LESS檔，否則重新 Compiler 之後會功虧一簣!!

2. 不知道如何使用 LESS 的人，可以直接加入一支 custom.css 去控制版面。
    路徑在 C:/xampp/htdocs/專案名稱/templates/purity_iii/css/custom.css
    LESS Compiler 時，不會去異動到 custom.css。

3. 會使用LESS的人，要控制版面就開啟以下路徑，裡面都是 LESS檔
   C:\xampp\htdocs\專案名稱\templates\purity_iii\less

4. 預設都會壓縮 CSS 檔
    所以用開發工具檢視時，會看不出來是哪一支檔案控制，之後會說明要如何Debug

5. 可以自訂 Theme 樣式
    會另有一篇說明如何使用，一開始誤解它的用途，後來才搞懂它用來幹麻…

前置作業 & 調整版面

1. 使用 chrome 進入前台，打開 F12，看一下 CSS
    檔名長得非常奇怪，感覺不是很正常的css檔，這樣是要怎調整版面?
    千萬不要看到.css就馬上去調整，因為將來會後悔!!
    路徑長這樣  http://localhost/專案名稱/t3-assets/css/css-f5a72.css?t=875
    哪時候又多出來不認識的 t3-assets ??!!  心中充滿很多疑問~~~
    

2. 回到 Joomla 後台 ，  Template purity-iii 設定
   打開 Development Mode
   剛剛很奇怪的 t3-assets 在這裡設定的，壓縮過後的CSS檔會放這個資料夾裡面。

3. 再回到前台重整，看一下 CSS 路徑
    目前是 開發模式，會顯示到底它是讀取哪一支檔案~
    路徑長這樣，檔名也是非常奇怪
    http://localhost/專案名稱/t3-assets/dev/socialpress/templates.purity_iii.less.components-addons.less.css
    千萬不要看到.css就馬上去調整，因為將來會後悔!!

4. 從檔名判斷要修改哪一支LESS檔
   開發模式會顯示以下路徑，抓取關鍵字 components-addons.less
   http://localhost/專案名稱/t3-assets/dev/socialpress/templates.purity_iii.less.components-addons.less.css
 

5. 開啟LESS檔，就可以開啟編輯了!!!!
   路徑 C:\xampp\htdocs\專案名稱\templates\purity_iii\less\components-addons.less
   目前是開發模式，所以改完就可以馬上去前台觀看，不需要 compiler唷~

調整完畢

頁面調整完畢，要記得做幾件事~

1. 關閉 Development Mode

2. 將 Less Compiler To CSS

補充說明

以上的調整方式有些缺點，因為我們是直接修改Template底下的Less檔

當有一天我們更新T3 Framework的時候，Template底下的Less檔就會被覆蓋掉了！

於是發展出一個 Local 資料夾，詳見 【Joomla】《T3》 Local 資料夾的奧妙