舊酒裝新瓶啦XD 認識我的人就知道這是以前我在有名小站使用的樣式
自己還挺喜歡的,雖然我不會重複使用以前的樣式,不過想說修一修分享出來好像也不錯
(沒想到頗花時間XD 中間還又再N度被學校斷網orz 本來是想接著做桃華月憚的整套CSS啊~)


   

【特色】
→ 『1024x768』限定。(我是兩欄式寬版面愛好者XD)
→ 文中可貼大圖(寬645px)
→ Link 區的標題字都被我換成英文囉
→ 『發表迴響CSS』也有配套的樣式~(請到我網誌下載CSS後貼上)
→ 火狐可用。

【使用說明】
→ 建議在『網誌設定』中,『網誌圖片大小』設定645px以下,避免跑框
→ 『網致描述』建議只輸入一行(否則會擠到下文喔)
→ 可以自行修改,有CSS標籤註解的版本請到我網誌下載
→ 橫幅圖為加拿大大師Daniel Kvasznicza的作品『Path To The Gothic Choir』
→ 若有地方需要修改或建議也請留言給我,非常感謝:)
→ 800x600的使用者框架也不會縮小XD (因為若是自動縮小,內文又有大圖,就會跑框~)

============================================================================

■留言彈跳視窗
  
這個留言彈跳視窗的CSS請到下載自行貼上^_^

整個樣版有註解版的也請到下載(之後的修正並沒有修註解版,所以只可當參考架構喔~)


■橫幅圖
橫幅圖為加拿大大師Daniel Kvasznicza的作品『Path To The Gothic Choir』之一部分
原圖非常漂亮:)
也是整個樣版的色彩基調來源。相關文請見此篇第四張圖的說明。


■雜言XD
找到當初做這個樣式的文章,已經接近一年囉
可惜右邊LINK區塊原本的底色是一塊塊漸層下去,然而PIXNET的版面可以自己移動位置
導致顏色可能變得凌亂,最後忍痛全部改成雙色調…(淚)

最花時間的應該是「月曆」吧,明明沒有標題區域 (.sidetitle) 卻硬要加圖上去XD
只是空出上面顯示底圖,但是為了隱藏原本的字橋了好久orz
很多區滑鼠移上都會整區變色,也是這個樣版的特色~
  

這次學會了『繼續閱讀』換成圖片(要設定城區塊顯示)(display: block;)
發表回應』的按鍵改成圖片也是新想到的
明明是要留言,文字卻說「開放留言」,我一直都覺得很奇怪,乾脆換成自己覺得適合的文字XD
字型使用我喜歡的華康金文體
  

右邊連結區標題那種有十字架的英文字型是『Crusades
設計者:Soot Jenkins [Fontsmith][1999] 
  

左邊回應區的Message的英文字型是『Cardinal
設計者:[Typographer Mediengestaltung][2000]
  
以前我就很喜歡英文字型,電腦內當然也裝了一大堆,常常很難割捨要用哪種,都很漂亮~

雖然說是把樣版修一下,但是自己覺得又更順手了一些,整個CSS有註解版的也更清楚明瞭
這算是進步吧:)

============================================================================

【2007/04/20 修改】 (都是些小地方...但是我不喜歡瑕疵...)
→ 文章區和最上面橫幅分開 (往下移動20px)
→ 版權區和上面的欄位分開 (上邊界20px)
→ 發表回應的圖片設定不重複 (no-repeat)
→ 繼續閱讀(more)的圖片去背 (jpg→gif)


1. 如下圖綠框區,所以在#content 增加上邊距20像素(margin-top: 20px;),變成紅框區~



2. 右邊連結區最下面的區塊會黏到版權區,因為我忘了版權區(.powered)雖然在右邊(#links內)
但是卻不在.side 和.sidetitle 裡面,因此上邊距沒設定到,目前也已修正~



3. [→ 發表回應的圖片設定不重複 (no-repeat)] 
我都會到有套用這個樣版的使用者網誌看看有無bug (順便暗爽一下XD)
發現『留個迴響』文字下方有一點點發光的東西,原來是我忘了設定圖片不重複(background的no-repeat
所以圖片垂直部分重複的出現了orz


4. 當文章內文只顯示一兩行,就設定繼續閱讀的話,『MORE』就會遮到文章區上部的底圖
因為我通常都三四行才設定繼續閱讀,因此沒有檢查到,是看了套用者的網誌才發現orz 也已修正。



其實我覺得分享樣版最辛苦的就是要修正
不過也因此發現不少自己的盲點,所謂『有失必有得』XD!?


============================================================================

【2008/02/24 修改】
想說用ie7跑跑看,沒啥問題嘛XD 只是月曆歪了,當然又是!important語法的問題,簡單的修正啦。
ff2.0也測試ok。

修改處是#CalendarPlugin 裡面的
 padding: 57px 0px 20px 42px;
 *padding: 52px 30px 20px 0px  !important;
 *padding: 52px 30px 20px 0px;


CSS官方上架的已修正,點這也可http://smallwu36.googlepages.com/20070418blogcss


arrow
arrow
    全站熱搜

    小無 發表在 痞客邦 留言(57) 人氣()