2008-06-30 14:45 變更版面編排為左二欄或右二欄
Xuite Blog 要變更版面的編排可到後台的面版管理->版面編排

在版面編排編輯區中有個版面選擇的功能,當滑鼠移到上面時就會出現 3 種不同的版面供選擇:左右各一欄、右一欄及左一欄

雖然常見的欄位編排不外是這幾種,但有些人可能想要特別一點,像是左二欄或是右二欄的話,就無法透過這樣的設定來達成了。不過很高興的是 Xuite Blog 有提供自訂樣式(CSS)的功能!
要做到左二欄或右二欄的話,前提是你畫面要先有二個欄位才行(感覺有點是廢話~)。所以在版面選擇這邊就要先設為左右各一欄才行。
目前的畫面就是這樣

接著我們就到後台的面版管理->自定樣式(CSS)

在 CSS 樣式表中能找到關於左欄、右欄及中間欄的設定

在這邊可以看到左欄的位置被設為 left:0px; 而右欄的位置被設為 right:0px; 因此它們兩欄會分別靠左靠右;且中間欄的左右兩邊就分別往內縮,以利左右邊欄能擺放。所以我們要變更的部份就在這邊。
假設筆者要呈現左二欄的效果的話,那就是要把右欄也靠到左邊來,因此右欄及中間欄的部份要修改。

這邊是把右欄設為 left:205px; 然後變更中間欄的右邊邊距為 0 ,而左邊邊距就要再加上右欄的寬。讓我們來看一下預覽畫面

嘿~是不是已經變成了左二欄了呢!如果要做右二欄的話,也是依此設定(反過來設定左欄及中間欄....)

效果就會跟左二欄相反

只要簡單的設定距離就能做出 Xuite Blog 所沒提供的版面編排,讓你的 Blog 也跟別人不一樣吧!





