Yahoo Blog Css 修改的語法
語法範例:
#ymodprf .horos img{display:none;}
#ymodprf .horos{width:60px;height:75px;background:url(http://xxxxx.gif) center no-repeat;}
以上要更改的就是紅色字的地方!
60px , 75px 改成欲上傳的圖片大小!
http://xxxxx.gif → 就是你的圖片的位置
這段語法請放在 Blog 面版設定,自訂樣式內,最上面一行!
如果自訂樣式內有 /*customization CSS*/ 這個語法,請把改圖示的語法放在這個語法的下面.
CSS 將欄位底圖、底色、文字顏色更改
到部落格→管理部落格→面板設定→自訂樣式。
語法範例:
/*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{ background:
標題原本底色色碼 ; color: 標題字體顏色色碼 ; background-image:url(圖片網址);
編輯好語法後,貼到自訂樣式最後一行即可。
或許在自訂樣式內就有一個 " /*Nav module header*/ ",我是把它整個刪了,但有備份起來!
CSS 語法教學-欄位前加圖案
到部落格→管理部落格→面板設定→自訂樣式。
語法範例:
/*Nav module list*/
.ycntmod .mbd ul.list li {background:url(圖片網址1) left .3em no-repeat;padding-left:17px;margin-bottom:3px;_margin-bottom:3px;_line-height:1.5em;}
.ycntmod .mbd ul.list li.more {margin:-3px 0 0 -3px;text-align:right;background:url(圖片網址2)48px center no-repeat;}
語法說明:
圖片網址1 ==>左右二個分類欄的小圖
圖片網址2 ==>文章分類內==>所有文章,這個連結前的小圖
left .3em → 3em 數字越大,圖片越往下移動
no-repeat;padding-left:15px;margin → 圖與文字的距離 數字越大 距離越遠
margin-bottom:2px;_margin-bottom:3px → 與此行底部邊際距離
_line-height:1.5em → 此行 圖 的所在高度 數值越大 高度越高
編輯好語法後,貼到自訂樣式最後一行即可。
PS.要在 /*Nav module header*/ 這個語法之前...應該吧,我是這樣做才成功的,圖也不能太大!
CSS 招呼語底圖
語法範例:
/*Opacity for blast*/
#yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(http://xxxxx.gif) no-repeat}
1.opacity:100 → 是透明度 數字越大越透明。
2.圖片網址 → 是你要的招呼語底圖(在圖片上按右鍵→內容→網址→複製網址)。
3.no-repeat → 是圖片不重複。要圖片重複改成 repea t即可。
圖片重複會填滿整個招呼語底圖。
編輯好語法貼到「自訂樣式」的最後一行即可。
PS.要在 /*Nav module header*/ 這個語法之前...應該吧,我是這樣做才成功的!
CSS 語法教學-Blog 名稱字型更改
語法範例:
/*Blog title部落格名稱-顏色設定*/ #yblogtitle .mbd,#yblogtitle .mft{background-color:#ff0000; color:#0000FF;font-family:華康少女文字W3;font-size:130%} #yblogtitle h1{color:#0000FF;font-family:標楷體;font-size:130%} |
color:#0000FF → 改色碼
font-size:130% → 改文字大小
font-family → 華康少女文字W3
font-family → 標楷體
CSS 語法教學-文章標題圖案 & 字型
語法範例:
/*article content module*/
.yblogcnt .blgtitlebar {margin-bottom:10px;zoom:1;}
.yblogcnt .blgtitlebar h2 {font-size:126%;font-weight:bold;background:url(http://xxxxx.gif) no-repeat;padding-left:32px;fout-family:字型}
.yblogcnt .blgtitlebar h2 a {color:#195693; padding-right:5px;}
1.126% → 字型大小
2.要在 /*Nav module header*/ 這個語法之前。
CSS 卷軸變色教學
語法範例:
SCROLLBAR-FACE-COLOR: 色碼; /*設定軸面顏色*/
SCROLLBAR-HIGHLIGHT-COLOR:色碼; /*設定軸面三角左邊顏色*/
SCROLLBAR-SHADOW-COLOR: 色碼; /*設定軸面三角右邊顏色*/
SCROLLBAR-3DLIGHT-COLOR: 色碼; /*設定左立體邊顏色*/
SCROLLBAR-DARKSHADOW-COLOR: 色碼; /*設定右立體面顏色*/
SCROLLBAR-ARROW-COLOR: 色碼; /*設定箭頭的顏色*/
SCROLLBAR-TRACK-COLOR: 色碼; /*設定軸軌的顏色*/
CSS 自訂欄位-新增可愛圖片、連結網址教學
就跟一般 html 是一樣的
插入Flash:
[iframe src='你的flash檔' width="120" height="120"></iframe]
width → 寬,height → 高,自訂欄位內寬最好是120
請記得把上面的 [ & ] 改回 < & >
CSS 語法教學-滑鼠游標
語法範例1.
body{cursor:url(平時游標);}
a:hover{cursor:url(連結時游標);}
語法範例2.
body{cursor:hand;}
a:hover{cursor:crosshair;}
藍色部份為滑鼠圖案。
語法格式:
se-resize(向右下箭頭) sw-resize(向左下箭頭)
auto(自動決定) default(預設值)
crosshair(十字) hand(手形)
move(移動時的游標) help(有問號的游標
text(文字編輯的游標) wait(忙碌中的游標)
w-resize(向左箭頭) e-resize(向右箭頭)
n-resize(向上箭頭) ne-resize{向右上箭頭)
nw-resize(向左上箭頭) s-resize(向下箭頭)
語法範例1是用圖檔下去改,而語法範例2是用語法控制內定的圖案
CSS 語法教學-去除連結底線
語法範例:
/*Links文章去除連結底線*/
a,a:link,a:visited{color:#002971;text-decoration: none}
a:hover{color:#6699FF;background-color: #FF00FF;text-decoration: none;}
語法說明:
color:#660000 → 改顏色
none → 加這句 去除連結底線
a,a:link,a:visited{color:#002971 → 超連結字體顏色 → 314
a:hover{color:#6699FF → 滑鼠停在超連結中文字的顏色 → 314
background-color: #FF00FF → 滑鼠停留在超連結中文字的底色 → 314
CSS 語法教學-更新日期前-小圖
語法範例:
/*Module latest upup更新日期前圖*/
#ymodupdate .mbd .date{background:url(http://xxxxx.gif) left center no-repeat;padding-left:7px;font-size:89%;font-family:verdana;}
語法說明:
padding-left:7px → 圖檔和右邊文字相差距離,數字越大,兩者之間距離越遠
font-size:89% → 圖檔大小
CSS 語法教學-框線設定
框線語法:
/*Opacity for blogtitle上橫框 框線*/ #yblogtitle .rctop、#blogtitle .rctop div、#yblogtitle .rcl、#yblogtitle .rcr、#yblogtitle .rcbtm、#yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:77) border-bottom:3px double #0033FF ; border-top:3px double #0033FF; border-left:3px double #0033FF; border-right:3px double #0033FF } |
/*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:79) border-bottom:3px double #0033FF; border-top:3px double #0033FF; border-left:3px double #0033FF; border-right:3px double #0033FF} |
/*Opacity for main content文章區框線*/ .yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div {zoom:1; filter:alpha(opacity:78) border-bottom:3px double #0033FF; border-top:3px double #0033FF; border-left:3px double #0033FF; border-right:3px double #0033FF} |
/*部落格大框線*/ body {border: 5px double #0033FF ;} |
語法說明:
藍色-改色碼 → color:#904E0E
opacity:100 → 不透明
opacity:0 → 透明
1px → 為外框的厚度,數值越大寬度越大,可自行設定。
設成 0px 則可消除外框
double → 可改為下列不同樣式的外框
solid(實心線)
dotted(點)
dashed(短線)
double(雙實線)
立體效果:
groove(立體內凸框)、ridge(立體浮凸框)、inset(凹框)、outset(凸框)
CSS 語法教學-關於文字&底圖顏色
語法範例:
/*Blog title部落格名-顏色設定*/
#yblogtitle .mbd,#yblogtitle .mft{background-color:#FFFFCC; color:#ffffff;font-family:標楷體;font-size:130%;}
#yblogtitle h1{color:#0000FF;} background-color: #CCFFFF;font-family:標楷體;font-size:130%;}
語法說明:
background-color:#FFFFCC → 標題橫圖的底色
color:#ffffff → 標題下字體顏色
#yblogtitle h1{color:#0000FF;} → 文字顏色
background-color: #CCFFFF; → 文字底色
font-family:標楷體;font-size:130%; → 更改字型 & 大小
CSS 語法教學-關於背景圖
文章背景語法
去除連結底線+圖片背景語法範例:
/*Main content body*/ .yc3pribd .mbd、.yc3pribd .mft、#yreplymsg table、#ysbscrblist table、#ybloginfo table、#yusrinfo table、#yusrintro p{ background-image:url(http://xxxxx.gif); color:#1A4066} #ymodcal .mbd td strong {color:#3B9DC1;} |
CSS 頂端功能欄更換背景語法
/*Master header*/ #yhtw_masthead{background-image: url(http://xxxxx.gif);color:#000080;filter:alpha(opacity=50); opacity:0.30; moz-opacity:0.5;} #yhtw_masthead a,#yhtw_masthead a:link,#yhtw_masthead a:visited,#yhtw_masthead a:hover{color:#000080;} /font> |
語法說明:
/*Master header*/
#yhtw_masthead{background-image: url(http://xxxxx.gif); → 紅色部分更換圖檔
color:#000080;filter:alpha(opacity=50); opacity:0.30; moz-opacity:0.5;}
#yhtw_masthead a,#yhtw_masthead a:link、
#yhtw_masthead a:visited,
#yhtw_masthead a:hover{color:#000080;} → #更換文字顏色色碼
CSS 左右兩側標題背景圖語法範例
/*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{ background:#FBF2CA; color:#90620E;background-image:url(http://xxxxx.gif); |
1.紅色-改顏色
2.灰色-改圖片
留言列表