Joomla! 1.0.12網站建置2-安裝佈景主題樣板(多圖)
Joomla!1.0.12網站建置2-安裝佈景主題樣板
版本:2008/07/05 V1.0.1
Joomla!網頁的外觀是使用樣板(Templates)來管理的,只要更換樣板,就能把網頁的樣式與呈現都改變掉,在本文我用Free的樣板:JSN Epic Free 2.0來示範如何輕易的變更網站的外觀。
下載資訊
- JSN Epic Free 2.0
- 商業使用必須購買PRO版本(美金25元)
將檔案下載並解壓縮到暫存目錄後,可以發現有兩個子目錄:for_joomla_10是給Jomla! 1.0.x使用,而for_joomla_15則是給Joomla!1.5使用,我們使用的是1.0的版本。首先要安裝的是擴充模組exmenu(Extended Menu),用來擴充選單功能的套件。
我們可以把Jommla!的模組(Modules)視為Blog系統裡的側邊欄位(或稱插入欄位、自由欄位),不同的模組會以不同的樣式顯示在前端的網頁裡。Joomla!另一個重要的元件是選單,透過選單我們才能建立各個網頁之間的連結。下列步驟複製已經存在的mainmenu而新增一個選單toolbarmenu:
- 管理區功能表→【選單】→【選單管理】
- 點選「mainmenu」,再按右上方的〔複製〕
- 新選單名稱:toolbarmenu
- 新模組名稱:toolbarmenu
Joomla!預設的選單模組是「mod_mainmenu」,它的功能較為簡單,我們可以上載擴充模組「exmenu」來取代預設的選單模組。這裡要能分辨選單和選單模組的差異,選單模組是把選單呈現在前端網頁的設定,二者不要混淆。
首先將jsn_epic_free_2.0_unzip.me.first.zip解壓縮,我們需要的檔案是解開的for_joomla_10mod_exmenu.zip。請依下列步驟來安裝exmenu模組:
安裝exmenu模組
- 登入管理區後,點選功能表【新增或移除程式】→【模組】,表示要新增模組。
- 先用〔瀏覽...〕找到 上述下載來的mod_exmenu.zip檔案後,再按〔上傳檔案 & 安裝〕
- 稍待一會後就會出現安裝資訊的繼續網頁,按「繼續...」
- 在新增模組網頁往下捲動能看剛安裝的mod_exmenu模組的話,就是安裝成功了。由此例可以了解模組的名稱固定皆以 mod_ 開頭。
新增兩個Extended Menu模組
在一個Joomla!的網頁裡我們可以同時建立多個選單與選單模組,因此我們可以複製mod_exmenu再針對複製後的新模組來修改。複製mod_exmenu的步驟如下:
- 在功能表裡找到【模組】→【網站模組】→勾選「Extended Menu」
- 按右上方的〔複製〕圖示
- 在「Extended Menu」下方會出現「Copy of Extended Menu」
- 點擊「Copy of Extended Menu」連結以進入本項目的設定網頁,依下列指示修改欄位:
- 標題:修改成此項目的標題,如「Ext Toolbar選單」
- 版面位置:toolbar
- 已發佈:變更成「是」
- Menu Name:在此處指定要合用的選單代碼,請先選用「toolbarmenu」
- 按右上方的〔儲存〕將上列變更儲存起來
再建立另一個名為「Ext 主選單」的Extended Menu模組:
- 在功能表裡找到【模組】→【網站模組】→勾選「Extended Menu」
- 按右上方的〔複製〕圖示
- 在「Extended Menu」下方會出現「Copy of Extended Menu」
- 點擊「Copy of Extended Menu」連結以進入本項目的設定網頁,依下列指示修改欄位:
- 標題:修改成此項目的標題,如「Ext 主選單」
- 版面位置:left
- 已發佈:變更成「是」
- Menu Name:在此處指定要合用的選單代碼,請先選用「mainmenu」
- 按右上方的〔儲存〕將上列變更儲存起來
安裝新的佈景主題
Joomla!的模組分成網站與管理區兩大類,分別用來設定前端網站和後端管理區的佈景。管理區的樣板是管理人員在使用的,現有的應該足夠使用,建議不要修改,只要變更一般訪客會看到的前台網頁樣板即可。以下為新增JSN Epic Free 2.0佈景樣板到Jommla!前端網頁的步驟:
- 由Joomla!管理區功能表→【安裝或移除程式】→【佈景主題 - 網站】進入佈景主題維護網頁
- 按〔瀏覽〕並找到要上傳的for_joomla_10jsn_epic_free_2.0_j10.zip,
選取好後按〔上傳檔案 & 安裝〕 - 看到上傳 「template - 成功」字樣後按〔繼續 ...〕
- 點選「JSN_Epic_Free」後按右上方的〔預設〕,以啟用此佈景主題
- 重新整理前端網頁,網站已經套用新的佈景樣板了
依新佈景來設置網站
安裝網站的小圖示
網站小圖示指的是顯示在瀏覽器網址左側的圖形,我們可以依下列步驟把自己設計的圖示顯示在自己的網站上:
- 使用圖示製作工具產生16px X 16px的.ico檔案,檔名固定為favicon.ico
- 把favicon.ico複製到「Joomla!安裝目錄images」資料夾裡
- 如果重新整理後看到的圖示仍未改變的話,先清除瀏覽器的暫存檔案後再檢視應該就OK了
設定上方的標題區
變更Logo圖示
- 我們先使用功能表→【網站】→【媒體管理者】新增一個存放圖檔的新目錄(如建立JERRY目錄),再把要做為網站首頁Logo的圖檔上傳到此目錄裡
- 再由【網站】→【佈景主題管理】→【網站佈景主題】點選「JSN_Epic_Free」後按右上方的〔編輯HTML〕
- 網頁顯示jsn_epic_free/index.php的檔案內容,找到$logo_path後,將其路徑修改成新增目錄的Logo檔名
將 $logo_path = "templates/jsn_epic_free/images/logo.png";
改成 $logo_path = "images/JERRY/logo.png";
- 依新的logo圖檔的尺寸大小修改$logo_width與$logo_height。修改後記得按右上方的〔儲存〕
- 當然直接用文書編輯程式修改樣板的index.php是更快的方法,檔案完整路徑是c:\xampp\htdocs\Joomla目錄\templates\jsn_epic_freeindex.php
增加Suckerfish選單
接著在Logo圖形下方加入下拉式功能選單。
- 由管理區功能表→【模組】→【網站模組】找到先前建立的「Ext Toolbar選單」,點擊以進入設定網頁
- 顯示標題:否
- 版面位置:toolbar
- Menu Class Suffix:修改成「-suckerfish」
- Expand Menu:是
- 確認「Enable Menu Template」為「是」
迄今的成果如下圖所示,中間的黑色長條就是「toolbar」區,顯示的是「Ext Toolbar選單」模組:
增加圖片展示區
我們準備在標題區加入圖片展示區域,要使用的是JSN ImageShow模組。
- 由http://www.joomlashine.com/index.php?option=com_docman&task=doc_download&gid=3&Itemid=39下載JSN ImageShow Free模組
- 由管理區功能表→【新增或移除程式】→【模組】上傳並安裝mod_jsn_imageshow_free_1.0.6_j10.zip
- 由【模組】→【網站模組】裡找到JSN
ImageShow Free點擊之以進入設定網頁
- 顯示標題:否
- 版面位置:header
- 已發佈:是
- Height(px):250
- Image
Folder:預設是/images/stories,我們可以用媒體管理建立新的目錄,再將之改成新的目錄(如images/photo,實體路徑是c:\xampp\htdocs\Joomla目錄\images\photo),要展示的圖片即存入指定的目錄裡;JSN ImageShow
Free版本最多只能顯示10個圖片,若需要更多功能則請購買PRO版本 - 把圖片複製到images/photo裡後重整前端網頁就能看到圖片的展示特效了。在設定網頁裡有更多的設定請自行測試、研究。
設定左方側邊欄位
變更主選單樣式
JSN Epic樣板有三種選單格式:Suckerfish、BulletTree與DivBar,Suckerfish
menu在前文已出現過,現在再來設定BulletTree式的選單樣式:
- 管理區功能表→【模組】→【網站模組】,找到「Extended Menu」後複製成「Ext 主選單」
- 修改「Ext 主選單」模組:
- 顯示標題:否
- 版面位置:left
- Menu Class Suffix:-bullettree
- Module Class Suffix:-box box-grey
- Expand Menu:否
- 按右上方的〔儲存〕
變更登入表單樣式
- 在【模組】→【網站模組】裡點選「登入表單」模組
- 變更下列欄位的設定值:
- 模組CSS字尾:-box box-green icon-user
- 按右上方的〔儲存〕
變身前 | 變身後 |
設定右方側邊欄位
變更投票樣式
- 在【模組】→【網站模組】裡點選「RSS新聞供稿」模組
- 變更下列欄位的設定值:
- 模組CSS字尾:-box box-blue icon-selection
- 按右上方的〔儲存〕
變身前 | 變身後 |
停止發佈不需要的模組
再由【模組】→【網站模組】裡把不需要的mod_mainmenu的所有模組都停止發佈,操作後前端網頁裡就看不到這些預設的選單了;找出所有mod_mainmenu模組的方法是由右上方的「- 選擇類型 -」裡選取mod_mainmenu。
再將「新聞快報」模組的版面位置由top改為right。
最後成果
最後的網頁成果如下或拜訪http://jdev.tw/joomla檢視(Sorry, 網站搬家後已無Demo站了):
##
您可能也會有興趣的類似文章
- Joomla! 1.0的系統目錄結構 (0則留言, 2008/06/28)
- Joomla! 1.0.12網站建置 (多圖) (1則留言, 2008/06/22)
- 解決Joomla! 突然出現的鎖定圖示 (0則留言, 2008/07/11)
- Joomla! 1.0.12網站建置4-啟用統計模組 (1則留言, 2008/07/06)
- Joomla! 1.0.12網站建置3-如何預覽版面位置 (0則留言, 2008/07/05)
- 安裝Joomla! 論壇元件FireBoard (7則留言, 2008/07/13)
- JEvents中文化修改 (0則留言, 2008/06/20)
- 撰寫Joomla! 1.5元件的幾個重點 (0則留言, 2011/04/30)
- 在TS-109安裝TiddlyWiki與Joomla! (0則留言, 2007/11/29)
- 進階點的統計元件:JoomlaStats (0則留言, 2008/07/13)
- 試用TortoiseSVN 1.4 RC1–更新 (2則留言, 2006/09/06)
- [Thunderbird] 常用擴充列表說明;增強電子郵件的收納管理能力 (6則留言, 2007/03/31)
- 用Piwik建立自己的Google Analytics網站流量分析服務 (2則留言, 2010/08/06)
- 解決Thunderbird讀取大附件速度緩慢的方法 (2則留言, 2008/01/17)
- [WordPress] 顯示網頁的資料庫查詢次數與執行秒數 (0則留言, 2008/12/20)
阿~~剛剛搞定了~~不用麻煩您囉~~不過還是萬分感謝~!!
很高興你完成了!
簡睿你好,不知道你還有沒有在注意留言回覆?我用最新版的Joomla! 2.5.1,安裝了JSN Epic Free布景主題以及Extended Menu模組,但是不管我把Menu Class Suffix改成什麼風格(Suckerfish、BulletTree與DivBar),前台顯示出來的選單都完全不會有變化。但是如果是修改Module Class Suffix就會有反應。請問這是什麼問題呢?我搞了好幾天眼睛都快要花掉了,不知道可不可以提供給我一些意見?萬分感激!!我的MAIL是searfrank@gmail.com。
太贊了!萬分感謝!
感謝你的文章,給了我很大的啓發。有一點我不太明白,就是增加Suckerfish選單,是如何知道選單類型後綴的呢?比如Menu Class Suffix:修改成「-suckerfish」
還有比如:
修改「Ext 主選單」模組:
顯示標題:否
版面位置:left
Menu Class Suffix:-bullettree
Module Class Suffix:-box box-grey
——後面兩項您是如何知道的呢?謝謝
提供樣板的廠商的文件裡有提到啊。但時日已久,記不太清楚在那份文件看到的了…
簡睿您好:
稍早看過數位之牆的文章:企業網站blog化,我打算將目前的中小企業網站改版,本來想使用部落格型態的WordPress,看過你對Joomla的介紹後,又開始拿不定主意。
我主要需要產品介紹(購物車可另外搭配osCommerce,ecshop…)、新聞公告發布(促銷活動、抽獎活動、產品評論、旅遊訊息)、留言版,希望網友每次造訪都可以有新鮮感,就像部落格經常會發表新文章一般。
不知道可否給我一些簡短的建議,幫助我趕快下定決心~
感謝~
抱歉一直沒回覆,過年心情都鬆散了… :-)
我個人的意見是:如果你想要輕輕鬆鬆的管理網站的話,WordPress可能會較適合,WordPress架構清楚簡單,佈景或外掛的安裝或移除,都很直覺且簡單。
但Joomla!的話,就要有長期抗戰的準備,雖然我用它建置了網站,始終覺得它不是很好掌握,元件、模組、moblet等令人混淆難懂,建好站後要做修改,常常都找不到要由何處下手,經常要找個半天才能完成一個簡單的操作,有可能是資質魯鈍或沒有把Joomla!的基本觀念弄懂吧…
你可以參考How To Choose The Right CMS (http://www.webdesignerdepot.com/2009/01/how-to-choose-the-right-cms/)一文,此文作者很討厭Joomla!,但批評得太過於低貶Joomla!了。
簡睿您好,上次詢問的問題,還是沒解決,怪自已太笨,但這裡又有一問題,想來請教您。
以下是google的一段話:
在您驗證您是網站擁有者後,我們會提供您網站上網頁的完整統計資料和錯誤資訊。 如果您無法進行驗證,仍然可以使用網站管理員工具計劃、提交 Sitemap,以及檢視關於這些 Sitemap 的詳細資訊和您網站的基本資訊。
我們提供兩種驗證方式。 您可以上載含有指定檔名的 HTML 檔案,也可以在網站的索引檔案中新增中繼標記。 請在下面選擇您偏好的方式。
選擇驗證方式… 新增中繼標記 上載 HTML 檔
複製下列中繼標記,然後將它貼到網站首頁的第一個 區段 (第一個 區段之前)。
顯示範例 :
請將中繼標記置於 標記之後及 標記之前。
我的標題
網頁內容
問題如下:
在jsn中的 是在哪個位置呢? 我找半天,找不到,
能否告之一下,謝謝。
這是我們想將我們的網站的消息可出現在google 新聞網站上的問題,謝謝。另,我將手機號碼由信箱寄給您,如您方便,請打手機,我再回打給您,不用浪費您的費用,如您覺得線上說明即可,也是可以的,謝謝。
已回mail了.
用手機通 我可能會比較了解,謝謝。
請看mail哦。
簡睿您好,能否讓我打手機給您,您寫信至lalala35@gmail.com 留您手機 或mail 給我 我將我手機號碼給您,或者我在這裡留手機號碼?謝謝。麻煩您了。
簡睿您好,下面是我們網站最下面的字,要改的是這部份,
Free Joomla Templates by JoomlaShine.com
下面是找到主機內的語法,不知道要修改那地方(我照您意思做,卻出現嚴重錯誤,是不是改錯了)。能解一下嗎?謝謝。
<?php
/* jsn_debug.php @copyright (C) 2006-2008 JoomlaShine.com */
/*** REMOVAL OR MODIFICATION CODE BELLOW IS VIOLATION OF JOOMLASHINE.COM TERMS & CONDITIONS AND DEPRIVES OF ANY KIND OF SUPPORTS ***/
defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ );
if(strpos($copyright_text, ‘http://www.joomlashine.com’) == false) {
echo ‘Free Joomla Templates by JoomlaShine.com’;
}
?>
簡睿您好,我真的很呆,不了解您說的
用Free Joomla Templates by JoomlaShine.com搜尋\templates\jsn_epic_free裡的所有檔案,找到後修改掉即可意思。
我們是用智邦虛擬主機,剛才去智邦主機內的\templates\jsn_epic_free有看到一些語法中有 Free Joomla Templates by JoomlaShine.com 字眼,但卻改不了,請問,我是不是搞錯了,我是用網頁進入智邦的主機網站的,能否回答呢,感恩。
你先把本地的檔案修改好,再上傳到智邦的資料夾裡,用FTP client上傳。智邦的文件根目錄是/www,它的管理頁裡有FTP的IP。或者,把改好的檔案寄給他們客服人員,請他們幫忙更新(不確定他們是否有此服務).
若檔案都在主機上,仍然用FTP登入,找到檔案後按右鍵選編輯,修改後再回傳覆蓋原有的檔案。FTP client建議使用FileZilla 3.x版,免費軟體。
簡睿您好,我們是個小公司,照著這個方式用您說的jsn建了一網站,但最下面有一段
Free Joomla Templates by JoomlaShine.com 字,
我要如何改成公司名稱,請您協助,此事有點急,能幫一下嗎?謝謝。
我的信箱是lalala35@gmail.com 謝謝。
用Free Joomla Templates by JoomlaShine.com搜尋\templates\jsn_epic_free裡的所有檔案,找到後修改掉即可。
您好,請教一下,jsn imageshow要如何更改動態圖片,另外想請問的是有按照您所教學文件製作選單,但我的toobar區的選單全無法正長顯示(都是直接往下一排,而不是橫向)