2010年10月31日 星期日

噗浪CSS整理

呼......窗外陰雨綿綿,從上個週六(2010/3/06)傍晚開始,這天氣的轉變還真是快啊!原本短袖短褲上陣的我,隨著氣溫越來越低、風勢越來越強,先是加了一件長袖;後來又換上長褲;最後還得加件薄背心,才足以應付這惡劣的天氣(同時也為了預防感冒)。聽說又有新一波寒流即將來襲,噗友們出門在外,可要多加注意保暖,不要著涼感冒囉!^0^

咦?怎麼會提到這個?今天要和各位分享的是:《Plurk CSS語法教學》。其實說「教學」,對我而言,實在是太自不量力了,畢竟我不懂程式語言,以下我所分享的一切,都是網路上的先進大德、各路高手所熱情提供的,我只不過是收集過來,整理一番罷了。在「臉書」尚未在台灣造成風潮以前,噗友們對於「噗浪的CSS語法」的討論情形還算踴躍,不時有高手分享新的語法,讓噗浪的介面顯得更漂亮、更方便瀏覽。如今大家對於這方面的討論就沒這麼踴躍了,但還是有零星噗友(特別是新手),偶爾會有這方面的問題與困擾。所以今天就來做個《Plurk CSS語法-懶人包》吧(還真不要臉兼自不量力的說法啊!(被毆)!

好吧!話不多說、事不宜遲(謎之聲:難道你還想繼續廢話下去嗎?),咱們就進入正題吧!要談到「噗浪的CSS」,首先,就先來對「CSS語法」有個初步的認識吧!

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓我是分隔線,請注意裡頭的內容即可!↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

※文字的部份===>
不管是文字或框線,顏色碼前面一定要加#,這樣才會顯示出來。

文字顏色=color: #000;

文字大小=font-size: 8pt;

文字字體=font-family: “arial”, dotum;

文字斜體=font-style: italic;

小字體=font-variant: small-caps;

字間距離=letter-spacing: 1pt;

行高=line-height: 15px; (亦可用百分比來顯示)

文字粗體=font-weight: bold;

加底線=text-decoration: underline;

加刪除線=text-decoration: line-through;

加頂線=text-decoration: overline;

刪除連線底線=text-decoration: none;

首字大寫=text-transform: capitalize;

英文大寫=text-transform: uppercase;

英文小寫=text-transform: lowercase;

文字靠左=text-align: left;

文字靠中=text-align: center;

文字靠右=text-align: right;

文字分散對齊=text-align: justify;


※背景/背景顏色的部份===>

背景的顏色=background: #e9e9e9;

背景圖片不重複=background: url(圖片的真實位址) no-repeat;

背景重複=background: url(圖片的真實位址) repeat;

背景Y軸重複=background: url(圖片的真實位址) repeat-y;

背景X軸重複=background: url(圖片的真實位址) repeat-x;

背景浮水印固定=background: url(圖片的真實位址) fixed;

背景置中=background-position: center;

背景靠左=background-position: left;

背景靠右=background-position: right;

背景靠上=background-position: top;

背景靠下=background-position: bottom;

簡易寫法===>

background: url(位址) no-repeat top center fixed #fff;
●備註:位址請記得不是複製上方的網址,而是在圖片上方按右
鍵內容裡的那個網址!另外,那個「fixed」在噗浪裡頭很少會用到,
可以不用(但還是要看語法設定)。

※框線/全框線的部份===>

border: 1px solid #000;
註:那個 #000 指的是框線的顏色;1px 指的是框線的粗細度,數字越大則越粗。

上框線=border-top: 1px solid #000;

下框線=border-bottom: 1px solid #000;

右框線=border-right: 1px solid #000;

左框線=border-left: 1px solid #000;

※框線種類===>

直線=solid

點線=dotted 

虛線=dashed 

雙線=double 

立體內凸=groove 

立體浮凸=ridge 

凹框=inset 

凸框=outset 

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑我是分隔線,請注意裡頭的內容即可!↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

現在,大家都對「基本的CSS語法」有了初步的認識吧?接下來,就來介紹「基礎的Plurk CSS語法」,也是早期我所使用的語法。其實我個人比較偏好「懶人更換主題法」,這是什麼意思呢?也就是說,我只要「更換背景圖片(全頁面式,非單一區塊)」即可擁有新的心情(不管心情是好是壞,XD)。這道理,就像是「更換作業系統的桌布」那樣,而不是整個「佈景主題」都更換。

我習慣修改CSS語法到一定階段之後,就不去更動它;因為套用了新的主題,意味著很多地方(細節)也都跟著變動;如此一來,好不容易已經習慣使用了,套用了新主題之後,又要花時間來適應。不過這種問題是見仁見智啦,像我本身就喜歡把「發噗框、噗文回應框、獨立噗文的回應框」都把它放大,好方便預覽輸入的文字,但並非每個噗友都喜歡這種作法,所以我到別人家要回應對方的噗文,就很不習慣對方的小框框,XD。像是有個噗友,我每次去她家看,發現每次的佈景主題都不同,似乎同一個主題所維持的時間,都不超過一個禮拜,還真是善變的女孩兒啊!(被踹飛

喔對了,每段CSS語法的說明文字,要記得放在兩個雙斜線+雙米號裡面,例如像這樣:/*頁首的BAR左半部*/。而這個「雙斜線+雙米號說明」,不管你要放在語法前面還是後面都可以(就是不要放在語法裡面,否則語法會不能套用,XD)。那個「雙米號」一定要寫,否則語法會失效,噗浪頁面就會呈現出系統預設的樣式。至於裡頭的說明文字,不管多長多短,都不會影響語法的套用(反正說明文字一定要擺在「雙斜線+雙米號」的裡頭就對啦!)

↓↓↓↓以下就是我早期愛用的語法,當然也是別人寫好的,XD。不過這只是範例說明,直接套用可能會產生錯誤,因為這語法我已經很久不用了,XD↓↓↓↓

/*全頁面背景修改(這裡就是可以放置背景圖片的語法區域,只要更換裡頭的圖片位址,背景圖片就會更換了,但是要注意圖床有無外連限制,不可外連的圖床空間,圖片不會在噗浪頁面正常顯示。至於圖片位址後的「repeat(no-repeat)」指的是要不要讓圖片重複堆疊(端看圖片的尺寸大小)。「center, top, bottom, right, left」指的是圖片的擺放位置,不過相對位置不能同時寫上,例如不能同時寫「top bottom」,要嘛就靠上,要嘛就靠下,左右亦同。)*/
body, html {
background: url(http://i.imgur.com/xUtFa.jpg) repeat center ; color: #fff; font-family: "Century Gothic"; font-size: 12px; }

/*頁首的BAR左半部*/
#top_bar .content a{color: #FFFFF0; font-weight: normal; }
#top_bar .content a:hover{font-weight: normal; }
#top_bar .content a#edit_link{font-weight: bold; }

/*頁首的BAR右半部*/
#top_login a{color: #FFFFF0; font-weight: normal; }

/*河道底色或圖案*/
#dynamic_logo {filter:alpha(opacity=0) ; -moz-opacity:0; opacity: 0;}
#timeline_holder {background: transparent; border: none; }
#timeline_holder #timeline_cnt #time_show {background: transparent; }
#timeline_holder #timeline_cnt #display_options_holder {}
#timeline_holder #timeline_cnt .day_start {background: transparent; } /*換日線*/
#timeline_holder #timeline_bg .bottom_start , .bottom_end {background: transparent; color: #fff; }
#timeline_holder #bottom_line {background: transparent; border-bottom: 1px solid #999; }
.day_bg .div_inner{background: none; border: none; }

/*河道上浪友發的浪*/
.plurk_cnt {background:#ffffff ; filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; border: none; -moz-border-radius:20px 1px 20px 1px; }
a.name{color: #111; font-family: "Century Gothic"; }
.text_holder {color: #2D4B78; font-family: "Century Gothic"; font-size: 13px; }

/*河道下方更新通知*/
#updater {background: transparent; border:0; }
#updater #noti_np #noti_np_text{color:#fff; }/*左*/
#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:#aaa; }

/* 整個控制面板底圖 */
#plurk-dashboard{background: transparent; border: none; }

/*控制面板鍵入訊息處*/
#plurk_form{color: #fff; font-size: 18px; }
#main_poster{}
#main_poster .qual_holder{color: #fff; font-wight: bold; font-size: 28px; }
textarea#input_big.content {height: 70px; wrap: soft; border: 1px solid #aaa; }
#cur_time{font-size: 18px; }

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

/*控制面板頭像和年紀、位置標示處*/
#dash-profile{width: 210px; color: #fff; line-height: 18px; padding: 8px; margin: 8px; }
#dash-profile #full_name , color: greenyellow{font-size:15px; }
#dash-profile #span_years , skyblue{font-size:15px; }
#profile_pic{width: 149px; border:none}/*個人圖像大小的控制*/

/*控制面板自介*/
#dash-additional-info{width: 210px; height: 200px; color: #111; line-height: 18px; background:#ffffff ; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.6; border: none; -moz-border-radius:20px 1px 20px 1px; padding: 8px; margin: 5px; }
#dash-additional-info {color: #000; font-family: "Century Gothic"; font-size: 15px; line-height: 18px; }
#dash-additional-info #about_me{color: #000; }
#dash-additional-info #about_me a{color: #C34B00; text-decoration: none; }
#dash-additional-info #about_me a:hover{text-decoration: underline; }

/*控制面板STATS欄位(Karma等等數據欄位)*/
#dash-stats{width: 210px; height: 280px; color: #111; line-height: 18px; background:#ffffff ; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.6; border: none; -moz-border-radius:20px 1px 20px 1px; padding: 8px; margin: 5px; }
#dash-stats h2{font-size: 15px; color: #000; background: none; border: none; }
#dash-stats a{color: #1E0F78; }
#dash-stats #karma {color: #C00; }
#dash-stats table tbody tr th{font-size: 12px; color: #333; }
#dash-stats table tbody tr td{font-size: 12px; color: #784B00; }

/*控制面板朋友 friend 欄位*/
#dash-friends {width: 210px; height: 280px; color: #111; line-height: 18px; background:#ffffff ; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.6; border: none; -moz-border-radius:20px 1px 20px 1px; padding: 8px; margin: 5px; }
#dash-friends a{color: #1E0F78; }
#dash-friends h2{font-size: 15px; color: #000; background: none; border: none; }
#dash-friends #friend_holder{border: none; }

/*控制面板粉絲 FANS欄位*/
#dash-fans{width: 210px; height: 280px; color: #111; line-height: 18px; background:#ffffff ; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.6; border: none; -moz-border-radius:20px 1px 20px 1px; padding: 8px; margin: 5px; }
#dash-fans a{color: #1E0F78; }
#dash-fans h2{font-size: 15px; color: #000; background: none; border: none; }

#footer{color: #f0f0f0; }
#footer a{color: #f0f0f0; }

#input_small {height: 70px;}
td.td_cnt textarea { height:100px; }

/*這個是在個人自介,放置「小圖示」的語法,可以凸顯個人特色,XD。看個人要不要加啦!因為放個小圖示有時候會在「個人自介」這個區域不協調,就是小圖示的位置要調整,也就是padding的數字都要微調,才不會產生衝突感,而這件事情本身是挺耗時的。*/
#location{padding-right:18px; padding-top:6px; padding-bottom:6px; background:url(http://i529.photobucket.com/albums/dd333/KururuSocho/misc/Taiwan_Light.png) right no-repeat;}

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑我是分隔線,請不用理我!↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

接下來,就是我「現正使用中」的語法了,可以說是「進階版的Plurk CSS語法」,以後應該也不會更換它了吧?畢竟修改語法真的曠日廢時,不應該在這上面浪費太多時間啊!(笑。老樣子,這套語法同樣也是別人寫的,只是我又添加了自己喜歡的語法而已,稍後會附上原始語法。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓我是分隔線,請不用理我!↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓


/*噗浪背景CSS - Rilakkuma Cafe(原始CSS來源)*/
/*design by Be Myself Inc. M6*/
/*此佈景主題安裝網址(非M6原版,而是「馬力歐」版本,XD):http://www.plurk.com/installDesign/3460622-27f0f47007*/


/*主背景*/
body, html{
background:url(http://i.imgur.com/xUtFa.jpg) center bottom no-repeat; background-color:#494949;
color: #f19db4; 
font-size: 13px; 
font-family: "Microsoft JhengHei"; }

/*語言字型*/
body.language-large-font{font-size:12px !important; font-family: "Microsoft JhengHei"; }

/*噗浪最上方的標題*/
#page_title{font-size: 13pt; color: #d8a965;font-family: "Microsoft JhengHei";font-weight: bold; }

/*頁首*/
#top_login { }
#top_bar a, a#interesting_plurkers, a#account, a#login_link { font-family: "Microsoft JhengHei"; color:#d8a965;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;}
#top_bar a:hover, #top_login a:hover {
color: #FFF;background-color: #d8a965;-moz-border-radius: 6px; 
}
#top_bar .content a#edit_link{text-decoration:none;color: #d8a965;background-color: #fff;-moz-border-radius: 6px;} 
#top_bar #edit_link:hover { text-decoration:none;color: #FFF;background-color: #d8a965;-moz-border-radius: 6px; }
#top_bar .on img { border: none; }
.count { color: #f8c6c7; }

/*通知數字*/
#alert_beacon.count {
color:#ea5503;
font-size:12px;
font-weight:bold;
}

/*頁尾*/
#footer{color: #d8a965;font-family: "Microsoft JhengHei"; border:0; }
#footer a{color: #d8a965; font-family: "Microsoft JhengHei"; text-decoration: none; }
#footer a:hover{color: #FFF;background-color: #d8a965;-moz-border-radius: 6px; }

/*時間軸*/
#timeline_holder {
background: transparent;
border: none; color: #FFF; font-size: 12px; font-family: "Microsoft JhengHei";
}
#timeline_holder #timeline_cnt .day_start,#timeline_holder #timeline_cnt #time_show {background:transparent;}
.bottom_start , .bottom_end {background: transparent; color: #000000; font-family: "Microsoft JhengHei";font-size:10px;}
#bottom_line {background: #FFF; border: none; filter: alpha(opacity=20); opacity: 0.2; -moz-opacity: 0.2; }
#timeline_bg .day_bg .div_inner { 
background: #FFF; 
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 10px;height:10px; border:0; 
}

/* 時間顯示 */
#time_show span {color: #000000;font-weight:bold;}
.day, .morning {
background:#f19db4;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter:alpha(opacity=80) ; -moz-opacity.8; opacity:.8;
background-position:-0px 20px;text-align:center;position:absolute;
}
.evening, .night {
background:#f19db4;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter:alpha(opacity=80) ; -moz-opacity.8; opacity:.8;
background-position:-0px 20px;text-align:center;position:absolute;
}

/*LOGO(就是把噗浪頁面右上方的那隻生物,用語法覆蓋過去,將牠封印!XD)*/
#dynamic_logo{position:absolute;margin:3px 0 0 5px;width:168px;height:162px;background: transparent;}
#dynamic_logo img{height:0px;width:0px;}

/*噗浪客發噗時的名稱顯示(指河道上的浪花)*/
a.name{color: #9426BA; font-family: "Microsoft JhengHei"; font-size: 14px }

/*河道上的噗*/
.plurk_cnt {
font-size: 12px;
padding: 2px;
font-family: "Microsoft JhengHei"; 
line-height: 16px;
letter-spacing:.1em;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter: alpha(opacity=40);opacity: 0.70;ZOOM: 1;
background-color: #ffdb00;
border: 2px solid #d8a965;
}

/*回應列表標題*/
.plurk_box .caption {
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background:#d8a965;
font-size: 12px;
line-height: 18px;
padding: 2px;
font-family: "Microsoft JhengHei"; 
filter:alpha(opacity=90) ; -moz-opacity.9; opacity:.9;
}

/*回應列表展開*/
.plurk_box .plurk_cnt .text_holder {font-size: 15px; font-family: "Microsoft JhengHei";line-height: 18px;letter-spacing:.1em;} 

/*回應列表框線*/
.plurk_box .caption,.plurk_box .list,.plurk_box .mini_form {
border-right:2px solid #d8a965;border-left:2px solid #d8a965;
}


/*回應列表*/
.plurk_box .list {-khtml-border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;height: 360px;}
.info_box {
-khtml-border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
border-left: 2px solid #d8a965;border-right:2px solid #d8a965;border-bottom: 2px solid #d8a965; color: #d8a965;}
.info_box a {color:#60767A;font-size:12px;}

textarea#input_small {height: 130px; font-size:20px;
-khtml-border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
border:1px solid #d8a965; color: #000 !important;}/*單一噗文裡最下方的輸入框高度控制*/

td.td_cnt textarea {height:140px;}/*噗文的編輯修改框,高度控制*/

.list {
-khtml-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}
.list empty {color: #ea5503;} 

/* 加高獨立噗文網頁的回應框 */
textarea#input_permalink.content {height:140px;}


.list .plurk_cnt .td_cnt .text_holder { margin-left:1em; margin-top:1em; padding:0.5em; width:auto !important; }/*每個噗友的單一回應小區塊*/

.list .plurk_cnt tr { border-bottom: 2px dotted #d8a965;line-height:136%;} /* 噗文內的每則回應分隔線 */

.plurk_cnt tr:hover {background-color:#FFEC00;} /* 回噗對話框游標位置底色 */

/*回覆區原噗者回覆暱稱設定*/
.list .highlight_owner .td_qual a {color:#f19db4 !important ; }

.list .plurk_cnt .td_qual {overflow:visible; position: absolute; width:auto; }/*噗友回應時,將冗長的暱稱變成獨立一行*/

.highlight_owner .plurk_cnt .text_holder { background: #549D00 !important; }/*噗主回應時的專屬底色*/

/*浪上的噗友圖*/
.p_img {
border: 3px solid #d8a965;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

/*回應數*/
.response_count {
background:#f19db4;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter:alpha(opacity=80) ; -moz-opacity.8; opacity:.8;
color:#60767A;
margin-left:6px;
padding:4px;
font-size:12px;
}
.new .response_count {
background:#ea5503;
font-size:12px;
filter:alpha(opacity=90) ; -moz-opacity.9; opacity:.9;
padding:4px;
}
.dots .inner {
background:#fff;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter:alpha(opacity=80) ; -moz-opacity.8; opacity:.8;
margin-left:5px;
}

/*影音圖片*/
.youtube img,.pictureservices img { border: none; }
.youtube:hover img,.pictureservices:hover img { border: 1px dotted #d8a965;}

/*噗上的連結*/
.plurk a.ex_link {color:#ea5503;font-weight: bold;text-decoration:normal;}
.plurk a.ex_link:hover {color:#d8a965;font-weight: bold;border-bottom: 0px;
text-decoration:normal;}
a:link { color: #ea5503;text-transform: normal;}
a:visited, a:active { color: #ea5503;text-transform: normal;}
a:hover { border:0;color: #d8a965;text-transform: normal;}

/* 時間軸標籤 */
#filter_tab { border:0 !important;}
#filter_tab a.off_tab {
background:#CF938E;
color:#FFF;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter:alpha(opacity=80) ; -moz-opacity:0.8; opacity: 0.8;
border:0 !important;
}
#filter_tab a.off_tab:hover {filter:alpha(opacity=100) ; -moz-opacity:1; opacity: 1;}
#filter_tab a.filter_selected {
color:#000 ; 
background-color:#d8a965; 
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter:alpha(opacity=90) ; -moz-opacity:0.9; opacity: 0.9;
border:0 !important;
}
#filter_tab a.filter_selected:hover {filter:alpha(opacity=100) ; -moz-opacity:1; opacity:1;}

/*更新通知*/
#updater {
background: #FFF; 
filter: alpha(opacity=90); opacity: 0.9; -moz-opacity: 0.9; 
border: 2px solid #d8a965; 
font-size: 13px; 
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#updater #noti_np #noti_np_text{color:#d8a965; }/*左*/
#updater #noti_np a{color:#d8a965; }
#updater #noti_re #noti_re_view #noti_re_text {color:#d8a965; }
#updater #noti_re #noti_re_view a{color:#EF6880; }

/*控制面版*/
#dashboard_holder {margin-top:30px;}
#plurk-dashboard{
color:black; 
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: transparent; 
border: none; padding: 2px; 
}
#dash-stats h2, #dash-friends h2, #dash-fans h2{
color: #d8a965; font-size: 28px; line-height: 110%; text-align: center; border: 0; font-weight: none; 
}
#plurk_form{
background: none; 
color: #d8a965 ; 
font-size: 12px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8;
}
#main_poster{color: #d8a965 ; font-wight: bold; font-size: 12px; }
#main_poster .qual_holder{color: #d8a965; font-size: 20px; font-family: "Microsoft JhengHei"; }

/*發噗的框框*/
textarea#input_big.content {
font-size: 22px; 
height: 140px; wrap: soft; padding: 2px; 
border: 1px solid #d8a965; 
filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; 
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;}
.time{font-size: 14px; }
#cur_time{font-size: 14px; }

/*控制面板: 透明度變化*/
#plurk_form, .dash-segment {filter:alpha(opacity=20) ; -moz-opacity:0.2; opacity: 0.2; }
#plurk_form, .dash-segment:hover {filter:alpha(opacity=100) ; -moz-opacity:0.9; opacity:0.9; }
#plurk_form{margin:0}

/*搜尋面板*/
#toggle_tab li {
background: none; border: none; padding: 5px; -moz-border-radius:10px; 
filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; font-size: 12px;
}
.plurkaction {clear:both;padding:8px;}.plurkaction,#toggle_tab li.tt_selected,#more_options_link{
border: 0px solid #FFF;font-size: 12px;
background:transparent;
}

/*私密語系選項*/
#more_options {}
#more_options a#more_options_link {border: none; background: none; color: #d8a965;font-size: 12px; }
#more_options #plurk_to{color:#d8a965; }
#more_options #more_options_holder{border: none; background: none; color: #d8a965;font-size: 12px; }

/*控制面板: 個人圖像*/
#profile_pic {border:2px dashed #d8a965;width: 60px;} 
#profile_pic:hover {width:auto} /*個人照片回覆大小*/

/*個人自介*/
#dash-profile{color:#d8a965; line-height: 20px; font-family: "Microsoft JhengHei";-moz-border-radius: 10px;padding:2px;}
#dash-profile p#full_name{color:#d8a965; font: 20px; }
#dash-profile #span_years , #m_or_f{font-size: 20px; }
#dash-profile:hover img{width: 200px;}
#dash-additional-info{color:#d8a965; font: 20px; line-height: 18px;-moz-border-radius: 10px; }
#dash-additional-info #about_me{color:#d8a965;-moz-border-radius: 10px; }
#dash-additional-info #about_me a{color: #d8a965; text-decoration: none; }
#dash-additional-info #about_me a:hover{color: gray; text-decoration: none; 
}

/*統計項目*/
#dash-stats h2{font-size: 22px; font-family: "Microsoft JhengHei"; font-weight: bold; color: #d8a965; background: none; border: none; }
#dash-stats{color: #d8a965;-moz-border-radius: 10px;padding:2px; }
#dash-stats #karma {color: #d8a965; }
#dash-stats a{color: #d8a965; }
#dash-stats table tbody tr th{font-size: 12px; color: #d8a965; }
#dash-stats table tbody tr td{font-size: 12px; color: #d8a965; }

/*朋友區*/
.show_all_friends{text-align: center; }
#dash-friends {color: #d8a965;-moz-border-radius: 10px;padding:2px;}
#dash-friends a{color: #d8a965; }
#dash-friends h2{font-size: 22px; font-family: "Microsoft JhengHei"; font-weight: bold; color: #d8a965; background: none; border: none; }
#dash-friends #friend_holder{border: none; }

/*粉絲區*/
#dash-fans{color: #d8a965;-moz-border-radius: 10px;padding:2px; }
#dash-fans a{color: #d8a965; }
#dash-fans h2{font-size: 22px; font-family: "Microsoft JhengHei" ; font-weight: bold; color: #d8a965; background: none; border: none;}

/*朋友粉絲圖*/
.friend_holder {margin-bottom: 4px;border:0 !important;}
.friend_holder table {margin-left: auto;margin-right: auto;}
.friend_holder .user_link{height:15px!important;width:15px!important; border:0 !important;}
.friend_holder img{width:15px;height:15px;border:0 !important;filter:alpha(opacity=5) ; -moz-opacity:0.2; opacity: 0.2; }

/*字數提醒*/
.char_updater {color:#d8a965;}

/*修飾詞*/
.q_freestyle {
-khtml-border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
border:0 solid #FFF;color:#FFF!important;font-family: "Microsoft JhengHei" ;}
.q_loves,.q_likes,.q_shares,.q_gives,.q_hates,.q_wants,.q_wishes,.q_needs,.q_will,.q_hopes,.q_asks,.q_has,.q_was,.q_wonders,.q_feels,.q_thinks,.q_says,.q_is {
-khtml-border-radius:9px;-moz-border-radius:9px;-webkit-border-radius:9px;border:0 solid #FFF;color:#FFF;font-family: "Microsoft JhengHei";}

/*小視窗*/
.tooltip_cnt{
background: #d8a965; 
filter:alpha(opacity=90) ; -moz-opacity:0.9; opacity: 0.9; 
border:1px solid #ccc;
color: #FFF;
padding:5px;
margin-top:1px;
font-size:12px;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
}
.cmp_tooltips-down {height: 17px;
background: transparent url(http://bemyselfinc.com/plurk/up_down/greyblue_down.png) no-repeat scroll left top;
}
.cmp_tooltips-up {height: 17px;
background: transparent url(http://bemyselfinc.com/plurk/up_down/greyblue_up.png) no-repeat scroll left top;
}
.AmiMenu.info_menu {background:#d8a965;border:1px solid #fff;color: #fff;}
.AmiMenu.info_menu .block {background:gray;}
.AmiMenu.info_menu td.on, .AmiMenu.info_menu .user_info.on {background: #d8a965;}
.AmiMenu.info_menu .separator {background:#d8a965;}
.AmiMenu.info_menu .user_info.on b {color: #fff;font-weight: bold;}

/*音樂播放器*透明圓角版*/
#music_player {
color:#d8a965;
font-size: 13px; 
background-color:#FFF; 
border: 1px solid #d8a965; 
-moz-border-radius: 13px; 
filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8;
}
#music_player:hover {filter:alpha(opacity=100) ; -moz-opacity:1; opacity: 1;}
#music_player a{color:#d8a965 !important;}
#music_player a:hover{color:gray!important;}

/*註冊使用BAR*/
#top_login a#sign_up,#validate_email,#sign_up_small {background:#d8a965;}
#top_login a#sign_up {border-top:1px solid #5cc2cf;border-bottom:1px solid #d8a965;}
#registerToday {background:#d8a965 !important; color:#FFFFFF; font-size:16px;}
#sign_up_small {background:#d8a965!important; color:#FFFFFF !important;}
.plurk_box .login_to_see a,.red_link{background-color:#d8a965;color:#FFFFFF;}
.plurk_box .login_to_see{background-color:#FFF;border-right:1px solid #d8a965;border-bottom:1px solid #d8a965;}

/*更換loading圖*/
.cmp_loading{background:transparent;width:0px;height:0px;}
#div_loading .cnt {
background:transparent url(http://bemyselfinc.com/plurk/loader/orange_loader03.gif) no-repeat scroll center top !important;
margin-top:140px;}
.loading img {height:0;width:0;}
.loading {
background:transparent url(http://bemyselfinc.com/plurk/loader/orange_loader01.gif) no-repeat scroll center
center !important;
margin-top:100px;
height:24px;width:24px;
}

/*封鎖使用者按鈕*/
.friend_man.block {font-color:#8400D1;
background: #d8a965 repeat scroll top left;
border-color: #d8a965 #d8a965 #d8a965 #d8a965;
-moz-border-radius: 4px 4px 4px 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-width: 2px;
}

/*追蹤朋友粉絲按鈕*/
.friend_man.add_follow, .friend_man.remove, .friend_man.add_friend, .friend_man.pending {
font-color:#8400D1;
-moz-border-radius: 6px 6px 6px 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; 
border:2px ; 
background: #d8a965;
}

/*單一Plurk頁面*/
.user-nick{color: #d8a965; }
h1{color: #d8a965;line-height:150%; }
#plurk_responses 
ul.responses li a {color: #d8a965 !important; text-decoration: none;font-size:120%;line-height:150%; }
ul.responses li a:hover {color: gray !important; }
ul.responses li a:link {color: #d8a965; text-transform: normal;}
ul.responses li a.ex_link { color: #d8a965;text-transform: normal;}
ul.responses .message a {color:#d8a965 !important; text-decoration: none;font-size:120%;line-height:150%; }
ul.responses .message a:hover {color: gray !important; }
ul.responses .message a:link { color: #d8a965;text-transform: normal;}
ul.responses .message a.ex_link { color: #d8a965;text-transform: normal;}
ul.responses li:hover span.time { color: gray;text-transform: normal;}
#reply #reply_box {background: none;}
#reply h2 {background: none;}
#reply #reply_box_holder {background: none;}


↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑我是分隔線,請不用理我!↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

是不是看得眼花撩亂?(笑。以下就附上 Miss Saturday 的原始語法!

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓我是分隔線,請不用理我!↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

/*噗浪背景CSS - Rilakkuma Cafe*/
/*design by Be Myself Inc. M6--------------------------------------*/
/* USE_DARK_ICONS */

/*主背景--------------------------------------*/
body, html{
background:url(http://farm4.static.flickr.com/3433/3864643776_b4ff3f7dc2_o.jpg) center top no-repeat; 
background-color:#fff6c5;
color: #f19db4; 
font-size: 12px; 
font-family: "verdana"; 
}

/*語言字型*/
body.language-large-font{font-size:12px !important; font-family: "verdana"; }

/*標題*/
#page_title{color: #d8a965;font-family: "verdana"; }

/*頁首*/
#top_login { }
#top_bar a, a#interesting_plurkers, a#account, a#login_link { font-family: "verdana"; color:#d8a965;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;}
#top_bar a:hover, #top_login a:hover {
color: #FFF;background-color: #d8a965;-moz-border-radius: 6px; 
}
#top_bar .content a#edit_link{text-decoration:none;color: #d8a965;background-color: #fff;-moz-border-radius: 6px;} 
#top_bar #edit_link:hover { text-decoration:none;color: #FFF;background-color: #d8a965;-moz-border-radius: 6px; }
#top_bar .on img { border: none; }
.count { color: #f8c6c7; }

/*通知數字*/
#alert_beacon.count {
color:#ea5503;
font-size:12px;
font-weight:bold;
}

/*頁尾*/
#footer{color: #d8a965;font-family: "verdana"; border:0; }
#footer a{color: #d8a965; font-family: "verdana"; text-decoration: none; }
#footer a:hover{color: #FFF;background-color: #d8a965;-moz-border-radius: 6px; }

/*時間軸*/
#timeline_holder {
background: transparent;
border: none; color: #FFF; font-size: 12px; font-family: "verdana";
}
#timeline_holder #timeline_cnt .day_start,#timeline_holder #timeline_cnt #time_show {background:transparent;}
.bottom_start , .bottom_end {background: transparent; color: #000000; font-family: "verdana";font-size:10px;}
#bottom_line {background: #FFF; border: none; filter: alpha(opacity=20); opacity: 0.2; -moz-opacity: 0.2; }
#timeline_bg .day_bg .div_inner { 
background: #FFF; 
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 10px;height:10px; border:0; 
}

/* 時間顯示 */
#time_show span {color: #000000;font-weight:bold;}
.day, .morning {
background:#f19db4;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter:alpha(opacity=80) ; -moz-opacity.8; opacity:.8;
background-position:-0px 20px;text-align:center;position:absolute;
}
.evening, .night {
background:#f19db4;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter:alpha(opacity=80) ; -moz-opacity.8; opacity:.8;
background-position:-0px 20px;text-align:center;position:absolute;
}

/*LOGO*/
#dynamic_logo{position:absolute;margin:3px 0 0 5px;width:168px;height:162px;background: transparent;}
#dynamic_logo img{height:0px;width:0px;}

/*河道上的噗*/
.plurk_cnt {
font-size: 12px;
padding: 2px;
font-family: "verdana"; 
line-height: 16px;
letter-spacing:.1em;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #FFF;
border: 2px solid #d8a965;
}

/*回應列表標題*/
.plurk_box .caption {
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background:#d8a965;
font-size: 11px;
line-height: 18px;
padding: 2px;
font-family: "verdana"; 
filter:alpha(opacity=90) ; -moz-opacity.9; opacity:.9;
}

/*回應列表展開*/
.plurk_box .plurk_cnt .text_holder {font-size: 12px; font-family: "verdana";line-height: 18px;letter-spacing:.1em;} 

/*回應列表框線*/
.plurk_box .caption,.plurk_box .list,.plurk_box .mini_form {
border-right:2px solid #d8a965;border-left:2px solid #d8a965;
}

/*回應列表*/
.plurk_box .list {-khtml-border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;height: 360px;}
.info_box {
-khtml-border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
border-left: 2px solid #d8a965;border-right:2px solid #d8a965;border-bottom: 2px solid #d8a965;
color: #d8a965;
}
.info_box a {color:#60767A;font-size:12px;}
#input_small {height:90px;}
textarea#input_small {
font-size:12px;
-khtml-border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
border:1px solid #d8a965; color: #000 !important;
}
td.td_cnt textarea {height:90px;}
.list {
-khtml-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}
.list empty {color: #ea5503;} 
.list .plurk_cnt { line-height:136%;} /* 加大回應區的列距 */
.list .plurk_cnt tr { border-bottom: 2px dotted #d8a965;line-height:136%;} /* 分隔線 */
.plurk_cnt tr:hover {background-color:#f9f5dd;} /* 回噗對話框游標位置底色 */

/*回覆區原噗者回覆暱稱設定*/
.list .highlight_owner .td_qual a {color:#f19db4 !important ; }

/*浪上的噗友圖*/
.p_img {
border: 3px solid #d8a965;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

/*回應數*/
.response_count {
background:#f19db4;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter:alpha(opacity=80) ; -moz-opacity.8; opacity:.8;
color:#60767A;
margin-left:6px;
padding:4px;
font-size:12px;
}
.new .response_count {
background:#ea5503;
font-size:12px;
filter:alpha(opacity=90) ; -moz-opacity.9; opacity:.9;
padding:4px;
}
.dots .inner {
background:#fff;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter:alpha(opacity=80) ; -moz-opacity.8; opacity:.8;
margin-left:5px;
}

/*影音圖片*/
.youtube img,.pictureservices img { border: none; }
.youtube:hover img,.pictureservices:hover img { border: 1px dotted #d8a965;}

/*噗上的連結*/
.plurk a.ex_link {color:#ea5503;font-weight: bold;text-decoration:normal;}
.plurk a.ex_link:hover {color:#d8a965;font-weight: bold;border-bottom: 0px;
text-decoration:normal;}
a:link { color: #ea5503;text-transform: normal;}
a:visited, a:active { color: #ea5503;text-transform: normal;}
a:hover { border:0;color: #d8a965;text-transform: normal;}

/* 時間軸標籤 */
#filter_tab { border:0 !important;}
#filter_tab a.off_tab {
background:#CF938E;
color:#FFF;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter:alpha(opacity=80) ; -moz-opacity:0.8; opacity: 0.8;
border:0 !important;
}
#filter_tab a.off_tab:hover {filter:alpha(opacity=100) ; -moz-opacity:1; opacity: 1;}
#filter_tab a.filter_selected {
color:#000 ; 
background-color:#d8a965; 
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter:alpha(opacity=90) ; -moz-opacity:0.9; opacity: 0.9;
border:0 !important;
}
#filter_tab a.filter_selected:hover {filter:alpha(opacity=100) ; -moz-opacity:1; opacity:1;}

/*更新通知*/
#updater {
background: #FFF; 
filter: alpha(opacity=90); opacity: 0.9; -moz-opacity: 0.9; 
border: 2px solid #d8a965; 
font-size: 13px; 
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#updater #noti_np #noti_np_text{color:#d8a965; }/*左*/
#updater #noti_np a{color:#d8a965; }
#updater #noti_re #noti_re_view #noti_re_text {color:#d8a965; }
#updater #noti_re #noti_re_view a{color:#EF6880; }

/*控制面版*/
#dashboard_holder {margin-top:30px;}
#plurk-dashboard{
color:black; 
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: transparent; 
border: none; padding: 2px; 
}
#dash-stats h2, #dash-friends h2, #dash-fans h2{
color: #d8a965; font-size: 28px; line-height: 110%; text-align: center; border: 0; font-weight: none; 
}
#plurk_form{
background: none; 
color: #d8a965 ; 
font-size: 12px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8;
}
#main_poster{color: #d8a965 ; font-wight: bold; font-size: 12px; }
#main_poster .qual_holder{color: #d8a965; font-size: 20px; font-family:Verdana; }

/*噗輸入區*/
textarea#input_big.content {
font-size: 22px; 
height: 60px; wrap: soft; padding: 2px; 
border: 1px solid #d8a965; 
filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; 
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.time{font-size: 14px; }
#cur_time{font-size: 14px; }

/*控制面板: 透明度變化*/
#plurk_form, .dash-segment {filter:alpha(opacity=20) ; -moz-opacity:0.2; opacity: 0.2; }
#plurk_form, .dash-segment:hover {filter:alpha(opacity=100) ; -moz-opacity:0.9; opacity:0.9; }
#plurk_form{margin:0}

/*搜尋面板*/
#toggle_tab li {
background: none; border: none; padding: 5px; -moz-border-radius:10px; 
filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; font-size: 12px;
}
.plurkaction {clear:both;padding:8px;}.plurkaction,#toggle_tab li.tt_selected,#more_options_link{
border: 0px solid #FFF;font-size: 12px;
background:transparent;
}

/*私密語系選項*/
#more_options {}
#more_options a#more_options_link {border: none; background: none; color: #d8a965;font-size: 12px; }
#more_options #plurk_to{color:#d8a965; }
#more_options #more_options_holder{border: none; background: none; color: #d8a965;font-size: 12px; }

/*控制面板: 個人圖像*/
#profile_pic {border:2px dotted #d8a965;width: 60px;} 
#profile_pic:hover {width:auto} /*個人照片回覆大小*/

/*個人自介*/
#dash-profile{color:#d8a965; line-height: 20px; font-family:Verdana;-moz-border-radius: 10px;padding:2px;}
#dash-profile p#full_name{color:#d8a965; font: 16px; }
#dash-profile #span_years , #m_or_f{font-size: 12px; }
#dash-profile:hover img{width: 200px;}
#dash-additional-info{color:#d8a965; font: 12px; line-height: 18px;-moz-border-radius: 10px; }
#dash-additional-info #about_me{color:#d8a965;-moz-border-radius: 10px; }
#dash-additional-info #about_me a{color: #d8a965; text-decoration: none; }
#dash-additional-info #about_me a:hover{color: gray; text-decoration: none; 
}

/*統計項目*/
#dash-stats h2{font-size: 22px; font-family:Verdana; font-weight: bold; color: #d8a965; background: none; border: none; }
#dash-stats{color: #d8a965;-moz-border-radius: 10px;padding:2px; }
#dash-stats #karma {color: #d8a965; }
#dash-stats a{color: #d8a965; }
#dash-stats table tbody tr th{font-size: 12px; color: #d8a965; }
#dash-stats table tbody tr td{font-size: 12px; color: #d8a965; }

/*朋友區*/
.show_all_friends{text-align: center; }
#dash-friends {color: #d8a965;-moz-border-radius: 10px;padding:2px;}
#dash-friends a{color: #d8a965; }
#dash-friends h2{font-size: 22px; font-family:Verdana; font-weight: bold; color: #d8a965; background: none; border: none; }
#dash-friends #friend_holder{border: none; }

/*粉絲區*/
#dash-fans{color: #d8a965;-moz-border-radius: 10px;padding:2px; }
#dash-fans a{color: #d8a965; }
#dash-fans h2{font-size: 22px; font-family:Verdana; font-weight: bold; color: #d8a965; background: none; border: none;}

/*朋友粉絲圖*/
.friend_holder {margin-bottom: 4px;border:0 !important;}
.friend_holder table {margin-left: auto;margin-right: auto;}
.friend_holder .user_link{height:15px!important;width:15px!important; border:0 !important;}
.friend_holder img{width:15px;height:15px;border:0 !important;filter:alpha(opacity=20) ; -moz-opacity:0.2; opacity: 0.2; }

/*字數提醒*/
.char_updater {color:#d8a965;}

/*修飾詞*/
.q_freestyle {
-khtml-border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
border:0 solid #FFF;color:#FFF!important;font-family: 微軟正黑體, century gothic;}
.q_loves,.q_likes,.q_shares,.q_gives,.q_hates,.q_wants,.q_wishes,.q_needs,.q_will,.q_hopes,.q_asks,.q_has,.q_was,.q_wonders,.q_feels,.q_thinks,.q_says,.q_is {
-khtml-border-radius:9px;-moz-border-radius:9px;-webkit-border-radius:9px;border:0 solid #FFF;color:#FFF;font-family:Verdana;}

/*小視窗*/
.tooltip_cnt{
background: #d8a965; 
filter:alpha(opacity=90) ; -moz-opacity:0.9; opacity: 0.9; 
border:1px solid #ccc;
color: #FFF;
padding:5px;
margin-top:1px;
font-size:12px;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
}
.cmp_tooltips-down {height: 17px;
background: transparent url(http://bemyselfinc.com/plurk/up_down/greyblue_down.png) no-repeat scroll left top;
}
.cmp_tooltips-up {height: 17px;
background: transparent url(http://bemyselfinc.com/plurk/up_down/greyblue_up.png) no-repeat scroll left top;
}
.AmiMenu.info_menu {background:#d8a965;border:1px solid #fff;color: #fff;}
.AmiMenu.info_menu .block {background:gray;}
.AmiMenu.info_menu td.on, .AmiMenu.info_menu .user_info.on {background: #d8a965;}
.AmiMenu.info_menu .separator {background:#d8a965;}
.AmiMenu.info_menu .user_info.on b {color: #fff;font-weight: bold;}

/*音樂播放器*透明圓角版*/
#music_player {
color:#d8a965;
font-size: 13px; 
background-color:#FFF; 
border: 1px solid #d8a965; 
-moz-border-radius: 13px; 
filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8;
}
#music_player:hover {filter:alpha(opacity=100) ; -moz-opacity:1; opacity: 1;}
#music_player a{color:#d8a965 !important;}
#music_player a:hover{color:gray!important;}

/*註冊使用BAR*/
#top_login a#sign_up,#validate_email,#sign_up_small {background:#d8a965;}
#top_login a#sign_up {border-top:1px solid #5cc2cf;border-bottom:1px solid #d8a965;}
#registerToday {background:#d8a965 !important; color:#FFFFFF; font-size:16px;}
#sign_up_small {background:#d8a965!important; color:#FFFFFF !important;}
.plurk_box .login_to_see a,.red_link{background-color:#d8a965;color:#FFFFFF;}
.plurk_box .login_to_see{background-color:#FFF;border-right:1px solid #d8a965;border-bottom:1px solid #d8a965;}

/*更換loading圖*/
.cmp_loading{background:transparent;width:0px;height:0px;}
#div_loading .cnt {
background:transparent url(http://bemyselfinc.com/plurk/loader/orange_loader03.gif) no-repeat scroll center top !important;
margin-top:140px;}
.loading img {height:0;width:0;}
.loading {
background:transparent url(http://bemyselfinc.com/plurk/loader/orange_loader01.gif) no-repeat scroll center
center !important;
margin-top:100px;
height:24px;width:24px;
}

/*封鎖使用者按鈕*/
.friend_man.block {
background: #d8a965 repeat scroll top left;
border-color: #d8a965 #d8a965 #d8a965 #d8a965;
-moz-border-radius: 4px 4px 4px 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-width: 2px;
}

/*追蹤朋友粉絲按鈕*/
.friend_man.add_follow, .friend_man.remove, .friend_man.add_friend, .friend_man.pending {
-moz-border-radius: 6px 6px 6px 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; 
border:2px ; 
background: #d8a965;
}

/*單一Plurk頁面*/
.user-nick{color: #d8a965; }
h1{color: #d8a965;line-height:150%; }
#plurk_responses 
ul.responses li a {color: #d8a965 !important; text-decoration: none;font-size:120%;line-height:150%; }
ul.responses li a:hover {color: gray !important; }
ul.responses li a:link {color: #d8a965; text-transform: normal;}
ul.responses li a.ex_link { color: #d8a965;text-transform: normal;}
ul.responses .message a {color:#d8a965 !important; text-decoration: none;font-size:120%;line-height:150%; }
ul.responses .message a:hover {color: gray !important; }
ul.responses .message a:link { color: #d8a965;text-transform: normal;}
ul.responses .message a.ex_link { color: #d8a965;text-transform: normal;}
ul.responses li:hover span.time { color: gray;text-transform: normal;}
#reply #reply_box {background: none;}
#reply h2 {background: none;}
#reply #reply_box_holder {background: none;}

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑我是分隔線,請不用理我!↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

話說這位「週六小姐」(當然我是故意這樣叫她,這樣感覺比較有梗,XD),本身是一位「Plurk CSS」設計高手,她的專業應該也是在於「網頁/網站設計」這一塊領域吧?三不五時就會分享新的噗浪佈景主題,重點是「完全不用錢哟」!真是佛心來的啊!(膜拜。不像某個 http://plurklayouts.com/ 網站,早已「全面商業化」了,所有的主題都要花錢購買,才能使用。「週六小姐」本身也有個噗浪帳號哟(廢話,都這麼熱愛設計噗浪佈景主題,哪有不玩噗浪的道理?至少也要註冊一個帳號來測試語法吧?(笑)。她的帳號是:http://www.plurk.com/66660000 至於「週六小姐」所分享的佈景主題安裝網頁,她的個人自介上頭的連結是錯誤的(有空我會提醒她一下),實際網頁如下:http://bemyselfinc.com/html/d_plurk.html 相信資深噗友們早已將此頁面納入「我的最愛」裡頭了吧?還沒看過的人,趕緊找個喜歡的主題,套用看看吧!

以下再來分享幾個有關「噗浪佈景主題」的網頁/網站(當然是給新手們看的,老手們可以無視,XD):

1. http://ipzoner.pixnet.net/blog/post/25633344 這個「100個令人驚艷的Plurk(噗浪)佈景主題(themes)」,是由噗友 http://www.plurk.com/ipzoner 在一年多前所辛苦收集而來的(遠目),當時經過不少噗友大力轉噗推薦(當然也包括我囉!);這100個主題,在當時都是免費的;現在則是部分免費(因為有些主題來自於「plurklayouts」,現在這家的主題都要收費,不管你覺得主題好看與否,XD)。至於其他「免費主題」若是遇到不能用的,八成是原主題的提供者把「圖檔」給刪除了,XD。

2. http://www.plurktemplates.com/themes_select 這個網站所提供的主題,並未直接給予「安裝網址」,而是將語法寫在網頁上面,要網友們自行複製貼上。首先找到你想要安裝的主題,例如「the runners」,你就點擊進入該主題的網頁:http://www.plurktemplates.com/content/runners 往下拉,就會看到該主題的CSS語法了。不過有的主題的提供者,並未提供語法,例如「joker」(那這樣幹嘛還分享出來?XD)。

3. http://plurkdoodles.blogspot.com/ 這個網站也不錯。

4. http://layoutfreak.blogspot.com/ 這個網站最近似乎頗受噗友們的青睞哟,因為我發現有不少噗友的主題都來自於這家網站。希望不要變成「付費網站」啊!

5. http://www.flickr.com/groups/plurkthemes/pool/ 這個網站(應該說是「群組」)則是由網友/網站主動發佈最新主題的圖檔。前五大貢獻者當中,上面所提過的「週六小姐」、「plurkdoodles」、「plurklayouts」,都沒有在這個「群組」的頁面提供主題安裝連結,所以直接去他們的網站/網頁找主題還比較快!

其實仔細看過各家網站(個人)所設計(提供)的佈景主題,都可以發現有他們獨特(專屬)的風格;換句話說,我認為他們設計到最後,都演變成「懶人設計法」了,幾乎是只要「換上新的背景圖片」,就等於是「全新的佈景主題」了嘛!有沒有這麼偷懶啊?(被狂毆、被踹飛、被轟炸。

接下來,就來介紹「如何借用別人的噗浪CSS語法」,其實這方法是人很友善的「不來恩」所熱情提供的,詳盡教學在此:http://briian.com/?p=6032 
雖說未徵得主人的同意,就取用別人的語法有點不道德;但就像這篇文章底下三樓的讀者回應一樣:『教還是要教,看你自己怎麼用』。我本身就遇過兩次「被借用主題」的經驗,倒是都有被告知就是了,雖然我本身是毫不介意被借用,畢竟語法也不是我獨創的,背景圖片更不是我拍攝(創作)的,被借用的話,也沒啥資格好介意的吧!(倒是大頭照是我本人,這個被借用的話,我可是會生氣的哟!XD)

「借用別人的主題」除了帶有負面意義之外,它其實也能有正面意義的。我就用過這個方法幫助噗友解決他的CSS困擾,倒是他到現在似乎還不清楚我是怎麼幫助他的(因為當時我根本沒向他索取他的CSS語法)。那位苦主就是:http://www.plurk.com/fox186 至於「問題噗」則是在此:http://www.plurk.com/p/3hmpir 為了翻出這噗,我還花了一點時間呢!(笑。當時他發出這噗的時候,剛好我在線上,見到噗友有難,我怎能見死不救呢?順利解決了他的困擾,我的內心相當愉悅啊!(茶。

以上資料的整理:http://www.plurk.com/bimbotonto 完成於:2010/03/09,上午十點十七分,天氣:陰雨綿綿。


2 則留言:

  1. 對不起我是第一次來的...想請問一下關於噗浪CSS語法的問題
    請問一下...上面的語法有一條可以控制"控制面板STATS欄位(Karma等等數據欄位)"
    想請問一下可以獨立控制其中一項的嗎?比方說把登入日期隱藏之類?
    因為我很需要這功能,可是用你的語法試一下只能整個欄位改變,沒法只改一項,也沒法做任何隱藏, 想請問一下可以幫忙嗎?感謝!

    回覆刪除
  2. 好精細週到的語法整理!!!
    感謝雲爸寫出這麼用心的教學文章,正好想要自己做佈景。
    這就好好研究去。

    回覆刪除