Pages - Menu

2008年8月8日

blog小改版筆記, 圖片如何消除白邊

一、BLOG01

1. 更改outer-wrapper background image

原始:;更新:

2. 更改/* Posts → .post h3 → background (文章標題左邊圖示)

原始:暫無存檔;更新:

3. 更改blockquote樣式

a. 原始碼:
blockquote {margin: 15px 10px 0 10px;padding: 36px;background: #FCE1D2 url(http://sites.google.com/site/jessieshu1984/%E6%AA%94%E6%A1%88%E4%B8%8A%E5%82%B3%E7%94%A8/blog01-quote.jpg?attredirects=0) no-repeat left top;}

b. 更新後樣式:


4. 新增文章日曆列表與修改樣式

a. 日曆程式取用自:LVCHEN

b. 面板樣式原始碼:

#blogCalendar { border:0px dotted #eee;background-image: url(http://jessieshu1984.googlepages.com/blog01-7.jpg);
width:180px;border-bottom:0px solid #999;margin:auto;}#CalendarCaption a{text-decoration:none;margin:auto;}#CalendarTable a{font-weight:bold;color: purple;}.Today{background: #ddd;}#CalendarFooter{padding-left:25px;}.yearInput{background:#eee;
}#monthTable{color:black;background:#eee;}


c. 面板樣式:



二、BLOG02

1.新增文章日曆列表與修改樣式

a. 日曆程式取用自:LVCHEN

b. 面板樣式原始碼:
#blogCalendar { border:0px dotted #eee;background-image: url(http://jessieshu1984.googlepages.com/TomyAva-12.jpg);width:200px;border-bottom:0px solid #999;margin:auto;}#CalendarCaption a{text-decoration:none;margin:auto;}#CalendarTable a{font-weight:bold;color: purple;}.Today{background: #ddd;}#CalendarFooter{padding-left:25px;}.yearInput{
background:#eee;}#monthTable{color:black;background:#eee;}


c. 面板樣式:



三、圖片如何消除白邊? 尤其是在有底色的Blog樣板中很需要!

小束終於試到找到自己的方法了!!

tip: 小束是用photoshop製圖, 最下方(背景)圖層需設定為"透明", 接著將完成圖更改影像模式為"索引色", 另儲存圖檔為"gif"檔, 完成!!這樣的圖片到哪都不會有白邊了唷!!

四、就是要不一樣! 幫文字段落加上獨樹一格的底線 underline

以上圖都是小束自己畫的,如要拿走或套用請告知喔~

3 則留言:

  1. 我的媽呀,真的好漂亮喔!
    謝謝小束幫日曆穿衣服,到時候我會在安裝程式加上你的衣服,可以嗎?
    小束真棒!
    對了,上次你問我的高度問題,我都還沒有時間測試,我會記得的啦,測出來再告訴你囉!

    回覆刪除
  2. 可以啊, 加上吧!!~^^
    高度如果沒辦法固定會因為月份不同高度不同~
    結果穿的衣服就會太短了~
    你可以從我這把日曆調到別的月份看看就知道了><
    (尤其是2月@@)

    回覆刪除
  3. hi 好久沒來了,前陣子實在是太忙了,可是我沒有忘記還欠你一個問題的答案喔!

    日曆的高度可以在 style 裡面調整,你只要加入 #CalendarTable{ height:154px; } 就可以了。

    最近開始在寫比較正式的安裝程式,將會把你做的樣式加進去喔!

    回覆刪除