有在使用部落格軌道的朋友們應該都知道，內定的佈景風格共有５種可選擇使用，但其實
不能說只有５種啦，應該是無限多種，因為很多人沒有注意到其實可以自訂CSS樣式，可依照個人喜好的顏色來修改，丫湯花了一點時間，將原本的自訂範本（Custom.css）除了原先的部份文字備註外，再加上圖解來讓大家更了解每一部份的顏色從哪修改，不過可是長篇大論哦～眼睛不好的朋友啊，記得先點個眼藥水蛤！
在此篇教學中將全部的顏色樣式部份全部以圖片解說註記，之後丫湯會再寫一篇有關全部的字型樣式修改解說哦
一、自訂範本（Custom.css）在哪兒？
在widget設定中，widget顏色配置的右邊就會看到〝
自訂範本〞，右鍵另存檔案即可，
在修改完畢後，找個空間上傳，選擇自定CSS，輸入你放置檔案的網址，再儲存之後，重新整理頁面，就可以看到你修改的成果。
二、要如何修改樣式表？
丫湯在這篇中介紹Custom.css的樣式檔中，全部相關色彩的語法，可對照圖片上
的顏色所示位置來選擇哪邊要修改成何種顏色，原則上都是線條及背景色
: 線條樣式
background-color:背景顏色
後面顏色的設定都會有#xxxxxx，由６個英數組成的16進制色碼（這不重要），
比如FFFFFF是白色，000000是黑色，其餘顏色代碼對照，請利用以下連結查詢
http://www.gland.com.tw/www/power/colorpicker/
將你想修改的顏色查詢16進制代碼後，取代原有色碼即可
三、部落軌道樣式(CSS)自訂範本內容解說：
@charset "utf-8";
body
{
font:normal 11px tahoma, arial, helvetica, sans-serif;
}
/* 捲軸樣式, 其中顏色的調配僅限IE有效 */
.body_css_3Blue,
.html_css {
以下為調整捲軸拉條的顏色，但僅在IE看的到效果
SCROLLBAR-FACE-COLOR: #dee3e7;
如圖，請看黑色處
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
如圖，請看黑色處
SCROLLBAR-SHADOW-COLOR: #dee3e7;
如圖，請看黑色處
SCROLLBAR-3DLIGHT-COLOR: #d1d7dc;
如圖，請看黑色處
SCROLLBAR-ARROW-COLOR: #006699;
如圖，請看黑色處
SCROLLBAR-TRACK-COLOR: #efefef;
如圖，請看黑色處
SCROLLBAR-DARKSHADOW-COLOR: #98aab1;
如圖，請看黑色處
overflow-x: hidden; overflow-y: auto;
}
/* 系統提示的文字樣式 */
.prompt
{
color: #E05921;
border: 1px solid #F5CAA0;
background-color: #FEFAD8;
系統文字背景色及框線
font:normal 11px tahoma, arial, helvetica, sans-serif;
overflow:hidden;
line-height:150%;
}
本教學共分為３篇，請點選以下連結繼續觀看：
１、部落軌道樣式範本解說《色彩篇》PART I （本頁面）
２、部落軌道樣式範本解說《色彩篇》PART II
３、部落軌道樣式範本解說《色彩篇》PART IIII
/* Widget外框架的Table屬性 */
.table_outer
{
border:1px solid #B6CDED;
如果在widget裡有設定顯示邊框，才有效果，最外圍的框線色，黑線處
最外圍框線與內框中間的底線色，黑色處
}
.td_outer_header
{
border-top:1px solid #FFFFFF;
上面框框和下面框框的頂部線彩，黑線處
font:bold 12px tahoma, arial, helvetica, sans-serif;
background-color: #D5E4F5;
上下框框背景色，黑色處
padding: 0px;
}
/* Widget內框架與內文背景的Table屬性 */
.table_inner
{
border-right:1px solid #B6CDED;
border-bottom:1px solid #D0D0D0;
border-left:1px solid #B6CDED;
左右下三條線的色彩，黑色處
background-color: #E7EFFA;
內框底色，黑色處
}
/* 部落格名稱背景樣式 */
.td_content_1
{
font:normal 11px tahoma, arial, helvetica, sans-serif;
border-top:1px solid #CDDDF3;
每個部落格名稱的頂部線彩，黑色處
background-color: #EFF0F2;
部落格名稱的背景色彩，黑色處
padding: 3px;
}
/* Widget底部資訊提供(登出 & BO幣狀態) */
.td_content_2
{
font:normal 11px tahoma, arial, helvetica, sans-serif;
border-top:1px solid #D0D0D0;
底部登入登出框框的頂線色彩，黑線處
background-color: #EFF0F2;
底部背景色
padding: 3px;
}
本教學共分為３篇，請點選以下連結繼續觀看：
１、部落軌道樣式範本解說《色彩篇》PART I
２、部落軌道樣式範本解說《色彩篇》PART II（本頁面）
３、部落軌道樣式範本解說《色彩篇》PART IIII
/* 留言背景樣式 */
.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;
}
本教學共分為３篇，請點選以下連結繼續觀看：
１、部落軌道樣式範本解說《色彩篇》PART I
２、部落軌道樣式範本解說《色彩篇》PART II
３、部落軌道樣式範本解說《色彩篇》PART IIII（本頁面）
;*/){kind=link}
