2007年8月29日 星期三

修正Dzelque templates適合IE使用

目前|我使用的模板來自 Dzelque Blogger Templates
目前此站已更名為Our Blogger Templates,網址也改成
http://www.ourblogtemplates.com/
由於這個作者,是以Firefox為基礎所設計的網站,所以他的模板在IE的使用上排版不是那麼整齊,可是還是想利用他的模板,但要如何解決呢?

這是我自己的修改經驗,不一定適用他全部設計的模板,不過還是和大家分享,有問題可以互相討論研究,因為有網友問到,就把他寫出來以供參考。

發現他的CSS編碼上,對於長度、高度都有兩個變數,例如
min-width: 520px;
max-width: 520px;

這樣在IE下瀏覽,邊欄Sidebar的物件全都跑到下方,我的做法是全部把他改為只有一個絕對變數,沒有最大或是最小,而是
width: 520px; 或是 height:145px;
其他的都不動,就可以正常在IE下展現了。
聽說IE是不支援 max-width 或是min-width,最大及最小的語法的。

如果只有一個變數的,例如body{ 裡的min-width: 920px; 就不要改,不然整個版面會跑到右方去。或是把這段刪除也可以,因為在一般寬度的宣告,我都是以 #outer-wrapper { ,這個定義來控制整個版面的寬度,而不在body裡宣告。

另外這個模板看不到標題及網誌敘述,因為都被隱藏住了,找到
#header h1 {#header .description { ,將以下兩行敘述刪除
display: none;
visibility: hidden;
就可出現標題與敘述了,出現以後,再到字型與顏色去修改成你要的樣子即可。

如果經修改過還是無法成功的,可以直接套用我修正過的版本,有以下三種
● 以下的版本適用IE及FF,其他維持原來設定,
檔案下載 (請按右鍵,另存新檔)

● 適用IE及FF使用,並改過寬度(設990px)的版本,及隱藏了導覽列
檔案下載 (請按右鍵,另存新檔)

● 適用IE及FF使用,改過寬度(設990px)的版本,及隱藏了導覽列,另外加上索引式月曆, 請特別注意:
上載前,請記得先將網頁元素--Blog Archive改成Flat清單,勾選「先顯示最舊的文章」,存檔頻率為「每日」,再上載xml檔案
記得上載後,修改HTML,勾選「展開小裝置範本」找到"dzelun.blogspot.com",改成你自己blog的網址,不然都會用到dzelun這個blog的Archive
檔案下載 (請按右鍵,另存新檔)

NEW!
9.1已改成新的模版
Charm Skins Templates 我使用的模板

沒有留言:

張貼留言

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能