電氣外科醫MAX

稍微玩了一下Plurk的CSS，其實有個基底樣式來做修改，應該很好懂。 不過，大概是國人玩Plurk的數量不多之故，網路上的中文Plurk CSS語法教學資源並不多。想說既然也把幾個人催眠進Plurk了，就分享一下自己的樣式好了。依樣畫葫蘆一下，應該就可以做出自己想要的漂亮樣式。
 

只要Karma值大於25，按左上角編輯→自訂外觀，即可自己撰寫CSS，自定義版面。

原始碼：

/*個人頁面標題*/

#page_title {
    padding: 1px ;
    color: #757575;
} 

/*全頁面背景修改*/
body, html {
background-image: url(http://i47.photobucket.com/albums/f172/buffoon123/august08-grey-nocal-1680x1050.jpg);
background-repeat: no-repeat;
background-color: #b5b5b5;
}

/*頁首的BAR左半部*/
#top_bar .content a{color:#f09; font-weight: normal ;}  /*「我的檔案、我的朋友、訊息」字樣*/
#top_bar .content a:hover{color:#f09; font-weight: normal ;}  /*滑鼠滑過效果*/
#top_bar .content a#edit_link{color:#7f40bf; font-weight: bold ;}  /*左上角「編輯」字樣*/

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

/*河道底色或圖案*/
#timeline_holder {
background-image: url(http://i47.photobucket.com/albums/f172/buffoon123/august08-grey-nocal-1680x1050.jpg);
background-repeat: no-repeat;
}
#timeline_holder #timeline_cnt #time_show {}
#timeline_holder #timeline_cnt #display_options_holder {} /*河道右邊「搜尋」字樣背景底色*/
#timeline_holder #timeline_cnt .day_start {background-color:#FFFfilter:alpha(opacity=70);opacity:0.7;zoom:1} /*換日線(左邊)*/
#timeline_holder #timeline_bg .bottom_start , .bottom_end {color:#111} /*時間軸柱的文字顏色*/
#timeline_holder #bottom_line {background-color:#FFF; border:0px ;filter:alpha(opacity=70);opacity:0.7;zoom:1;} /*時間軸柱背景色*/

/*河道上浪友發的浪*/
.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; }/*「X則新的Plurk更新」字樣*/
#updater #noti_np a{color:#7f40bf;} /*「更新」字樣*/
#updater #noti_re #noti_re_view #noti_re_text {color:#f09}/*「X則新的回應檢視」字樣*/
#updater #noti_re #noti_re_view a{color:#7f40bf;} /*「更新」字樣*/

/* 整個控制面板底圖 */
#plurk-dashboard
{
background: #70b5b5 url();
background-repeat: repeat;
filter:alpha(opacity=80);opacity:0.8;zoom:1;
}

/*控制面板鍵入訊息處*/
#main_poster .qual_holder{color:#308a7b;filter:alpha(opacity=70);opacity:0.7;zoom:1 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: 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}
#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}
#dash-friends #friend_holder{border:1px solid #aaa ;}

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

另外，放在Blog的widget樣式也可以修改，請參考：Plurk 的 Widget 樣式修改方法，我太懶了，沒改。

轉自：http://handsandleg.pixnet.net/blog/post/20889124

====================================================

/*全頁面背景修改*/
body, html{}

/*標題*/
#page_title{}

/*頁首的BAR左半部*/
#top_bar .content a{}
#top_bar .content a:hover{}
#top_bar .content a#edit_link{}

/*頁首的BAR右半部*/
#top_login a{}

/*河道底色或圖案*/
#timeline_holder{}
#timeline_holder #timeline_cnt #time_show{}
#timeline_holder #timeline_cnt #display_options_holder{}
#timeline_holder #timeline_cnt .day_start{} /*換日線*/
#timeline_holder #timeline_bg .bottom_start , .bottom_end{}
#timeline_holder #bottom_line{}
.day_bg .div_inner{}

/*河道上浪友發的浪*/
.plurk_cnt{}
a.name{}
.text_holder{}
.p_img{}

/*河道下方更新通知*/
#updater{}
#updater #noti_np #noti_np_text{}/*左*/
#updater #noti_np a{}
#updater #noti_re #noti_re_view #noti_re_text{}
#updater #noti_re #noti_re_view a{}

/* 整個控制面板底圖 */
#plurk-dashboard{}

/*控制面板鍵入訊息處*/
#plurk_form{}
#main_poster{}
#main_poster .qual_holder{}
textarea#input_big.content{height: 100px; }/*對話框大小*/
.time{}
#cur_time{}

/*控制面板更改plurk私密、語系和選項等等*/
#more_options{}
#more_options a#more_options_link{}
#more_options #plurk_to{}
#more_options #more_options_holder{}

/*控制面板頭像和年紀、位置標示處*/
#dash-profile{}
#dash-profile #full_name{}
#dash-profile #span_years ,#m_or_f{}
#profile_pic{width: 70px; }/*個人圖像大小的控制*/

/*控制面板自介*/
#dash-additional-info{}
#dash-additional-info #about_me{}
#dash-additional-info #about_me a{}
#dash-additional-info #about_me a:hover{}

/*控制面板STATS欄位(Karma等等數據欄位)*/
#dash-stats{}
#dash-stats h2{}
#dash-stats a{}
#dash-stats #karma{}
#dash-stats table tbody tr th{}
#dash-stats table tbody tr td{}

/*控制面板朋友 friend 欄位*/
#dash-friends{}
#dash-friends a{}
#dash-friends h2{}

/*控制面板粉絲 FANS欄位*/
#dash-fans{}
#dash-fans a{}
#dash-fans h2{}
#dash-fans-pics a img{}
.show_all_friends{}

/*朋友及粉絲的圖像大小的修改完整版*/
.friend_holder .user_link{height: 22px!important; width: 22px!important; border: none!important; }
.friend_holder img{width: 22px; height: 22px; border: none; }

/*底部*/
#footer{}
#footer a{}

/*其他對話格大小*/
#input_small {height: 70px;}
td.td_cnt textarea { height:100px; }

一些 css 的特殊效果：

背景轉換 background: transparent;

無邊框 border: none;

半透明 filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; (以 1 到 0.1 的方式呈現，愈低愈透明，若修改三個數字都要改)

圖弧 -moz-border-radius: 10px; ( 僅呈現在 Firefox，數字可以10.15.20.22 之類的寫法 )

轉自：http://june55.pixnet.net/blog/post/25721969