|
免安裝直接連線到本站執行,讓你DIY修改 osCommerce 的版面風格,包含頁首導引列、訊息框、頁尾等,設計之後可以把成果複製到自己 osCommerce 網站的catalog/stylesheet.css.
建議在覆蓋掉您的stylesheet.css之前要記得把原來的檔案先備份.
點此執行
目前版本為v1.3 ,歡迎免費加入本站會員並設定本服務右欄框的「商品通知」,將來風格設計DIY版本有修改並增加功能時,會主動通知您。
操作說明
1.先從設定標的點選要設定的對象,比如說:訊息盒標題列或產品列表標頭.
2.再從設定項目點選要設定的項目,比如說:是要設定背景的顏色或文字的顏色.
3.從設定值點選喜愛的風格,不同的設定項目會帶出不同的設定值選擇方式.
4.最後點選"檢視設計"按鈕,就會把你設計好的風格依據CSS格式輸出到下面的文字列.
5.點選"全選複製"按鈕,便可以把文字列裡面的資料全選並複製到系統剪貼簿,你便可以轉貼到你的文書編輯軟體(比如:Windows的記事本或EditPlus).
6.倘若想以自己現有的stylesheet.css內容為基礎再繼續修改,可以先用文書編輯軟體開啟自己電腦裡的stylesheet.css把內容全選並複製之後,再回到本程式點選"貼上"按鈕,把內容貼到本服務的文字列裡面,按下"送出"按鈕,右邊的osc畫面就會採用你送出的風格設計.
訊息盒修改
修改了stylesheet.css之後,你會發覺訊息盒標題的背景顏色雖然改了,但是在標題的兩個角落,還是原來的顏色(感覺很難看),這是因為osc的訊息盒標題的角落為了製造圓弧轉角的效果,使用了下列幾個GIF圖檔做為標題的轉角.
catalog/images/infobox/corner_left.gif
catalog/images/infobox/corner_right.gif
catalog/images/infobox/corner_right_left.gif
倘若每次改了stylesheet.css的顏色還要去做新顏色的GIF檔,那真的很累.因此若把這些轉角的GIF捨棄不用,將方便osc版面顏色的修改(沒有圓弧轉角好像也不難看).
捨棄轉角GIF檔要修改 catalog/includes/classes/boxes.php
在 class infoBoxHeading extends tableBox (約100行位置)
及 class contentBoxHeading extends tableBox (約150行位置)
兩個類別設計裡尋找有下列任何程式碼
tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif')
或
tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif')
或
tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif')
都以下列程式碼取代
tep_draw_separator('pixel_trans.gif', '11', '14')
如果你希望網站可以天天自動更換風格,請參考本站的另一個免費服務 版面風格天天換
|
