Thursday, January 10, 2008

修改blogger範本(2) - 改頁面寬度

上回介紹過我這個blog是修改了原來的blogger範本,但未有詳細講解其中的做法,今日便試試詳細小小講解整個修改過程,希望可以幫助到剛轉blog過來blogger的blog友。

(1) 挑選新範本
每個來到blogger的user,都可以在『挑選新範本』中選一個介面上大致是可以接愛的,之後再慢慢修改當中的細節。
以我自己的blog為例,我選了Rounder 3,因為一格格,比較似Yahoo blog,容易令用開Yahoo blog的人接受。


不過這個範本看起來的缺點是main box太窄,加上其實現時大部份user的screen都已不再是600X800 所以應該要改一下。

(2)修改HTML
在"Page Structure"內找 "outer-wrapper",即是top banner及footer的寬度,改為995(因為想與main box加相同的寬度)
再在"main-wrap1",即是main box的寬度,改為740(因為想用回banner的圓邊,所以加到剛好與之前Banner的寬度一樣)

改好了外框,但內文的內框未變。
所以要同樣在 "Page Sturcture" 內找 ".main .Blog",把width改為740

現在內文改好,但由於這個圓邊的設計,可以看到改後的圓邊並沒有跟著更改。

在html中看到,原來這些造成圓角效果的,都是一些gif檔。(找到這些圖檔的秘技,全靠呀Man協助)
現在由於把內文框的寬度剛好改成與Banner一樣,所以我們可以這樣做:
(a)把"coners_main_top.gif"換成"coners_cap_top.gif"
(b)把"coners_main_bot.gif"換成"coners_cap_bot.gif"
(c)把"coners_cap_top.gif"及"coners_cap_bot.gif"的整條URL delete

這樣除了banner及footer,其餘部份都可以保持圓邊又不用自己再修改圖。


做好了!現在修改寬度已經完成了,但顏色上好像不太別,所以要去搞一搞!

(3)修改『字型和顏色』
這裏可以避開不用改CSS也可以很簡單的作修改,而且還可以有即時預覽,非常方便!

現在改好了,整個look都不同!

4 comments:

  1. 寫得很詳細喔
    加油 加油 !
    希望看到你更多新作

    ReplyDelete
  2. 職業病丫o麻,只係識得step by step寫晒出來,內容的質素上還有待提升...

    ReplyDelete
  3. 很棒,但是像我們這種懶人…還是希望有夠多的範本直接套用。ㄏㄏ

    ReplyDelete
  4. 讲解的是很详细,可是你难道没有发现,你的博客页面上出现了一个很明显的“竖条”么?消除掉就完美了!

    ReplyDelete

相關文章

Related Posts with Thumbnails