安裝步驟1:修改 osCommerce 的按鈕顯示函數
osCommerce 的按鈕顯示函數所在的程式檔案為 catalog/includes/functions/html_output.php
請先把這個檔案的原始檔備份起來,修改若有問題便可以還原到原始檔.在此檔案裡有兩個跟按鈕相關的函數定義,分別是 tep_image_submit() 跟 tep_image_button(), 找到這兩個函數所在位置後(約在176行及192行位置),
做以下修改:
找到tep_image_submit()函數定義最後一行指令(約在187行)
return $image_submit;
在該行前面插入下列程式碼:
$ba=array('button_quick_find.gif','button_tell_a_friend.gif');
global $submit_no;
$submit_no +=1;
if(!in_array($image,$ba)) return '<input type="submit" value="" id="submit_'.$submit_no.'" style="border-style: none;background-color:transparent;visibility:hidden;"><span onClick="document.getElementById(\'submit_'.$submit_no.'\').click();" onmouseover="document.getElementById(\'submitl_'.$submit_no.'\').className=\'cssbLeftMouseOver\';document.getElementById(\'submitm_'.$submit_no.'\').className=\'cssbMiddleMouseOver\';document.getElementById(\'submitr_'.$submit_no.'\').className=\'cssbRightMouseOver\';" onmouseout="document.getElementById(\'submitl_'.$submit_no.'\').className=\'cssbLeft\';document.getElementById(\'submitm_'.$submit_no.'\').className=\'cssbMiddle\';document.getElementById(\'submitr_'.$submit_no.'\').className=\'cssbRight\';"><span id="submitl_'.$submit_no.'" class=cssbLeft></span><span id="submitm_'.$submit_no.'" class=cssbMiddle>'.$alt.'</span><span id="submitr_'.$submit_no.'" class=cssbRight></span></span>';
找到tep_image_button()函數定義最後一行指令(約在195行)
return tep_image(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image, $alt, '', '', $parameters);
在該行前面插入下列程式碼:
global $submit_no;
$submit_no +=1;
return '<span onmouseover="document.getElementById(\'submitl_'.$submit_no.'\').className=\'cssbLeftMouseOver\';document.getElementById(\'submitm_'.$submit_no.'\').className=\'cssbMiddleMouseOver\';document.getElementById(\'submitr_'.$submit_no.'\').className=\'cssbRightMouseOver\';" onmouseout="document.getElementById(\'submitl_'.$submit_no.'\').className=\'cssbLeft\';document.getElementById(\'submitm_'.$submit_no.'\').className=\'cssbMiddle\';document.getElementById(\'submitr_'.$submit_no.'\').className=\'cssbRight\';"><span id="submitl_'.$submit_no.'" class=cssbLeft></span><span id="submitm_'.$submit_no.'" class=cssbMiddle>'.$alt.'</span><span id="submitr_'.$submit_no.'" class=cssbRight></span></span>';
ps:第1個步驟只要開始時做一次,下次改用別的按鈕設計時,這個步驟就可以不必做,直接進行第2個步驟.
安裝步驟2:製作自己的按鈕
利用上面所提供的工具,設計出自己的按鈕後,按下「完成」按鈕,在下方的「stylesheet.css增加內容」以及「按鈕圖案下載」欄位就會顯示出所設計的按鈕內容以及相關圖檔.
安裝步驟3:複製檔案
把前步驟產生「按鈕圖案下載」連結的3個圖檔放入資料夾 catalog/images/
接著用文字編輯軟體開啟你 osCommerce 的風格設計檔 catalog/stylesheet.css
按下「stylesheet.css增加內容」欄位旁的「複製內容」按鈕,把設計內容複製到系統剪貼簿,然後切換到文字編輯軟體,選擇編輯貼上,把設計內容貼到你的stylesheet.css檔案之中,你可以貼在 .boxText (約12行位置)文字的前一行,儲存你新的stylesheet.css檔案即完成.
何謂 CSS_BUTTON?
「按鈕設計DIY」所產生的按鈕,與一般的圖檔按鈕不同(參考下圖說明),我們稱之為CSS_BUTTON,顧名思義這個按鈕是透過CSS風格設計的定義,來產生按鈕圖案.CSS_BUTTON具有以下的特色:
- 所有的按鈕均使用同一組按鈕圖檔,用戶端瀏覽器顯示時只要下載一組圖檔,在多個按鈕顯示的情況下可以節省畫面更新時間.
- 也因為使用同一組圖檔,設計師設計按鈕時,不必為不同文字製作不同按鈕,節省按鈕製作時間.
- 自動讀取 osCommerce 的語系定義檔抓取按鈕文字內容,因此不同語言的瀏覽器會配合 osCommerce 的多語系功能,自動切換按鈕文字的語系.
- 按鈕長度會自動依據文字內容拉長.
- 按鈕的圖案可以依據不同的風格設計替換.
進階應用1
前面的安裝步驟1就是修改原來的osCommerce按鈕函數改採CSS_BUTTON.其中的第一段修改程式設定的陣列變數如下:
$ba=array('button_quick_find.gif','button_tell_a_friend.gif');
這個 $bs 陣列是用來記錄不使用CSS_BUTTON的按鈕,因為有一些按鈕並沒有文字,比如說搜尋的按鈕以及推薦親友的按鈕,這些按鈕若使用CSS_BUTTON會造成按鈕過長而破壞左右欄框的版面.你也可以把其他你不想使用CSS_BUTTON的按鈕圖檔名稱加到這個陣列,告訴CSS_BUTTON程式使用原來的圖檔按鈕.
進階應用2
由於CSS_BUTTON的設定是存放在風格設計檔stylesheet.css之中,因此你可以與本站提供的另一個免費程式「版面風格天天換」配合,在自動更換 osCommerce 版面風格時,同時也替換掉配合的CSS_BUTTON.
|
