[原創]Wordpress K2 theme頁面寬度修改

發表
由
ajneok
在 三月 1, 2008
在 學習筆記
.
加入書簽: 標籤：, .

/*update at 2008/07/09 - 此用法適用於K2 Rc6*/
自己的widget多了起來，版面就會雜起來，想整理一下的時候熊熊覺得其實是自己的版面太窄了，所以看起來有點雜，今天原本做了換theme的決定，不過找了很久找不到喜歡的，最後想想，那乾脆來改寬度好了~
一開始是參考K2 Flexible Width做修改，不過也因為這樣做不再讓版面寬度固定，遇到了寬螢幕的話就會有問題，有朋友跟我反應到用寬螢幕看的話我的上方banner會變成重複再印一個來充版面XD~才決定要用成固定寬度…
有需要的朋友這篇可以參考一下(ps:請先備份好需要的css/core.css.php檔案…)

1.打開 css/core.css.php，在60行左右的地方有一段

  1. .columns-one #page {
  2. width: 560px;
  3. }
  4.  
  5. .columns-two #page {
  6. width: 780px;
  7. }
  8.  
  9. .columns-three #page {
  10. width: 950px;
  11. }

這裡決定總版面的寬度，分別是：.columns-one #page(一欄式)、.columns-one #page(二欄式)、.columns-one #page(三欄式)
依照自己的幾欄的版面來設定width值，我是兩欄式所以我改的是.columns-two #page

2.在85行左右有一段

  1. #primary {
  2. position: relative;
  3. float: left;
  4. width: 650px;
  5. padding: 10px;
  6. }

這一段是文章頁面寬度，修改width值來決定寬度

3.(非必要修改部分) 在110行左右，會有一段

  1. .columns-two #sidebar-main,
  2. .columns-three #sidebar-main {
  3. width: 200px;
  4. }

是二欄式的sidebar寬度，修改width值設定sidebar寬度

< 總結 >
建議 (文章頁面寬度+sidebar寬度)px = 總版面的寬度px - 100px

Tags: ,

本文共有 17 條評論[原創]Wordpress K2 theme頁面寬度修改

評論 feed Trackback 地址
  1. 1 pony
    三月 7, 2008 6:34 下午

    我一直對K2的固定寬度很頭疼。這篇教程很有用，多謝！

  2. 2 ajneok
    三月 16, 2008 12:14 上午

    To pony:
    很高興可以幫到你的忙~
    謝謝你來光顧我的Blog~ :)

  3. 3 PJP
    三月 18, 2008 6:19 下午

    我觉得我改得要比你的好些，不光是K2，trueblue这个style我也经常改宽的。

  4. 4 ajneok
    三月 25, 2008 9:10 上午

    oh ? 剛剛去看了一下您的blog , 你是指排版嗎 ?
    呵呵~ 排版不是不能改阿~ 只是我沒有要改排版~ 只是想改寬度阿^^”~

  5. 5 zinklink
    四月 25, 2008 10:39 上午

    請問K2的css都是定義在 /wp-content/theme/k2/style.css下嗎?
    我的style.css 怎麼是用匯入的方式寫的 @import url(’css/core.css.php’);

    又去看了 core.css.php 改寫了一下裡面的CSS但此乎對版面沒影響

  6. 6 ajneok
    四月 25, 2008 11:56 下午

    @zinklink:
    不好意思哦XD~這篇的版本又點舊了XD~
    新的K2 的確是導入”css/core.css.php”
    你也是要改版面寬度嗎?
    我這個就是新版改的~~ 在core.css.php 一樣的地方~(約110行)
    試試看 :) ~ 如果不行的話我在幫妳看看 :)
    剛剛有去看你的blog的css~ 好像沒有改呢@@”~

  7. 7 zinklink
    四月 26, 2008 4:51 下午

    你好，謝謝你的指點阿，已經修改成功了。
    K2 Theme是不是尚未正式支援 Wordpress 2.5 呢?

  8. 8 ajneok
    四月 26, 2008 5:59 下午

    @zinklink:
    官方最新的消息是說WordPress 2.5 Support Soon~
    但是有替代方案~ K2他們有說可以去抓 nightly
    我現在就是用 nightly

  9. 9 zinklink
    四月 26, 2008 6:57 下午

    沒錯我也是看了官網的消息，也是用nightly的版本。
    不好意思，再請問一下，右側widget的位置可以向右移一點嗎
    我是把 .content 的 width設成700px 轉個跑掉

  10. 10 ajneok
    四月 27, 2008 2:17 下午

    你可以試試看改Sidebar 的邊界或是改他的對齊位置~~
    就是約在157行這個tag裡面的padding(邊界)、float(對齊)

    .secondary {
    width: 200px;
    float: left;
    font-size: 1em;
    line-height: 1.5em;
    color: #666;
    position: relative;
    padding: 0 20px;
    overflow: hidden;
    }

    我目前的css設定是這樣的

    .columns-two #page 的 width 是 950px (總頁面寬度)
    #primary 的 width 是 650px (文章那邊的寬度)
    .secondary 的 width 是 200px，padding 是 0 20px。(Sidebar的寬度 + 邊界)

    我剛剛看了一下覺得…
    .secondary的寬度(width)跟邊界(padding)總和 + #primary的寬度(width) = 總寬度(.columns-two的width也就是950px) - 80px
    不然會爆 :P

    你也可以直接把float改成 right 讓他靠右對齊~

    修改：我剛剛去你的blog看~ 怎麼文章那邊的寬度那麼窄阿XD”~故意的嗎XD?

  11. 11 zinklink
    四月 28, 2008 2:06 下午

    終於改好了，大略都已完成了，謝謝你的指點阿!
    真的要好好看懂php的原碼，才看著懂箹統各區格安插方式，以方便修改CSS

    有沒有軟體可以把CSS的版面遍排圖形化的？快要淹沒在HTML和PHP codes之中了

  12. 12 ajneok
    四月 28, 2008 6:47 下午

    @zinklink:
    恭喜 :P 什麼叫編排圖形化 :o ?
    我通常用Firefox逛網頁，他的Web developer 這個plug-in 很好用~
    可以直接修改這個網頁css然後直接呈現在你看的網頁上~ 所以我通常都用這個邊看邊改做測試~

  13. 13 Peter
    五月 7, 2008 6:34 下午

    可否請教您，如果文章內容中的行距，就是行與行之間的間距，如果我覺得太大，想請教您我應該調整什麼參數呢？我看了一下頁面的原始碼，顯示文章的是： …而 CSS 中的 設定是：
    .entry-content {
    font-size: 1.2em;
    line-height: 1.8em;
    text-align: justify;
    color: #444;
    }

    請問我應該怎麼設定才能調整行距呢？謝謝您。

  14. 14 ajneok
    五月 7, 2008 7:56 下午

    @Peter:
    你可以改 line-height 的值 :)

    越大的話行間距越大，你就把數值改小一點看看 :) (就是紅色部分)

    .entry-content {
    font-size: 1.2em;
    line-height: 1.8em;
    text-align: justify;
    color: #444;
    }

  15. 15 Peter
    五月 8, 2008 6:01 下午

    謝謝您指導。謝謝

  16. 16 EddieShih
    七月 9, 2008 12:26 上午

    我用k2 rc6 以及最新的wordpress
    沒辦法依照你的方式調整耶！
    是我操作錯誤嗎？

  17. 17 ajneok
    七月 9, 2008 10:45 上午

    @EddieShih:
    我現在用的這個就是k2 rc6，我有修改成功呢~ 可能是你修改錯地方or…其他問題^^”
    能夠講一下你改了哪裡嗎 :) ?

留下評論：