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 #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

統一發票7 8月

社群網站 設計 css plurk