K2佈景修改秘笈：新增CSS、改寬度

從安裝Wordpress和K2講起

1. 下載Kirin Lin的中文包、K2本身和ajneok的k2中文語系檔
2. 上傳到FTP
3. 安裝
4. 啟用K2

調整K2

1. 在k2資料夾裡有個style資料夾，到裡面新增一個資料夾，取名為你網站的名稱或你自己做的佈景的名稱。像我的是hanamizuki。
2. 在這資料夾新增hanamizuki.css，先打入以下資訊

   /*
   Style Name : Hanamizuki
   Style URI : <a href="http://hanamitsuki.com/<br />
   Comments" title="http://hanamitsuki.com/<br />
   Comments">http://hanamitsuki.com/<br />
   Comments</a> : only for hanamizuki.tw
   */

3. 到後台＞設計＞K2設定裡面，選擇你要雙欄還是三欄，這邊以雙欄為例。然後到下面「風格」的地方，選擇剛剛輸入的Style Name(如Hanamizuki)。

想想看你想設計成怎樣

假設，我要設計成：

1. 雙欄
2. 總寬度想要950px
3. 側邊欄寬度想要220px

找要改的CSS

1. 打開剛才新增在style資料夾的css，以及k2根目錄底下的style.css
2. 在style.css找尋你要改的css，複製到新的css檔案。
3. 因為我要雙欄，所以找有columns-two字眼又是設寬度(width)的selector。有這些。

.columns-two #page {
width: 780px;
}

4. 因為我要改整個寬度，因此主內容寬度也會改變，找到這個。

#primary {
position: relative;
float: left;
width: 500px;
padding: 10px;
}

5. 因為我要改側邊欄寬度，要找這個。

body.columns-two #primary-wrapper {
float: left;
margin-right: -220px;
width: 100%;
}
body.columns-two #primary {
margin-right: 220px;
}
.secondary {
width: 200px;
float: left;
font-size: 1em;
line-height: 1.5em;
color: #666;
position: relative;
padding: 0 10px;
overflow: hidden;
}

6. 好了，把上面的都複製到新開的css檔裡面吧！

K2很聰明，你的style設定會自動蓋掉style.css的設定，所以不用修改到k2本身的style，只要加個新的css就好。

開始修改CSS

1.總寬度想要變950px

.columns-two #page {
width: 950px;
}

2.主內容寬度也要一起變寬。本來總寬度是780px，主內容是500px。現在總寬度變950px，多了170px，因此主內容也要多170px。

#primary {
position: relative;
float: left;
width: 670px;
padding: 10px;
}

3.側邊欄想要220px。本來是200px，多了20px，以下是要改的地方。

body.columns-two #primary-wrapper {
float: left;
margin-right: -240px;
width: 100%;
}
body.columns-two #primary {
margin-right: 240px;
}
.secondary {
width: 220px;
float: left;
font-size: 1em;
line-height: 1.5em;
color: #666;
position: relative;
padding: 0 10px;
overflow: hidden;
}

然後把沒修改的刪掉，總之變這樣。下面這個貼到新加的hanamizuki.css，就會生效囉！

.columns-two #page {
width: 950px;
}
#primary {
width: 670px;
}
body.columns-two #primary-wrapper {
float: left;
margin-right: -240px;
width: 100%;
}
body.columns-two #primary {
margin-right: 240px;
}
.secondary {
width: 220px;
}

本篇沒有進階教學

這是K2很好修改的原因，因為有許多風格可以選。其他的CSS設定，也只要到原本的style.css裡面找、複製、貼上、修改就好，完全就是Script Kiddie的作風啊！

有其他更進階的作法，等到有空再打囉。這次是剛好要幫公司弄個wordpress部落格，所以順便做筆記。