Monday, August 27, 2007

筆記:將Template改成三欄

Blogger預設的範本多是兩欄式的,我選擇的Stretch Denim也是兩欄,參考了Beautiful Beta增加第二個側邊欄位的作法,稍稍變動一下程式碼,就可以改成三欄了。

Beautiful Beta雖然是英文網站,可是作者HANS的寫作,不但用字遣詞簡單、概念解說更是非常清楚易懂,關於如何修改的細節、Blogger範本結構的基本概念,不管改不改範本,都非常值得一讀。所以,修改的概念,請參考Beautiful Beta。以下是我依樣畫葫蘆所做的修改:

Step 1:將原有的側邊欄位定義成側邊欄位
找到
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

換成
<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>

找到
#sidebar-wrapper
換成
#right-sidebar-wrapper

Step 2:增加一個側邊欄
找到
<div id='main-wrapper'>
在<div id='main-wrapper'>之增加
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>


Step 3:增加及定義側邊欄位的寬度和格式,可以直接複製#right-sidebar-wrapper{}修改。
#left-sidebar-wrapper {
margin-left: 1%;
width: 20%;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Step 4:修改欄位和側邊欄位的寬度
#main-wrapper {
margin-left: 2%;
margin-right: 2%;
width: 54%;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#right-sidebar-wrapper {
margin-right: 1%;
width: 20%;
float: right;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Step 5:在【範本 | 網頁元素】(Template/Page Elements)中檢視效果,並搬動部分網頁元素到左邊欄位。

2 comments:

阿哲said... said...

你好
依本文中修改完畢後發現在IE中顯示好像有問題!!
開啟網址後網頁顯示不完全
後來將
#main-wrapper {
margin-left: 2%;
margin-right: 2%;
左右欄位都變更為1%之後就OK了

HISsaid... said...

你好,我很喜歡你現在的blogger template,不知道是不是可以給我呢?我很喜歡三欄式,且可以隨著螢幕解析度變化的模版,你是我第一個看到最適合我心目中的模版,簡單,乾淨,非常舒服,希望能有機會可以用你的模版 m(_ _)m