日誌2007-09-08 10:03

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

咦...我寫到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

32

LINE 分享

相關創作

哈哈哈

【RPG公會】【六座協議專案】【射落王座．實】遮那王流離譚

夜深了，一起陪我跳支舞吧？一起記錄著小屋20萬人的這一刻

留言

• 2007-09-08 10:06櫻澤楓：
  啊....正煩惱說右旁選單改造不能的問題說。
  
  總之感謝您的教學。XD
• 2007-09-08 10:37御風：
  感謝分享阿~~~~~~~
• 2007-09-08 10:43昨日夢醒今日醉：
  大人這篇我要收藏起來^^~推
• 2007-09-08 11:17雲：
  教學一定要推
  
  感謝你的教學
  
  讓大家版面更精彩
  
  
• 2007-09-08 13:23阿築：
  哇~ 我上頭條了 有我古錐的照片耶 0 . 0
  
• 2007-09-08 15:15小于：
  哈哈．．阿鬼才看的懂．．．
  
  我喜歡這句˙ˇ˙
• 2007-09-08 19:15Beautiful Things：
  淵大大~真是太謝謝你了>"<
  我發問這要怎麼改，還讓你特地在寫一篇教學...
  你寫的最容易看的懂有圖還幫我們特地用不同顏色圈起來
  真是細心...謝謝^^
• 2007-09-08 21:25Glass：
  二話不說－－先推再包　=　=+
  （眾：妳妳妳，說清楚推啥？！）
• 2007-09-08 23:46~Ceylon錫蘭~：
  收藏去了!感恩啊~>口<
• 2007-09-09 10:48阿葉神：
  感謝老師指導Ａ＿Ａ
• 2007-09-09 19:19蒼龍飛虹：
  說一下藍色那圈可以用 background:transparent; 讓他變成透明的。
  
  謝謝大大的指導^^

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

• 2007-09-09 19:33珞璟：
  不知道有沒有人發現到，這個語法會與收藏框架、最新文章的部份衝突到，導致無法生效，不過那個好像只要把「.articlebox{」刪除就可以正常顯示了。
  衝突到的東西：http://home.gamer.com.tw/blogDetail.php?owner=gn6824&sn=187
  
  話說，背景怎麼換……
• 2007-09-09 19:44小屋因故停止更新：
  好厲害~又細心
  收藏
• 2007-09-12 17:50小于：
  雖然和這篇沒有關係．．
  
  但我想請問一下唷～
  
  淵姐在回覆留言（樓上的樓上的樓上有）有一條愛心～
  
  那要怎麼用呀˙ˇ˙？
  
  找好久都找不到說．．．
• 2007-09-12 17:50小于：
  雖然和這篇沒有關係．．
  
  但我想請問一下唷～
  
  淵姐在回覆留言（樓上的樓上的樓上有）有一條愛心～
  
  那要怎麼用呀˙ˇ˙？
  
  找好久都找不到說．．．

  2007-09-12 19:37淵：那段在這裡
  你找下面這段原來就有的語法就可以了。
  
  .article_hr{
  border:5px;
  background-color:#F67383;
  background:url(圖片網址);
  height:12px;
  border:0px;
  

• 2007-09-24 12:39楓紅：
  感謝教學
• 2007-11-04 10:11奸仔蘭˙華麗閃耀：
  淵大
  我要在白色那快放圖片
  寫了~
  /*------右下的標題list格式-------(就是白色那一塊)*/
  .post_list{
  background-image:http://farm3.static.flickr.com/2308/1850024328_895a848328_o.jpg
  }
  這段語法
  為什麼沒用呢@@??
• 2007-11-12 16:40＊°﹢海薇兒﹢°＊：
  /*------右下的標題list格式-------*/
  .post_list{
  background-color:#000000;
  color:#FF6666;
  }
  /*-----今日訪客等等的灰色外框-----*/
  .postbox2{
  border:0px dashed;
  background: #000000;
  }
  /*-----post_list裡面改不掉的那一圈白色-----*/
  .postboxin{background:#000000;
  }
  
  我的搜尋勇者、小屋統計、個人紀錄、今日訪客
  
  那一欄怎麼會是白色的＠＠？
  
  是我哪裡沒改到嗎？？＞＂＜

  2007-11-12 18:20淵：/*------右下的標題list格式-------*/
  .post_list{
  background-color:#000000;
  color:#FF6666;
  
  ↑↑↑↑↑
  上面這段，你除了設圖片之外，我建議你把底色也設成黑色的

• 2007-11-12 18:59＊°﹢海薇兒﹢°＊：
  ＠＠大大你是說ＦＦ６６６６嗎？
  
  可是他不是字體顏色嗎

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

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

  2007-12-29 21:28淵：border:0px dashed;/*其實灰色框框外面還有一圈很細的灰色框線，這讓你改那一條*/
  
  這句就是灰色框線那圈
  border:0px　←這個代表線的粗細，我設定為０
  dashed　←這個是代表線條樣式，我設定線條為虛線

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

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

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

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

• 2008-01-10 17:54*~飄飄娃~*：
  /*------右下的標題格式-------*/
  .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;這個改了只有字體顏色變了...底色還是白的...@.@

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

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

  2008-01-10 23:08淵：你的圖片有出來，如果你的圖片是透明底色的話，
  就可以在語法裡面加底色...加一句
  『background-color:#000000;』試試
  當然，那個#000000請自己換掉
  
  至於愛心那條線...我懶得爬在哪了Orz

  2008-01-10 23:09淵：哦有，找到了，在這
  下面是原始碼，自己改...
  
  .article_hr{
  border:5px;
  background-color:#000000;
  background:url(http://圖片網址);
  height:12px;/*圖片高度*/

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

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

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

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

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

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

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

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

• 2008-02-13 16:21小角落..：
  寫的太讚了~~感謝你的教學>Q<
• 2008-08-21 19:26澪：
  精華教學
• 2008-09-13 14:19闇葉：
  感謝分享喔>///<

• 送出