April 13,2005 01:13

樣式summer的修改

因為很喜歡[ 時光。記事本 ]這個部落格的風格,所以在修改站內現成的樣式時,決定選擇summer來做修改。

參閱了think of joe的樂多Blog更換banner最速法,創造更具個人特色的Blog!之後,初步修改了summer的三項樣式:
1.banner圖片
2.sidetitle
3.calendarweek

其詳細設定值如下:
1.#banner
{ BACKGROUND: url(http://blog.roodo.com/yoren/f673ee0b.jpg) no-repeat 50% 0px;
WIDTH: 740px;
HEIGHT: 100px
}
2..sidetitle
{ PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #7f8eb7; PADDING-BOTTOM: 3px; COLOR: #fff; PADDING-TOP: 3px; LETTER-SPACING: 2px; TEXT-ALIGN: left
}
3..calendarweek
{ FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #fff
}

此外,為了使說明更為容易閱讀,又增加了樣式:
.em {
COLOR:red;
}


因此,可以為上面樣式詳細設定值加上重點提示:
1.#banner
{ BACKGROUND: url(http://blog.roodo.com/yoren/f673ee0b.jpg) no-repeat 50% 0px;
WIDTH: 740px;
HEIGHT: 100px
}
2..sidetitle
{ PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #7f8eb7; PADDING-BOTTOM: 3px; COLOR: #fff; PADDING-TOP: 3px; LETTER-SPACING: 2px; TEXT-ALIGN: left
}
3..calendarweek
{ FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #fff
}
紅色字體為修改過的部分。

  • yoren 發表於樂多回應(4)引用(0)站內裝潢編輯本文
    樂多分類:日記/一般 │昨日人次:0 │累計人次:32
    Ads by Roodo! 

    引用URL

    http://cgi.blog.roodo.com/trackback/72701

    回應文章
    當然,banner的圖片是事先準備好的,我將自己拍攝的照片以photoshop剪裁出734*100px的大小,然後上傳到樂多。
    所以圖片實際的寬度只有734px,和設定裡的740px有點差距,但是很小,視覺上不太明顯。理論上圖片和語法的數值應該要設定相等才對。
    | 檢舉 | Posted by yoren at April 14,2005 00:55
    Yoren 你好:

    可不可以請教一下,我也將我的banner高度改短了,可是要如何縮短banner和內文的距離?

    謝謝你,也祝你開心!
    | 檢舉 | Posted by Stephen at July 6,2005 04:27
    hi Stephen:

    試試看把#banner裡面的HEIGHT改為100px,
    我用Firefox去修改你網站的CSS,看過以後是可以的(如圖)。
    Good Luck!
    | 檢舉 | Posted by yoren at July 6,2005 08:28

    Hi Yoren:

    謝謝你的說明。已經可以了。

    Have a nice day!!!
    | 檢舉 | Posted by Stephen at July 6,2005 17:42