佈景主題與css控制碼

2009年8月14日 星期五

Plurk除了聊天之外,支援自行修改CSS來改變整站佈景主題的功能也是個很有趣的特色,一般使用者都可以在登入Plurk後,直接按左上角的〔編輯〕→〔自訂外觀〕,來修改「個人頁面」的CSS樣式,透過這些CSS控制碼幫我們的個人頁面改頭換面。另外也可以套用別人安裝好的整站CSS樣式,如同下面所引用的這些佈景主題一樣,直接按一下網址就可以將你的Plurk個人頁面改成全新的樣式囉。
Plurk佈景主題下載網站:
PlurkTemplates
http://www.plurkthemes.com/
Plurk Customized Theme Emporium
The Plurk Themes Pool
Plurk Theme Sate Bab
Plurk Layouts, Plurk Themes, Plurk Designs, Plurk CSS
http://www.letters-to-you.com/category/graphics/
100個令人驚艷的Plurk佈景主題
http://plurk-layout.com/
Plurk的CSS,其實有個基底樣式來做修改,應該很好懂,只要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 }

/*控制河道中對話框的大小*/#input_small {height: 70px; } td.td_cnt textarea { height:100px; }

0 意見:

張貼留言