奇摩部落格自訂式樣CSS語法總覽(五)進階設定

2008060716:50
蒐集:自訂式樣教學  2007/12/10 16:27

語法貼入自訂式樣步驟

管理部落格 → 面板設定 → 自訂樣式 → 在到CSS欄

將下面語法覆製 → 貼在CSS內容欄最下面

如何貼語法到自訂式樣語法框請參考下面文章中圖文解說

http://tw.myblog.yahoo.com/lucy-2/article?mid=2&prev=12&l=f&fid=6

CSS語法欄內沒有相同的語法  就直接貼上  有的話請(請覆蓋原先的設定)

(重覆貼取語法會干擾程式,可能會造成效果無法顯示,

或是其他無法預期的事情,除非把語法清除重新設定。)

【進階樣式和自訂樣式的設定也會相互干擾】如需做改變請先進進階式樣

取消原先勾選~~

 

(一)部落格所有文字置中語法

/*部落格文字置中*/
BODY {
Font-Family: verdana;
TEXT-ALIGN: center;
}

(二)部落格名稱替換成圖片語法

/* 部落格名稱替換成圖片 */
#yblogtitle h1 {
    display:block;
    float:left;
    background:url(圖片網址) 0 0 no-repeat;
    width:圖片寬px;
    height:圖片高px;
    font-size:0;
    line-height:0;
    text-indent:-5000px;
    overflow:hidden;
    cursor:pointer;
    cursor:hand;}

下面語法為調整部落格各區塊背景底色及字體大小+改變顏色設定
例 font-size:100%;  →  是字體放大縮小字的比例,

依個人需求調整,比例越高字越大。

紅色部份可改字體顏色

(三) 

/*Background color for blog title橫幅欄框 調整顏色+字體大小*/
#yblogtitle .mbd, #blogtitle .mft { font-size:110%; background-color: #FFFFFF;}

(四) 

/*Main content header編輯管理中間標題  留言板標題  調整顏色+字體大小*/
.yc3pribd .mhd{ font-size:120%; background:#FFFFFF; color:#000000;}

註: background:#000000;

為標題處背景底色設定色碼自行修改

(五)

/*Nav module header部落格相簿標題 背景調整顏色+字體大小*/
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{ font-size:110%; background:#FFFFFF; color:#000000;}

(六)

/*Nav module header部落格相簿標題 背景調整顏色+字體大小*/
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{ font-size:110%; background:#000000; color: #000000;}

(七)

/*Background color for main content body自我介紹欄  留言板 文章內容  調整背景顏色+字體大小*/
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p { font-size:110%; background: #FFFFFF;}

(八)

/*Nav module body左右欄框內容 調整背景顏色+字體大小*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ font-size:105%; background:#000000; color: #FFFFFF;}

部落格透明度CSS語法

Opacity for blogtitle   → 標題底色透明度  
Opacity for main content    →文章底色透明度
Opacity for sub column    →左右欄位底色透明度
Background color for module   →個人欄位底色透明度

透明度數值由0~~100 數字越大越不透明~~底色顯示越明顯

(九)

/*Opacity for blogtitle標題底色透明度*/ 
#yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:0)}

(十)

/*Opacity for main content文章底色透明度*/ 
.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div {zoom:1; filter:alpha(opacity:0)}

(十一)

/*Opacity for sub column左右欄位底色透明度*/ 
.yc3subbd .rctop,.yc3subbd .rctop div,.yc3subbd .rcl,.yc3subbd .rcr,.yc3subbd .rcbtm,.yc3subbd .rcbtm div, .yc3sec .rctop,.yc3sec .rctop div,.yc3sec .rcl,.yc3sec .rcr,.yc3sec .rcbtm,.yc3sec .rcbtm div {zoom:1; filter:alpha(opacity:0)}

(十二)

/*Background color for module個人欄位底色透明度*/ 
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft {zoom:1;  filter:alpha(opacity:0)}

(個人欄位底色透明度)
CSS語法欄內如沒有
 /*Background color for module*/  語法

就直接在CSS語法欄內最下面貼上

有的話請(覆蓋原先的設定)

(重覆貼取語法會干擾程式,可能會造成效果無法顯示,或是其他無法預期的事情)

【進階樣式和自訂樣式(css語法)的設定如有衝突 也會相互干擾*除非把(css語法)清除重新設定】