部落格軌道自定範本樣式表(Custom.CSS)完整解析《色彩篇》

2009/05/03 網路社群

/* 留言背景樣式 */

.td_content_3

{

font:normal 11px tahoma, arial, helvetica, sans-serif;

border-top:1px solid #FFFFFF;

每篇VIP留言的頂線色彩,黑線處

每篇VIP留言的背景色,黑色處

line-height:170%;

padding: 3px;

}

/* Widget中的工具列提示文字的樣式 */

.Wgt_ToolBar_Link

{

color: #666666;

text-align:center;

text-decoration: none;

}

.Wgt_ToolBar_Link a:link

{

color: #666666;

text-align:center;

text-decoration: none;

}

.Wgt_ToolBar_Link a:visited

{

color: #666666;

text-align:center;

text-decoration: none;

}

.Wgt_ToolBar_Link a:hover

{

color: #333333;

text-align:center;

text-decoration: underline;

}
/* 工具列的背景 */

.div_MenuDots

{

padding:5px 0px 0px 0px;

/*background-image:url(http://ico.myweb.hinet.net/widgetEx/img/innerTableBG.gif);*/
}

.div_MenuDots_bottom

{
background-image:url(http://ico.myweb.hinet.net/widgetEx/img/innerTableBG_invert.gif);

隨機大聲公及最近話題上下的背景圖,可自行另外上傳修改網址,可自己另外製圖,上傳後再替換掉原本圖檔網址即可

}
/* Widget的工具列樣式 */

.div_toolbar_prompt /* ToolBar Content */

{

margin:5px 0px 0px 0px;

font:normal 11px tahoma, arial, helvetica, sans-serif;

background-color: #E7EFFA;

滑鼠移至每一個圈圈時所顯示的工具列背景色,黑色處

overflow:hidden;

color:#666666;

line-height:150%;

text-align:center;

}

.div_toolbar_content /* ToolBar Content */

{

margin:0px 0px 0px 0px;

font:normal 11px tahoma, arial, helvetica, sans-serif;

background-color: #E7EFFA;

最近話題及大聲公背景色,黑色處

color:navy;

overflow: hidden;

line-height:175%;

}

/* 最新話題 與 最新大聲公 樣式*/

.WgtFont_talking

{

color:#666666;

line-height:150%;

}

.WgtFont_spking

{

color:#666666;

line-height:150%;

}

/* Widget項目文字與超連結樣式 */

.WgtFont

{

font-size:11px;

}

.WgtFont a:link

{

color: #1860A8;

text-decoration: none;

font-size:11px;

}

.WgtFont a:visited

{

color: #1860A8;

text-decoration: none;

font-size:11px;

}

.WgtFont a:hover

{

color: #000066;

text-decoration: underline;

font-size:11px;

}

/* Widget留言區:留言文字與超連結樣式 */

.WgtFont_msg

{

font-size:11px;

}

.WgtFont_msg a:link

{

color: #1860A8;

text-decoration: none;

font-size:11px;

}

.WgtFont_msg a:visited

{

color: #1860A8;

text-decoration: none;

font-size:11px;

}

.WgtFont_msg a:hover

{

color: #000066;

text-decoration: underline;

font-size:11px;

}

/* Widget留言區:大聲公文字與超連結樣式 */

.WgtFont_spk

{

font-size:11px;

}

.WgtFont_spk a:link

{

color: #1860A8;

text-decoration: none;

font-size:11px;

}

.WgtFont_spk a:visited

{

color: #1860A8;

text-decoration: none;

font-size:11px;

}

.WgtFont_spk a:hover

{

color: #000066;

text-decoration: underline;

font-size:11px;

}

/* 登出樣式 */

.WgtFont_logout

{

margin:5px 0 5px 0;

line-height:175%;

font:normal 11px tahoma, arial, helvetica, sans-serif;

}

.WgtFont_logout a:link

{

color: blue;

text-decoration: none;

font-size:11px;

}

.WgtFont_logout a:visited

{

color: blue;

text-decoration: none;

font-size:11px;

}

.WgtFont_logout a:hover

{

text-decoration: underline;

font-size:11px;

}
/* 經驗值條的背景樣式 */

.bloglevel_bg

{

background-image:url(http://ico.myweb.hinet.net/img/bloglevel_bg.gif);

(經驗條圖示)

background-repeat:no-repeat;

}
/* 經驗值條的前景樣式 */

.bloglevel_fg

{

background-image:url(http://ico.myweb.hinet.net/img/bloglevel_fg.gif);

(經驗條圖示)

background-repeat:no-repeat;

}
/* 關係發展分格線 */

.line_relation

{

background-image:url(http://ico.myweb.hinet.net/img/dotline.gif);

關係發展中間的分隔線

}
/* 按鈕的Style */

.form_button

{

font:normal 11px tahoma, arial, helvetica, sans-serif;

}

本教學共分為3篇,請點選以下連結繼續觀看:

1、部落軌道樣式範本解說《色彩篇》PART I

2、部落軌道樣式範本解說《色彩篇》PART II

3、部落軌道樣式範本解說《色彩篇》PART IIII(本頁面)

你可能對這些內容也有興趣

作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

3 個留言

  1. 拆組達人表示:

    如圖,請看黑色處
    ^^^^^^
    應該是”紅框處”吧?!
    後面幾張圖沒有啥黑色的地方

    這篇很實用,我一直想自訂軌道的版型
    只是近來都在忙官網的架設
    最近搞的差不多了,在來玩軌道的外觀吧! :as24

    阿湯說:

    多玩一些外觀蛤,有新的外觀在分享給大家吧

  2. 天仙表示:

    天仙道長無所不在 :as66

    阿湯說:

    哈~太猛了…

發表留言 »

姓名(*)
信箱(*)