T

在噗浪預設的幾種搭配中，選出適合舒服的配色，再加上一點點自訂的CSS，
就能使用的順手應心。

經過上一篇「噗浪CSS集成」，後來噗浪有增加一些另外的項目，像是朋友區的搜尋、
奬勵徽章等，所以，又到了更新整理的時間ＸＤ

此篇將這段時間以來，經過噗友訂製的磨練功夫，逐一更正修正的標準項目，
列明。以提供大家參考，設計出合乎想像中自己噗浪的樣貌。

 

/*噗浪背景CSS - ㄒ*/
/*design by Be Myself Inc. M6--------------------------------------*/

/*畫面佈景--------------------------------------*/
body, html {
background:# url( ) center top no-repeat;
background-attachment: fixed;
}

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

/*標題*/
#page_title {
color:#;
font-size:px;
}

/*頁首左小圖背景*/
#top_bar .content {
background:# !important;
filter:alpha(opacity=) ; -moz-opacity:; opacity:;
}

/*頁首登入列背景*/
#top_login {
background:# !important;
margin-right:;
filter:alpha(opacity=) ; -moz-opacity:; opacity:;
}

/*編輯文字*/
#top_bar .content a#edit_link {
color:#;
font-size:px;
}
#top_bar .content a:hover#edit_link {
color:#;
}

/*通知數字*/
#alert_beacon {
color:#;
font-size:11px;
margin:0 2px;
}

/*頁首左邊文字*/
#top_bar, #top_bar a {
color:#;
font-size:px;
}
#top_bar a:hover {
color:#;
}

/*頁首右邊文字*/
#top_login, #top_login a {
color:#;
font-size:px;
}
#top_login a:hover {
color:#;
}

/*頁尾文字*/
#footer, #footer a {
color:#;
font-size:px;
}
#footer a:hover {
color:#;
}

/*語言選單*/
#languge_selector {
color:#;
font-size:px;
}

/*時間軸主題--------------------------------------*/
#timeline_holder {
background: #;
border:;
}

/*換日線*/
#timeline_bg .day_bg .div_inner {
background: #;
-khtml-border-radius: px;
-moz-border-radius: px;
-webkit-border-radius: px;
width:px;
height:px;
border:;
}

/*日期文字*/
.day_start .bottom_start, .day_start .div_start {
color: # !important;
text-align: ;
font-size:px;
}

/*時間分隔線*/
#bottom_line {
background: #;
border:;
}

/*線上時間文字*/
.bottom_start, .bottom_end  {
color:#;
font-size:12px;
}

/*每則噗對應時間顯示*/
#time_show span {
color: #;
font-size:px !important;
font-family:;
}
#time_show, .evening,.night,.day,.morning {
background: !important;
border:;
}

/*隱藏噗浪生物*/
#dynamic_logo ,#logo img {filter:alpha(opacity=0) ; -moz-opacity:0; opacity: 0; }
img#creature{ filter:alpha(opacity=0) ; -moz-opacity:0; opacity: 0; }

/*時間軸往前往後圖示*/
.cmp_arrow_right, .cmp_arrow_left, .cmp_back_to_today  {
filter: alpha(opacity=); opacity: ; -moz-opacity:;
}

/*這條時間軸是空白的*/
#empty_timeline_bg {
font-weight:;
color:#;
}
#empty_timeline_fg {
font-weight:;
color:#;
}

/*所有的plurk標籤--------------------------------------*/
#filter_tab  {
border: !important;
background:#;
}
#filter_tab a.off_tab  {
border: !important;
background:#;
color: #;
font-size:12px !important;
}
#filter_tab a.off_tab:hover  { }
#filter_tab a.filter_selected {
border: !important;
background:#;
color: #;
font-size:12px !important;
}
#filter_tab a.filter_selected:hover { }

/*更新通知*/
#updater {
border: !important;
background:#;
color: #;
font-size:px !important;
}
#updater .text {
color: #;
font-size:px !important;
}
#updater a {
color: #;
font-size:px !important;
}
#updater a:hover {
color: #;
}

/*音樂播放器*/
#music_player {
border: !important;
background:#;
color: #;
font-size:px !important;
}
#music_player:hover {
color: #;
font-size:px !important;
}
#music_player a {
color: #;
font-size:px !important;
}
#music_player a:hover {
color: #;
}

/*主控台主題--------------------------------------*/
#plurk-dashboard, .dash-segment, .segment-content, .plurkaction {
background:#;
border: ;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
}

/*發噗區_每日照片_搜尋*/
#pane_plurk, #pane_daily_photo, #pane_search {
border: !important;
background:#;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
width:;
margin:;
}

/*每日照片文字*/
#pane_daily_photo {font-size: px!important;color: # !important;}
#pane_daily_photo a:hover {color: # !important;}

/*搜尋區文字*/
#pane_search {color: # !important;}
#pane_search a:hover {color: # !important;}

/*選項標籤*/
#toggle_tab {
color: #;
border: ;
background:# ;
}
#toggle_tab li {
color: #;
border: ;
background:# ;
font-size:px;
}
#toggle_tab li.tt_selected {
color: #;
border: ;
background:# ;
font-size:px;
-moz-border-radius: 2px 2px 0px 0px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
}

/*私密語系選項*/
#more_options_link{
background: transparent url(/static/timeline/private-lock.png) no-repeat 4px 3px;
border:;
color: #;
outline:none;position:relative;
}
#more_options .on{
border:;
background: transparent url(/static/timeline/private-lock.png) no-repeat 4px 3px;
color: #;
}
#more_options .on, #more_options, #more_options_holder {
background:#;
color: #;
}

/*尚餘字數*/
.char_updater {color:# ;}
.char_updater.highlight_light {color:# ;}

/*使用者名稱*/
#main_poster .qual_holder{
color: #;
font-wight: ;
font-size: px;
}

/*語助詞*/
.q_says,.q_is {
background:#;
border:;
color: #;
}

.qualifier, .m_qualifier  {
filter: alpha(opacity=); opacity: ; -moz-opacity: ;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}

/*噗文輸入區--------------------------------------*/
#plurk_form {
background:#;
border-right: ;
border-bottom: ;
padding-bottom: px;
-moz-border-radius: px ;
-webkit-border-top-right-radius: px;
-webkit-border-bottom-left-radius: px;
}

/*輸入訊息*/
textarea#input_big.content {
height:px;
wrap: soft;
border:;
background:#;
color: # !important;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}

/*換發噗大按鈕*/
.cmp_plurk {
background:transparent url('http://bemyselfinc.com/plurk/cmp/greyblue_plurk.png') no-repeat scroll top left;
height:38px;
width:81px;
}

/*資料面板文字--------------------------------------*/
#plurk-dashboard {
color: #;
font-size:12px !important;
}
#plurk-dashboard a {
color: #;
font-size:12px !important;
}
#plurk-dashboard a:hover {
color: #;
}
#dash-stats h2, #dash-friends h2, #dash-fans h2 {
text-align: center;
color: #;
font-size:px !important;
}

/*資料面板: 透明度變化*/
div.dash-segment {
filter:alpha(opacity=) !important;
-moz-opacity: !important;
opacity:  !important;
}
div.dash-segment:hover {
filter:alpha(opacity=) !important;
-moz-opacity: !important;
opacity: !important;
}

/*個人簡介--------------------------------------*/
#dash-profile {
background:url() top left no-repeat;
border:;
text-align:;
color: #;
font-size:px !important;
}
#dash-additional-info { }
#full_name {}
p#about_me {}
#span_years , #m_or_f {}

/*個人圖像縮放*/
#profile_pic {width:121px;}
#profile_pic:hover {width:auto;}

/*統計資料--------------------------------------*/
#dash-stats {
background:url() top left no-repeat;
border:;
text-align:;
color: #;
font-size:px !important;
}
#dash-stats table { }
#dash-stats table td { }
#dash-stats h2 { }

/*卡馬*/
#karma {
color:#FFF;
font-size: px;
}
.karma_hover {color: #;}
.karma_arrow {filter:alpha(opacity=0); -moz-opacity:.0; opacity:.0;}
.cmp_karma_up {
background:transparent url(/static/icons/icons_png.png) 0 -28px no-repeat;
width:8px;
height:10px;
margin-top: 10px;
}

/*小徽章緊密的排排站*/
.award_bar { _height:1%;padding:0; margin-top: 20px;}
.award_bar div {
padding:0 !important;height: 22px;width: 22px !important;margin:0 !important}
.award_bar img{width: 20px;height: 20px;}

/*朋友區--------------------------------------*/
.show_all_friends { }
#dash-friends {
background:url() top left no-repeat;
border:;
text-align:;
color: #;
font-size:px !important;
}
#dash-friends a { }
#dash-friends h2 { }
#dash-friends #friend_holder { }

/*朋友區: 隱藏搜尋區*/
#dash-friends p, #dash-friends form {
filter:alpha(opacity=0) !important;
-moz-opacity:0 !important;
opacity: 0 !important;
}

/*朋友區: 隱藏入門說明*/
div #tw_help {
filter:alpha(opacity=0) !important;
-moz-opacity:0 !important;
opacity: 0 !important;
}

/*朋友區: 隱藏邀請朋友*/
div a#dashboard-invite {filter:alpha(opacity=0)!important; opacity:0!important;}

/*粉絲區--------------------------------------*/
#dash-fans {
background:url() top left no-repeat;
border:;
text-align:;
color: #;
font-size:px !important;
}
#dash-fans a { }
#dash-fans h2 { }

/*粉絲區: 隱藏分享連結*/
div #sharePlurk {filter:alpha(opacity=0)!important; opacity:0!important;}

/*粉絲區: 隱藏社交小圖示*/
.dash-icon {filter:alpha(opacity=0)!important; opacity:.0!important;}

/*朋友粉絲圖--------------------------------------*/
.friend_holder {margin-bottom: 4px;}
.friend_holder table { margin-left: auto;margin-right: auto;}
.friend_holder .user_link{height:24px!important;width:24px!important; }
.friend_holder img{width:24px;height:24px; }

#dash-friends-pics .user_link, #dash-fans-pics .user_link {border:;}
#dash-friends-pics img, #dash-fans-pics img {border:;}

/*隱藏列出所有朋友粉絲連結及分享按鈕*/
#dash-fans div[style]:first-child {
position:absolute;font-size:0;height:0;
filter:alpha(opacity=0)!important; opacity:.0!important;
}
#dash-friends div[style]:first-child {
position:absolute;font-size:0;height:0;
filter:alpha(opacity=0)!important; opacity:.0!important;
}

/*加入朋友粉絲按鈕*/
.friend_man.add_follow, .friend_man.remove, .friend_man.add_friend, .friend_man.pending {
background:#;
border-right:
border-top:;
border-bottom:;
border-left:;
color: # !important;
-moz-border-radius: 6px 6px 6px 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

/*封鎖使用者按鈕*/
.friend_man.block {
background:#;
border-right:
border-top:;
border-bottom:;
border-left:;
color: # !important;
-moz-border-radius: 4px 4px 4px 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

/*發送私密噗按鈕*/
.friend_man.private_plurk {
background:#;
border-right:
border-top:;
border-bottom:;
border-left:;
color: # !important;
-moz-border-radius: 6px 6px 6px 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
}

/*主題----其他--------------------------------------*/

/*小視窗*/
.tooltip_cnt {background: # !important;}
.AmiMenu.info_menu .block {background: # !important;}
.AmiMenu.info_menu, .AmiMenu.info_menu td.on, .AmiMenu.info_menu .user_info.on,
.AmiMenu.info_menu .separator {background: #;}

/*小視窗背景箭頭圖片*/
.AmiTT_main{background:;}

/*註冊使用BAR*/
#top_login a#sign_up,#validate_email,#sign_up_small,#registerToday,.plurk_box .login_to_see a,.red_link,.plurk_box .login_to_see
 {background:lightblue !important;color:# !important;border:0;}

/*表情符號圖示*/
#emoticon_selecter img, #emoticon_selecter a:hover img {border:0!important;}
#emoticons_tabs ul li a, #emoticons_tabs ul li {
margin-left:0px;
border:0!important;
background:# !important;
color: # !important;
font-weight: regular;
text-transform:normal;
padding:2px 5px;
font-size:12px;
font-family:;
}

/*更換loading圖--------------------------------------*/
.cmp_loading {width:0px;height:0px;}
#div_loading .cnt {
background: url(http://statics.plurk.com/7f5c4282d2e9accfdae99cc6abb6c9bb.gif) no-repeat scroll center top !important;
margin-top:140px;
}
.loading img  {width:0px;height:0px;}
.loading {
background: url(http://statics.plurk.com/7f5c4282d2e9accfdae99cc6abb6c9bb.gif) no-repeat scroll center top !important;
margin-top:30px;
}

/*單一Plurk頁面--------------------------------------*/
.user-nick {color: #000; }
div.bigplurk h1.content {color: #333; }

/*上一則_下一則訊息*/
#prev_plurk, #next_plurk {
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
filter:alpha(opacity=);-moz-opacity:;opacity:;
color:#666;
}

/*回應區標題*/
#plurk_responses h2 {
color:#FFF;
font-size:14px;
}

/*回應區*/
#plurk_responses {
background: #;
-moz-border-radius: px;
-khtml-border-radius: px;
-webkit-border-radius: px;
}
#plurk_responses a {color:#333;}

.message {
background: #;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
}
.message a {color:#333 !important;}

/*回應區個人圖像*/
img.avatar {border: !important;}

/*輸入訊息區*/
#reply  #reply_box {background:#;}
#reply h2  {background:#;}
div#reply_box_holder .plurkaction {background:# !important;}
#reply_box_holder .qual_holder {color: #FFF !important; }
#reply_box #input_big{color:# !important;}

/*河道上的噗------------------------------------------------------------*/
.plurk_cnt  {
font-size: 12px;
letter-spacing:.1em;
line-height:18px;
border: !important;
}
.plurk_cnt, .inner {
-moz-border-radius:0px 0px 5px 0px;
-webkit-border-radius:0px 0px 5px 0px;
-khtml-border-radius: 0px 0px 5px 0px;
}

/*浪上的噗底色*/
#timeline_holder .plurk_cnt {background: # !important;}

/*回應列表標題*/
.plurk_box .caption {
background:# ;
color:# !important;
font-size: 11px;
border: !important;
border-right:;
border-left:;
}

/*回應列表展開*/
.plurk_box .list {
height: 200px;
background:# !important;
color:# !important;
font-size: 12px;
letter-spacing:;
line-height:18px;
border: !important;
border-right:;
border-left:;
}
.text_holder  { }

/*其他噗友回應*/
.list .td_cnt {background-color:#; }
.list .td_cnt a {
color: #666 !important;
font-size: 12px;
}
.list .plurk_cnt .td_cnt .text_holder {
color: #222 !important;
font-size: 12px;
}

/*原噗者的回應*/
.list .highlight_owner .td_cnt {background-color:#; }
.list .highlight_owner .td_cnt a {
color: #000 !important;
font-size: 12px;
}
.list .highlight_owner .td_cnt .text_holder {
color: #000 !important;
font-size: 12px;
}

/*讓噗列表換行和加底色--------------------------------------*/
.list .plurk_cnt .td_qual {position: absolute;width: auto;overflow: visible;}
.list .plurk_cnt .td_cnt .text_holder {
margin-top: 1.5em;
margin-left: 0.5em;
padding: 0.4em;
width: auto !important;
background: #f4f4f4;
}

/*加大回應區的列距*/
.list .plurk_cnt  { line-height:136%;} 

/*分隔線*/
.list .plurk_cnt tr { border-bottom: 1px solid #ccc;line-height:136%;}

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

/*噗打開後下方輸入區--------------------------------------*/
td.td_cnt textarea {
font-size:12px;
height:40px;
}
textarea#input_small {
font-size:12px!important;
height:40px;
}
.mini_form {}
.mini_form .qual_holder {font-size:11px!important; }
.info_box {
background:#;
border-right:;
border-left:;
border-bottom:;
border-top:;
-moz-border-radius:0px 0px 5px 5px;
-webkit-border-radius:0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
}

/*回應時間標示--------------------------------------*/
.response_time .holder+div img {opacity: .0; filter: alpha(opacity=0);}
.response_time {position:absolute;z-index:10000; }
.response_time .holder { }

/*浪上的噗友圖*/
.p_img {border:; background:#;padding:px;}

/*刪除編輯消音取消*/
.manager .action { color:#000; margin-left:5px; font-size:11px; }
.manager a:hover { color:#ccc;text-decoration: none!important;  font-size:11px;}
.manager .cancel { color:#999; margin-right:5px;  font-size:11px;}
.manager .delete { color:#888; margin-right:5px;  font-size:11px;}
.unmute { color:#999!important; font-size:11px; }

/*回應數*/
.response_count {
background:#;
color:#;
font-size:px;
margin-left:px;
padding:3px;
filter:alpha(opacity=) ; -moz-opacity:; opacity:;
}
.new .response_count {
background:#;
color:#;
font-size:px;
margin-left:px;
padding:3px;
filter:alpha(opacity=) ; -moz-opacity:; opacity:;
}
.dots .inner {border: ; color:#; background:#;}

/*影音圖片*/
.youtube img,.pictureservices img { border: none; }
.youtube:hover img,.pictureservices:hover img { border: none; }

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



為了方便大家使用，直接套用以上項目的安裝網址：
http://www.plurk.com/installDesign/3997864-47b293b3e5

希望大家都能有個愉快的浪裡人生


我的噗浪：http://www.plurk.com/66660000

我設計的噗版下載頁面：http://bemyselfinc.com/html/d_plurk.html
陸續更新中～

arrow
arrow
    全站熱搜

    M6 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄