創作內容

18 GP

小屋系統預設圖片更換教學 - PART 5

作者：淵│2007-09-08 10:03:54│巴幣：0│人氣：5791

咦...我寫到PART5了哦，
看來還會有PART6....
因為我還沒教各位換按鈕>"<

今天要教大家換這個。反正就是讓你把右邊那一長條換掉就對了~

由於這幾個表格的更換是連在一起的，所以以下只拿出其中一格當範例來講。

照慣例，要記得備份原來的哦~
教學開始。

1.

這張圖其實可以分解成三部分。

2.像這樣。

我分成紅藍白三個顏色等一下來解釋，這樣各位比較看得懂。
變成CSS的話就是這樣。

這堆文字在

裡面是找不到的哦，
請自行把等一下提供的複製貼上。

3.現在我把要用到的CSS打上來讓各位看一下，感謝u4大提供的意見，
所以下面的也可以直接套用哦，你另外再改顏色就好了。

4.來解釋一下這堆阿鬼才看的懂的東西="=

/*------右下的標題list格式-------(就是白色那一塊)*/
.post_list{
background-color:#FCD8D8;/*讓你把白色改成別的顏色*/
color:#ffffff;/*文字顏色*/
}
/*-----今日訪客等等的灰色外框-----(紅色那一塊)*/
.postbox2{
border:0px dashed;/*其實灰色框框外面還有一圈很細的灰色框線，這讓你改那一條*/
background:#;/*讓你把灰色換成別的顏色*/
}
/*-----post_list裡面改不掉的那一圈白色-----(藍色那一塊)*/
.postboxin{background:#FCD8D8;/*讓你把藍色塗掉*/
}

5.這堆文字我是貼在

的最下面啦，
個人習慣。

6.按『確定送出』。

喜歡 18 收藏 77 引用 1 留言推上首頁檢舉

引用網址：https://home.gamer.com.tw/TrackBack.php?sn=667753
All rights reserved. 版權所有，保留一切權利

相關創作

比特幣減半前預測

場外越來越可憐

喵

留言共 32 篇留言

櫻澤楓：
啊....正煩惱說右旁選單改造不能的問題說。

總之感謝您的教學。XD

09-08 10:06

御風：
感謝分享阿~~~~~~~

09-08 10:37

昨日夢醒今日醉：
大人這篇我要收藏起來^^~推

09-08 10:43

雲：
教學一定要推

感謝你的教學

讓大家版面更精彩

09-08 11:17

阿築：
哇~ 我上頭條了有我古錐的照片耶 0 . 0

09-08 13:23

小于：
哈哈．．阿鬼才看的懂．．．

我喜歡這句˙ˇ˙

09-08 15:15

Beautiful Things：
淵大大~真是太謝謝你了>"<
我發問這要怎麼改，還讓你特地在寫一篇教學...
你寫的最容易看的懂有圖還幫我們特地用不同顏色圈起來
真是細心...謝謝^^

09-08 19:15

Glass：
二話不說－－先推再包　=　=+
（眾：妳妳妳，說清楚推啥？！）

09-08 21:25

~Ceylon錫蘭~：
收藏去了!感恩啊~>口<

09-08 23:46

阿葉神：
感謝老師指導Ａ＿Ａ

09-09 10:48

蒼龍飛虹：
說一下藍色那圈可以用 background:transparent; 讓他變成透明的。

謝謝大大的指導^^

09-09 19:19

淵：
謝謝你告訴我這個~
因為我只有小畫家這玩意兒....
所以我弄圖片之類的壓根沒想過用透明的Orz09-09 19:20

珞璟：
不知道有沒有人發現到，這個語法會與收藏框架、最新文章的部份衝突到，導致無法生效，不過那個好像只要把「.articlebox{」刪除就可以正常顯示了。
衝突到的東西：http://home.gamer.com.tw/blogDetail.php?owner=gn6824&sn=187

話說，背景怎麼換……

09-09 19:33

小屋因故停止更新：
好厲害~又細心
收藏

09-09 19:44

小于：
雖然和這篇沒有關係．．

但我想請問一下唷～

淵姐在回覆留言（樓上的樓上的樓上有）有一條愛心～

那要怎麼用呀˙ˇ˙？

找好久都找不到說．．．

09-12 17:50

淵：
那段在這裡
你找下面這段原來就有的語法就可以了。

.article_hr{
border:5px;
background-color:#F67383;
background:url(圖片網址);
height:12px;
border:0px;
09-12 19:37

楓紅：
感謝教學

09-24 12:39

奸仔蘭˙華麗閃耀：
淵大
我要在白色那快放圖片
寫了~
/*------右下的標題list格式-------(就是白色那一塊)*/
.post_list{
background-image:http://farm3.static.flickr.com/2308/1850024328_895a848328_o.jpg
}
這段語法
為什麼沒用呢@@??

11-04 10:11

＊°﹢海薇兒﹢°＊：
/*------右下的標題list格式-------*/
.post_list{
background-color:#000000;
color:#FF6666;
}
/*-----今日訪客等等的灰色外框-----*/
.postbox2{
border:0px dashed;
background: #000000;
}
/*-----post_list裡面改不掉的那一圈白色-----*/
.postboxin{background:#000000;
}

我的搜尋勇者、小屋統計、個人紀錄、今日訪客

那一欄怎麼會是白色的＠＠？

是我哪裡沒改到嗎？？＞＂＜

11-12 16:40

淵：
/*------右下的標題list格式-------*/
.post_list{
background-color:#000000;
color:#FF6666;

↑↑↑↑↑
上面這段，你除了設圖片之外，我建議你把底色也設成黑色的11-12 18:20

＊°﹢海薇兒﹢°＊：
＠＠大大你是說ＦＦ６６６６嗎？

可是他不是字體顏色嗎

11-12 18:59

淵：
background-color:#000000;
↑↑↑↑↑這個才是背景顏色= =11-12 22:51

晴：
0.0

11-28 18:10

舞小雪：
大大~~~
/*-----今日訪客等等的灰色外框-----(紅色那一塊)*/
.postbox2{
border:0px dashed;/*其實灰色框框外面還有一圈很細的灰色框線，這讓你改那一條*/
background:#;/*讓你把灰色換成別的顏色*/
很細的灰色框線我改不掉啊>"<
怎麼弄才對QQ?

12-29 16:10

淵：
border:0px dashed;/*其實灰色框框外面還有一圈很細的灰色框線，這讓你改那一條*/

這句就是灰色框線那圈
border:0px　←這個代表線的粗細，我設定為０
dashed　←這個是代表線條樣式，我設定線條為虛線12-29 21:28

舞小雪：
大大對不起= =
我實在很笨~"~
灰色框這條我試過好幾次可是還是改不掉@口@"
/*-----今日訪客等等的灰色外框-----(紅色那一塊)*/
.postbox2{
border:5px dashed;
background:#E2F4FF;
}
我弄成這樣可是最外面那灰色的框依然在= =
請問大大我哪裡弄錯了嗎^^?
謝謝您嘿^^

12-30 01:33

淵：
你應該要把『border:5px dashed;』
改成『border:0px dashed;』才對12-30 13:03

*~飄飄娃~*：
/*------右下的標題list格式-------(就是白色那一塊)*/
.post_list{
background-color:#000000;/*讓你把白色改成別的顏色*/
color:#ffffff;/*文字顏色*/
我已經把標題底色設成黑色可是他顯示還是白的...這是為什麼丫??麻煩哩了

01-10 17:34

淵：
你搞錯了，這部分是指你現在設黑色的那塊，
你想要改標題要看這一篇小屋系統預設圖片更換教學 - PART 401-10 17:42

*~飄飄娃~*：
/*------右下的標題格式-------*/
.post_title {
height:95px;/*圖片高度*/
background-image:url(http://materialland.ckza.com/material172ck/other_animal/materialland_067.gif);
background-position:left;
COLOR:#841400;
PADDING-left:85; /*←文字與左方的距離，請自行調整。*/
PADDING-top :15; /*←文字與上方的距離，請自行調整。*/
}
那要改哪裡.....COLOR:#841400;這個改了只有字體顏色變了...底色還是白的...@.@

01-10 17:54

淵：
你的圖片高度不對應該是9601-10 20:23

*~飄飄娃~*：
我的高度改了還是一樣??....想再問一下哩回應的那一排愛心要怎麼設??...哩上面有說語法..要放哪??
有限高跟寬嗎??

01-10 20:34

淵：
你的圖片有出來，如果你的圖片是透明底色的話，
就可以在語法裡面加底色...加一句
『background-color:#000000;』試試
當然，那個#000000請自己換掉

至於愛心那條線...我懶得爬在哪了Orz01-10 23:08

淵：
哦有，找到了，在這
下面是原始碼，自己改...

.article_hr{
border:5px;
background-color:#000000;
background:url(http://圖片網址);
height:12px;/*圖片高度*/01-10 23:09

*~飄飄娃~*：
上面的原始碼是原本就有的嗎...還是要自己複製上去....我用複製的我的圖出不來..只有1 條白白的
PS不好意思一直麻煩哩...*ˇ*...非常謝謝哩...*ˇ*

01-11 12:07

淵：
那是原本就有的啊~ 請自己找在哪段01-11 18:37

*~飄飄娃~*：
}/*個人部落閣文章版主回應分色線*/
.article_hr{
border:0px;
background-color:#000000;
background:url(http://fcu.org.tw/~s92a0173/no5/b01/bw01/bw0105.bmp);
height:30px;/*圖片高度*/
我是設這樣......

01-11 12:12

淵：
把background-color:#000000;拿掉試試01-11 18:38

*~飄飄娃~*：
我又發現了我把右下綠點用圖蓋過去之後底色是白的....那要怎麼改...

01-11 14:17

淵：
你爬一下文吧...請自行看我小屋首頁的個人資訊，
那邊我有複製連結= =01-11 18:40

*~飄飄娃~*：
background-color:#000000....拿掉了還是一樣...會是圖的關係嗎??

01-11 18:53

淵：
應該是...太久了，我忘記內建的高度是多少="=
我的圖片高度是14，你參考看看吧~01-11 20:30