start > 2008-11-13 > 1

CSS 實戰篇 - b2evolution

Created by Ada. Last edited by Ada, 52 days ago. Viewed 1,363 times. #6

[diff] [history] [edit] [rdf]

labels

Parent:

CSS

attachments

CSS 實戰篇 - b2evolution

※ 2008-11-15 靠么，真的又改版型了........ 雖然圖不會蓋掉側邊欄了，不過… 寬度還是被鎖死的，所以… 有空再來改一次吧…

上次扯到 CSS 好像是一年半前的事了？不過這次會再搬出 CSS 實戰其實是因為豪宅的超清新阿宅萬事通事務所，由於迥異於原本烏漆麻黑的清新版型設定導致哀號聲不斷，但真正讓我想要修改整個 CSS 設定的原因在於受限制的本文區寬度，如下圖中兩側的空白區都被浪費了：

豪宅的 Blog 現在改用 b2evolution 架設，我曾捉了幾個 skin 解開來時才發現 b2evolution 的版面設計中包含了可程式化的部份，這種方式除了增加版面的靈活度外，另方面也等於格揆可將所有 CSS 參考到的元素或類別名稱統統改掉，造成自訂 CSS 無力化的情形。不過這種情形是無可避免亦無需煩憂，反正遇上了再重新調一份自己喜歡的版型出來就好。

至於自行修正版面的方式有兩種：

透過修改 DOM 結構：在 Firefox 上可以透過 Greasemonkey 套件達成，以前在搞暗黑 MyPHS 時使用此法，原因是該網站大量使用巢狀 Table，無法自行調整區塊結構。這方式其實挺難的。
自行載入修改過的 CSS 樣式表：在 Firefox 中可以直接修改 usercontent.css 或透過 Stylish 載入。這方式除 IE 外的瀏覽器似乎都可以達成。

此次修改選擇 Stylish 套件，它可依網址不同而載入不同的 CSS 樣式檔，幾個修改原則如下：

移除版型寬度限制
將側邊欄移至左邊，讓右邊空間保留給超級大圖使用
讓版型不要看起來太清新，所以色彩的選擇原則上是抄 Google Redesigned extension 的。

於是修改後的版型如下，建議點去看原圖做個比較：

寬螢幕模式：
窄螢幕模式：

以下是修改後的 CSS 樣式表：

@namespace url(

http://www.w3.org/1999/xhtml);

/* 指定僅限於朱學恆超清新阿宅萬事通事務所網頁適用 */ @-moz-document url-prefix(http://blogs.myoops.org/) {

/* 先把背景弄暗些 */ body { background-color: #696E65 !important; }

/* 大、中、小標字體標準色：金色，背景則暗些 */ h1, h2, h3, h3 a { color: #FFD700 !important; background-color: #566068 !important; }

/* 鼠標在上時的顏色 */ h3 a:hover { color: #E3E3E3 !important; }

/* 這算小小標嗎？其實是迴響(xxx) 字眼使用，希望它離邊界 10px */ h4 { margin-left: 10px !important; }

/* 把原本網站的背景圖關掉 */ #wrap { background-image: none !important; }

/* 網站名稱的背景色不要使用上面設定的大標背景 */ #header h1 { background-color: inherit !important; }

/* 將最上層容器的寬度改成瀏覽器寬度（也就是 body）的 98%，同時自動置中 */ #skin_wrapper { width: 98% !important; margin: 0 auto !important; }

/* 各區塊內文位置的寬度全部釋放成 100%，footer 區沒展開的原因是… 不好看 */ #header-content, #content { width: 100% !important; }

/* 修正定位模式為相對定位 */ #header, #header-content, #content-wrap, #content, #footer, #footer-content { position: relative !important; }

/* 這是網站名稱旁的 "Blog All" 連結的設定 */ .PageTop { position: relative !important; /* 和邊界保留點距離 */ right: 10px !important; /* 這行其實是個人設定瀏覽器字體大小後的副作用 */ top: 10px !important; }

/* Menu 區 */ .top_menu { position: relative !important; /* 和邊界保留點距離，這個設定會和 .PageTop 連結一起向右對齊 */ right: 10px !important; /* 這行其實是個人設定瀏覽器字體大小後的副作用 */ bottom: 5px !important; }

/* 風景圖 - 和此地氣氛不合，收起來吧，等換了張燈光美、氣氛佳的圖時可以再打開 */ .headerphoto { display: none !important; }

/* 背景色一律指定為與最外層相同 */ #skin_wrapper, #wrap, #content-wrap, #footer { background-color: inherit !important; }

/* Header 區 */ #header { /* 背景色 */ background-color: #25282D !important; /* 取消原始設定 */ border-top: 0px solid #000000 !important; }

/* 本文區 - 與 Header 區留點空隙以免擁擠 */ #content-wrap { margin-top: 7px !important; }

/* sidebar 放左邊，避免被大圖蓋掉 */ #sidebar { /* 不必使用浮動模式，直接定位即可 */ float: none !important; position: absolute !important; left: 0 !important; margin: 0 !important; /* 寬度設為 270px，其實一般設為 250px 即可，270px 是在大字體時使用 */ width: 270px !important; }

/* 本文區放右邊，不怕圖蓋掉別人 */ #main { /* 不必使用浮動模式，也不特別指定定位模式（亂設的話會導致 Footer 區亂跑） */ float: none !important; /* 左邊界內縮 275px ，保留 #sidebar 的存在感 */ margin-left: 275px !important; margin-top: 0 !important; /* 取消原本強制指定的寬度 */ width: auto !important; }

/* 一般區塊的背景色 */ .sidebox, .post { background-color: #EDF0F4 !important; background-image: none !important; }

/* 區塊內的抬頭（連結）設定 */ .sidebox h1 a{ color: #FFD700 !important; background-color: #566068 !important; }

/* 區塊內的抬頭（連結）設定 */ .sidebox h1 a:hover { color: #E3E3E3 !important; }

/* 文字輸入框，加寬、加框以方便辨視 */ input[type="text"], textarea { border-width: 1px !important; border-color: #25282D !important; width: 98% !important; }

/* 把 Read More （還有 Follow Up）顯示移到右側了 */ .bMore { text-align: right !important; }

/* 文章結尾的背景色，與文章本身做些區隔 */ .post .post-footer { background-color: #DEE0E4 !important; }

/* footer 區的顏色 */ p.center strong a { color: #FFD700 !important; }

p.center strong a:hover { color: #72A545 !important; }

#footer-content, #footer-content a { color: #CCDDF2 !important; } }

朱學恆的阿宅萬事通事務所 - 小紅辣椒版型修訂

這是針對朱學恆的阿宅萬事通事務所的小紅辣椒版修改設定，原始版型如下：
修改的原則同前，小紅辣椒背景圖則因為無法隨瀏覽器寬度改變的關係而去除。修改過後版本如下：

寬螢幕顯示：
窄螢幕顯示：

以下是外掛的 CSS 樣式表，請使用 Stylish 載入。

@namespace url(http://www.w3.org/1999/xhtml);@-moz-document url-prefix(http://blogs.myoops.org/) {
  #wrap, #header, #navigation, #sidebar, #content, #footer {
    position: relative !important;
  }
  #wrap {
    width: 98% !important;
  }
  #header {
    background-image: none !important;
    height: auto !important;
  }
  #title {
    margin: 10px 5px !important;
    float: none !important;
  }
  #title a {
    color: #FFD700 !important;
  }
  #topright {
    float: none !important;
    position: absolute !important;
    right: 0px !important;
    top: 0px !important;
    margin-top: 10px !important;
    margin-right: 15px !important;
  }
  #navigation {
    background-repeat: repeat !important;
    margin: 0 5px !important;
  }
  #sidebar {
    width: 200px !important;
    float: none !important;
    position: absolute !important;
  }
  .SearchField {
    width: 98% !important;
  }
  h1, h2, h3 ,h4, h1 a, h2 a {
    color: #FFD700 !important;
  }
  .widget_core_coll_search_form h2 {
    padding-bottom: 3px !important;
  }
  #content {
    position: relative !important;
    top: 0px !important;
    left: 0px !important;
    margin-left: 205px !important;
  }
  .bComment {
    border-color: #777777 !important;
    border-width: 1px !important;
    border-style: dotted !important;
    margin-bottom: 5px !important;
    margin-left: 5px !important;
    padding: 3px 15px !important;
  }
  .bMore {
    text-align: right !important;
  }
}