貧窮是我的良伴，脂肪是我的益友！在這短短數十載中，這2位"良朋益友"跟我如影隨形！怎樣才能跟"他們"絕交呢？

破解我的 X-space日誌 模板

上一篇 / 下一篇  2008-07-27 13:24:57 / 精華(1) / 置頂(3) / 個人分類：閒話家常

查看( 274 ) / 評論( 18 ) / 評分( 20 / 0 )

          這陣子我把日誌內的模板改頭換面後，有很多朋友都來問我，我是如何改的？其實，我對CSS法語一點也不懂，很慶幸的是內裡大多都是一些完整的英文單字而不是全都用火星文，這樣我便把系統內原裝的模板法語，一個一個的刪掉或是改掉，看看有什麼變化，而且我不止拆解一個模板，至少拆了4個，才能比較明暸內裡的關連！

注意 :

(1)請把你想放在模板中的圖片上傳到一些圖片上傳空間，上傳好後他會給你顯現圖址，請把這圖址記錄好！

(2)當你每改好一個步驟時便儲存模板一次，在你編輯CSS法語的下方，有一個"另存為"的鍵，這個就是給你儲存的，萬一有什麼差錯，也不會令自已的心血白廢！

(3)一句法語內可能有不同屬性，例如 : #spacename { float: left; width: 240px; height: 132px; overflow: hidden; } 記得每一個指令完畢後的 ;  符號後方給他一個空白鍵，我試過小了一個空白鍵，後方指令不顯示出來！

(4) url 這個後方就是插入圖址的，但記得圖址必須要用(http://www.......)括號括起來，不然會不顯現出來！

以下就是我在系統內用粉藍色模板的拆解！

/*佈局*/

/*Layout_1 左側導航*/如你選擇得左面有欄目便要調教這個

.xspace-layout1 #sideleft { float:left; width: 190px; 左面欄目的闊度，如你會想欄目有圖案，那圖案的闊度要跟這個一樣 }

.xspace-layout1 .mainarea-side { width: 560px中間主體的闊度; margin-left: 200px !important; margin-left: 197px; }

/*Layout_2 右側導航*/如你選擇得右面有欄目便要調教這個

.xspace-layout2 #sideright { float: right; width: 190px; 右面欄目的闊度  }

.xspace-layout2 .mainarea-side { float: left; width: 560px; 中間主體的闊度 }

/*Layout_3 三列*/如你選擇得左和右也有欄目便要調教這個

.xspace-layout3 #sideleft { float:left; width: 190px; 左面欄目的闊度}

.xspace-layout3 #sideright { float:right; width: 190px; 右面欄目的闊度}

        .xspace-layout3 .mainarea-side { float: left; width: 380px; 中間主體的闊度 w\idth: 370px; padding: 0 5px; }’

以上的欄目像素和主體像素不能大過你日誌頭頂圖案的闊度

  

/*圖片樣式*/

(1).xspace-imgstyle. { background: #ECF3FB圖片底色; border-color: #CEDAEA; 圖片邊框顏色 }是所有圖片

/*滾軸樣式*/黃色部份自已加上的

html{

scrollbar-face-color:#fe96ad;

scrollbar-highlight-color:white;

scrollbar-shadow-color: #fe96ad滾軸頭尾箭咀同中間陏得果到既顏色;

scrollbar-3dlight-color:#fe96ad滾軸頭尾箭咀同中間陏得果到既陰影顏色(上方);

scrollbar-arrow-color: white;

scrollbar-darkshadow-color: #fe96ad滾軸頭尾箭咀同中間陏得果到既陰影顏色(下方);

scrollbar-track-color: #fd5e82滾軸中間唔陏既顏色;

}

/*標題樣式*/

(2) /*這個是首頁進入文章後的標題樣式*/

h1.xspace-title { background: #099; 標題底色color: #fd5e82文字顏色; font-size: 1.3em; padding-top:5px; 底色高度padding-left:6px向左對齊的距離!important ; }黃色部份自已加上的

(3).xspace-blocktitle { overflow: hidden; font-size: 1em首頁欄目標題字型大細; color: #3B3BB6首頁欄目標題文字顏色; }

 

(4).sidearea .xspace-blocktitle { background: #D7DFEF左手邊欄目底色 url(../../images/default/sidearea_title_bg.gif左手邊欄目圖案圖址) no-repeat left top; height: 28px; line-height: 32px; padding-left: 35px; }

 

(5)#mainarea .xspace-blocktitle { background: #ECF3FB首頁欄目底色 url(../../images/default/mainarea_title_bg.jpg首頁欄目圖案圖址) no-repeat left top; height: 33px張圖既高度; line-height: 37px; 文字既高度padding-left: 40px;向左對齊既距離 }

 

 

(6)li.xspace-loglist h4.xspace-entrytitle { font-size: 24px首頁文章標題大細黃色部份自已加的; background-color: #ECF3FB首頁文章標題底色; }

 

body { margin: 0; padding: 0; (7)background: #F5F9FC日誌外邊顏色url(../../images/default/background_top.gif日誌外邊圖案) repeat-x; (8)color: #000日誌內文顏色; (9)font: 12px可連結文字大小 Arial, Helvetica, sans-serif; text-align: center; }

 

 

input, textarea, select, button { font: 1em留言框內文字大細 Arial, Helvetica, sans-serif; }

 

#wrap { margin: 1em auto; text-align: (10)center所有文字靠齊方向，我用了center所以所有文字包括欄目內的文字都在中間; width: 770px; w\idth: (11)900px日誌闊度你頭頂的圖有多闊便多闊吧; border: (12)20px solid日誌邊框闊度 #FFF日誌邊框顏色; background: (13)#FFF日誌內文章底色; overflow: hidden; }

 

 

↓↓重點↓↓

#header { background: #98C4FB url(../../images/default/header_bg.gif日誌頭頂圖圖址) repeat-x top; height: 132px日誌頭頂圖高度，你張圖有幾高就改變這個和圖的高度一樣; border-bottom: 1px 日誌和頭頂圖的間距solid #FFF; 間距間之顏色 }

 

(14)#header * { color: #3B3BB6頭頂文字顏色; }

#spacename { float: left; width: 240px; height: 132px; overflow: hidden; }這2個會影響頭頂圖的高度，但我看不到跟空間名字有什麼影響

 

/*導航*/

#menu { width: 500px; height: 70px; float: right; padding-top: 40px選項高低位置，細向上，大向下請自行調教; }

#menu ul { float: right; margin: 0 1em 0 0; }

#menu li { display: block; float: left; width: 52px; text-align: center; margin: 0; }

#menu li a { display: block; width: 52px; height: 70px; background: no-repeat top; padding-top: 50px; he\ight: 20px; text-decoration: none; }

        #menu li a.xspace-blog { background-image: url(../../images/default/menu_icon_blog.gif圖址); }

        #menu li a.xspace-image { background-image: url(../../images/default/menu_icon_photo.gif圖址); }

        #menu li a.xspace-goods { background-image: url(../../images/default/menu_icon_goods.gif圖址); }

        #menu li a.xspace-friend { background-image: url(../../images/default/menu_icon_friend.gif圖址); }

        #menu li a.xspace-link { background-image: url(../../images/default/menu_icon_link.gif圖址); }

        #menu li a.xspace-file { background-image: url(../../images/default/menu_icon_file.gif圖址); }

        #menu li a.xspace-mybbs { background-image: url(../../images/default/menu_icon_bbs.gif圖址); }

        #menu li a.xspace-guestbook { background-image: url(../../images/default/menu_icon_guestbook.gif圖址); }這些都是頭頂選項圖片的連結

  

#menu a:hover { text-decoration: none; background-position: 0 -70px; (15)color: #FFF頭頂圖位置內文字的顏色; }

 

 

#content {(16) background: url(../../images/default/header_bg.gif文章上方圖圖址) repeat-x left -133px; }

 

 

.sidearea { background: (17)#ECF3FB右邊欄目底色url(../../images/default/sidearea_top_bg.gif圖址) repeat-x top; padding-top: 10px; overflow: hidden; }

 

 

(18)/*留言框樣式*/

#xspace-commentmsg {

background: url();}

#xspace-commentform. {

background: url(圖址) no-repeat center; font-size:14px; color: #d630ae; }黃色部份自已加的

.sidearea { padding: (19)5px左邊欄目向內→的距離; overflow: hidden; }

#mainarea { padding: (20)5px; 左邊欄目個文章間的距離}黃色部份自已加的


導入論壇 收藏 分享給好友 管理 舉報

TAG: 閒話家常

引用 刪除 Guest   /   2008-10-31 08:40:16
評 5 分
☆ 雪の良品 ☆ 引用 刪除 michellelulu999   /   2008-10-14 00:04:02
好有用呀~~ tkx
☆ 雪の良品 ☆ 引用 刪除 michellelulu999   /   2008-10-14 00:03:30
評 5 分
引用 刪除 Guest   /   2008-10-14 00:02:40
評 5 分
※§ Cool§※ 引用 刪除 winniechanws   /   2008-08-26 14:40:41
好難啊，我試了很多次
OH~~~ My~Blog~~!!!!! 引用 刪除 治潔   /   2008-08-21 12:14:48
你幅圖如果係自已 upload 既話，好難有問題架woo，我全部都自已upload，未試過出唔到，除非張圖唔係你既，當人地 cut 圖，你米出唔到囉：同埋你搵個模版黎改果時，有d模版一改小小野就錯晒，亂晒龍，連圖都唔比出，咁就唔好用呢類既模版黎改喇！
引用 刪除 貓頭   /   2008-08-21 01:37:42
其實點樣先知幅圖嘅圖址係有問題呢,唉~~~幅圖過幾日就唔見,好用心去整嫁嘛~~~又灰嘞~~~但同樓下一樣圖文並茂真係易明好多.
Koala Gallery 引用 刪除 koalakoalakoala   /   2008-08-15 22:43:07
多謝來看我,
其實改得一般啦,
也不太懂找素材,
旨在嘗試.^_^
Koala Gallery 引用 刪除 koalakoalakoala   /   2008-08-15 05:23:55
精彩!
圖文並茂,
連一向覺得css是火星文的我也看得明,
終於都找到方法去修改整個模板了!
全賴有妳! ^o^ ^o^ ^o^
OH~~~ My~Blog~~!!!!! 引用 刪除 治潔   /   2008-08-08 11:15:43
我是用photoshop 把相片合成的
下雨後的下午 引用 刪除 呀me   /   2008-08-08 01:18:35
點樣將幅圖由多張合成,整到得一張.
OH~~~ My~Blog~~!!!!! 引用 刪除 治潔   /   2008-08-06 10:43:48
哈，好彩我無咩嗜好姐......
jk5的個人空間 引用 刪除 jk5   /   2008-08-05 22:10:06
因一次投訴, 認識到你的blog, 你的教學很好, 多謝分享!
你 倆 "朋友" 我都有, 我更甚的是: 又窮又多嗜好 ;-)
引用 刪除 貓頭   /   2008-07-30 19:58:42
等我都試下先
OH~~~ My~Blog~~!!!!! 引用 刪除 治潔   /   2008-07-28 11:33:04
不客氣，希望對你有幫助！
yukit 引用 刪除 annyukit   /   2008-07-28 02:45:57
評 5 分
敬服~~敬服~~~~
收藏了慢慢參詳^-^.
謝謝.
也謝謝您的留言.
OH~~~ My~Blog~~!!!!! 引用 刪除 治潔   /   2008-07-27 19:00:28
原創就梗係高啦，不過我都係抄人地果d黎改，所以無咁難！
咁多賤人 引用 刪除 王菲紅   /   2008-07-27 18:35:14
很高難度
 

評分：0

我來說兩句

顯示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

日曆

« 2008-11-17  
日 一 二 三 四 五 六
      1
2345678
9101112131415
16171819202122
23242526272829
30      

數據統計

  • 訪問量: 17472
  • 日誌數: 190
  • 圖片數: 2
  • 建立時間: 2008-01-28
  • 更新時間: 2008-11-16

RSS訂閱

Open Toolbar