August 12,2008 20:04

Plurk版型任你換之CSS簡易教學

原文網址
Plurk真的越來越好玩了,現在還可以開放Karma25以上的噗浪客自行修改版型,不過必須會基本的CSS才可以,今天我大概把玩了一下,真的很有趣。許多噗友也躍躍欲試,希望可以交流一下修改版面的方法,只是小妹我正在上班阿,只能先寫個簡單的教學,希望大家別棄嫌阿(笑)

從我的檔案旁邊的edit進入,再選自訂外觀,編輯CSS的地方就在下圖圈選處。把下方的語法複製貼上後,開始照自己想要的顏色、圖片修改就OK啦!!




看看我的噗浪版面!!


/*全頁面背景修改*/
body, html {
background-image: url(圖片網址);
background-repeat: repeat;
color: black;
}

/*頁首的BAR左半部*/
#top_bar .content a{color:#ff0099[字的顏色]; font-weight: normal ;}
#top_bar .content a:hover{color:#ff0099; font-weight: normal ;}
#top_bar .content a#edit_link{color:#ff0099; font-weight: bold ;}

/*頁首的BAR右半部*/
#top_login a{color:#ff0099;}

/*河道底色或圖案*/
#timeline_holder {
background-image: url(背景圖網址);
background-repeat: repeat; background-color:#ffffcc[底色]
}
#timeline_holder #timeline_cnt #time_show {}
#timeline_holder #timeline_cnt #display_options_holder {}
#timeline_holder #timeline_cnt .day_start {background-color:#F09} /*換日線*/
#timeline_holder #timeline_bg .bottom_start , .bottom_end {color:#111} /*時間軸柱的顏色*/
#timeline_holder #bottom_line {background-color:#FFF; border:0px ;} /*時間軸柱背景色*/

/*河道上浪友發的浪*/
.plurk_cnt {background-color:#ffffff ; border-color:#f09 ;}
a.name{color: #111;}
.text_holder {color: #1aa;}

/*河道下方更新通知*/
#updater {border:0; }
#updater #noti_np #noti_np_text{color:#f09; }/*左*/
#updater #noti_np a{color:#fff;}
#updater #noti_re #noti_re_view #noti_re_text {color:#fff}
#updater #noti_re #noti_re_view a{color:#f09;}

/* 整個控制面板底圖 */
#plurk-dashboard
{
background: #000000 url(底圖網址);
background-repeat: repeat;
}

/*控制面板鍵入訊息處*/
#main_poster .qual_holder{color:#004080; font-wight:bold ; font-size:20px[字型大小];}

/*控制面板更改plurk私密、語系和選項等等*/
#more_options {border:0px solid #CCC;}
#more_options a#more_options_link {}
#more_options #plurk_to{color:#000;}
#more_options #more_options_holder{}

/*控制面板頭像和年紀、位置標示處*/
#dash-profile p#full_name{color:#369}
#dash-profile #span_years , #m_or_f{font-size:14px;}


/*控制面板自介*/
#dash-additional-info {font-family: Verdana, Arial;}
#dash-additional-info #about_me{color:#00C}
#dash-additional-info #about_me a{color:#F06}
#dash-additional-info #about_me a:hover{color:#C00;font-size:14px;}

/*控制面板STATS欄位(Karma等等數據欄位)*/
#dash-stats{}
#dash-stats h2{color:#FFF; background-color:#666}
#dash-stats #karma {color:#C00;font-family: Arial}
#dash-stats table tbody tr th{}
#dash-stats table tbody tr td{font-weight:bold;}

/*控制面板朋友 friend 欄位*/
#dash-friends {}
#dash-friends h2{color:#FFF; background-color:#666}
#dash-friends #friend_holder{border:1px solid #aaa ;}

/*控制面板粉絲 FANS欄位*/
#dash-fans{}
#dash-fans h2{color:#FFF; background-color:#666 }

如果發懶而想直接套用我的版型,請直接按這個連結囉!
[套用凱特|該該的版型]
成功了嗎?操作起來若有問題再留言討論囉!我繼續上班XD

  • 您可能有興趣的文章:

    todo list
    katejane12 發表於樂多回應(0)引用(0)部落格工具編輯本文
    樂多分類:文字創作切換閱讀版型 │昨日人次:0 │累計人次:1723
     

    引用URL

    http://cgi.blog.roodo.com/trackback/6775485