因為這個模版是 F2blog 官方釋出的，所以相對的錯誤的情形應該會少很多，所以改起來應該會比較輕鬆愉快一點。至少，不用花很多時間在除錯。
在開始改模版之前，對於 F2blog 所使用的 CSS 你得有一點基本的認識，如果你要改動的話，他要改的檔案，通常是這五個，底下是一些基本的介紹：
- skin.css
紀錄模版名稱、設計者、設計日期等等資訊 - global.css
模版整體規範，包括 body, img, p, th 等等 - layout.css
最重要的部分，所以整體的規範，大概都在這裡 - link.css
針對側邊欄， blog 最上方的導航欄的規範 - typography.css
最主要的是月曆等等
那這一次我們想要改寬的是文章主體欄的部分，所以我們要改的就是 layout.css 這個檔案。
首先我們來看一下，在 F2blog 預設的模版裡面，文章主體的預設寬度是 480 px，那我們期望的寬度是 700 px，於是增加的寬度是 220 px。
接著，我們分別改以下 css 的值就可以了
#container
原來為 780 px 改為 1000 px
#container #header
原來為 745 px 改為 965 px
#container #Tbody
原來為 740 px 改為 960 px
#mainContent
原來為 510 px 改為 730 px
.content-width
原來為 480 px 改為 700 px
#MsgContent
原來為 450 px 改為 670 px
當然囉！改寬了文章主體欄的部分，相對的 banner 的寬度就不太夠囉！所以這個時候，您需要去找一個新的 banner，或是把F2blog 預設的模版的 banner 放大喔！
如果寬度是預設給 800 x 600 螢幕的模版。要放大一點的圖就不方便。有時會超出文章的範圍或破壞版面！
其實只要修改幾個小地方就可以啦！ 你可以參考使用的模版修改類似這些 CSS ！
首頁主圖齊右
BODY {
Font-Family: Arial, Helvetica, sans-serif;
WIDTH: 100%;
COLOR: #FFFFFF;
HEIGHT: 100%;
TEXT-ALIGN: center;
background-color: #8DC63F;
background-image: url(47main_image.gif);
background-repeat: no-repeat;
background-position: top right; /* 改成靠右 */
}
改變整體寬度
#container {
MARGIN: 0px auto;
WIDTH: 100%; /* 改變整體寬度 */
TEXT-ALIGN: left;
}
改變內文寬度
#content {
FLOAT: left;
WIDTH: 75%;/* 改變內文寬度 */
padding-top: 10px;
}
改變文章寬度
.blogbody {
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 10px;
PADDING-TOP: 10px;
border-top: #FFF 1px solid;
width: 100%;/* 改變文章寬度 */
padding-left: 10px;
}
改變選單寬度
#links {
MARGIN-TOP: 440px;
FLOAT: right;
TEXT-ALIGN: center;
width: 20%;/* 改變選單寬度 */
margin-left: 0px;
}
主圖框寬度改成 100 %
#banner {
WIDTH: 100%;HEIGHT: 252px;
background-image: url(top.gif);
background-repeat: no-repeat;
background-position: top left; /* 改成靠左上 */
background-color: #F5FAC7;
}
請自行修改您的主圖配新寬版面。
部落格名稱改齊右
.blogtitle {
FONT-SIZE: 20px;
PADDING-TOP: 30px;
TEXT-ALIGN: right;
padding-right: 20px;
color: #FFFFFF;
}