1.首先先確定自己要改的地方有哪些,至於位置與語法的對照我上一篇已有說明了,所以我不再贅言了。

2.因為有很多地方可改,在此我就以文章區塊及最愛連結為例;文章區塊和關於我的語法是類似的,而其他的欄位語法也大同小異,所以只要會改一個其他的只是舉一反三而已。

3.文章區塊:(.main開頭的語法)
此部份分成九塊區域

.mainTopLeft(左上) .mainTopMid(中上) .mainTopRight(右上)
.mainMidLeft(左中) .mainMid(中,文章的地方) .mainMidRight(右中)
.mainBottomLeft(左下) .mainBottomMid(中下) .mainBottomRight(右下)


其中左上、中上、右上、左中、右中、左下、中下、右下都是外圍框線的部份,如果要它們透明的話就是無框線的作法,而中間部份就是文章內容的位置,也是一般較常改為透明的地方。

 

最愛連結:(.ItemLink開頭的語法)

 

.ItemLink-Lf

 

()

 

.ItemLink-bullet

 

(符號)

 

.ItemLink-Mid

 

()

 

.ItemLink-Rt

 

()

 

.ItemLink-Bg(背景)

 

 


上方標頭部份也可以是透明的,或另外改成自己想要的框線,下一篇心得研究會詳細說明。而一般常改成透明的地方是背景部份。

4.語法只有一個就是 background:none;
但前提是要先把background-image和background-color兩列語法前後用/*及*/包住或刪掉。

現在一步步來改吧!

(1)打開CSS找到要改的地方。

文章區塊中央文章內容的部份是 .mainMid{}
原始內容應該是像這樣:
.mainMid{
background-image: url(/_theme/skin/windows/30/blog001_9.gif);
background-repeat:repeat;
/*background-color:#F6F6F6;*/
}

最愛連結背景部份是 .ItemLink-Bg{}
原始內容應該是像這樣:
.ItemLink-Bg {
/*background-image:url(/_theme/skin/windows/15/itemBg.gif);*/
word-break:break-all;
background-color:#FFFFFF;
border-top:0px solid  #FC9EA3;
border-bottom:1px solid  #FC9EA3;
border-right:1px solid  #FC9EA3;
border-left:1px solid  #FC9EA3;
padding:0px;
margin-bottom:3px;
}

(2)先將background-image和background-color兩列用/*及*/包住或刪掉。像這樣:

文章區塊中央文章內容的部份
.mainMid{
/*background-image: url(/_theme/skin/windows/30/blog001_9.gif);*/
background-repeat:repeat;
/*background-color:#F6F6F6;*/
}
由於background-color原始內容已經用/*及*/包住了,所以只要包住background-image的語法就好。

最愛連結背景部份
.ItemLink-Bg {
/*background-image:url(/_theme/skin/windows/15/itemBg.gif);*/
word-break:break-all;
/*background-color:#FFFFFF;*/
border-top:0px solid  #FC9EA3;
border-bottom:1px solid  #FC9EA3;
border-right:1px solid  #FC9EA3;
border-left:1px solid  #FC9EA3;
padding:0px;
margin-bottom:3px;
}
由於background-image原始內容已經用/*及*/包住了,所以只要包住background-color的語法就好。

(3)將background:none;插入{}中,像這樣:

文章區塊中央文章內容的部份
.mainMid{
/*background-image: url(/_theme/skin/windows/30/blog001_9.gif);*/
background-repeat:repeat;
/*background-color:#F6F6F6;*/
background:none;
}

最愛連結背景部份
.ItemLink-Bg {
/*background-image:url(/_theme/skin/windows/15/itemBg.gif);*/
word-break:break-all;
/*background-color:#FFFFFF;*/
background:none;
border-top:0px solid  #FC9EA3;
border-bottom:1px solid  #FC9EA3;
border-right:1px solid  #FC9EA3;
border-left:1px solid  #FC9EA3;
padding:0px;
margin-bottom:3px;
}

(4)確定有選『使用自訂樣式CSS』後,可以先『預覽』,或者直接按『確認送出』後,回到首頁,若沒有變成透明的話,按F5更新

arrow
arrow
    全站熱搜

    BO BO 發表在 痞客邦 留言(0) 人氣()