版權所有+保留所有權利_+_+_
© 2010-2015 Created by 如我協力創意工作室 Be Myself Inc.
**版權說明**
-- 我們提供與設計的噗版CSS內容僅供個人自用,請勿改製再分享或用於商業用途 --
((請勿將全部或部份內容直接取用當作自己的設計))
-- 除了個人噗版自用外(修改請註明原CSS碼出處),其它使用方式均未授權,還請務必注意,勿侵權喔~--

再來是發噗區的設定。包括「私人訊息、語系及選項」選單,以及"plurk"與"搜尋"頁籤及內容的設計。

_07_私人選項

/*======================== 私人選項 ========================*/

#more_options_link  /*打開前*/
{
    background:transparent url(http://) left top no-repeat !important;
    padding-left:15px !important;
    border:0 !important;
    color:#aaa !important;
    font-size:12px !important;
}
#more_options td,
#more_options .caption,
#more_options_holder
{
    background:none !important;
    border:0 !important;
    color:#eee !important;
    font-size:12px !important;
    letter-spacing:;
    text-decoration:none !important;
}
#more_options_holder   /*打開後*/
{
    background:#444 !important;
    border:1px solod #222 !important;
}


.small {font-size:10px !important;}  /*欄位說明*/
.advert a {font-size:0px !important;}  /*噗浪同步訊息至FB*/
.private_to {color:#ccc !important;} /*私人訊息給...*/

.private_to b,   /*私人訊息*/
.selectedSmartInputItem, .selectedSmartInputItem a,  /*移動選擇*/
.selectedSmartInputItem a:hover,
.auto_ta .person  /*已選擇的噗友底色*/
{
    background:#000 !important;
    color:#ddd !important;
    font-size:12px !important;
    font-weight:normal !important;
    text-decoration:none !important;
    top:0px;
    left:0px;
    -moz-border-radius:4px;
    -khtml-border-radius:4px;
    -webkit-border-top-left-radius:4px;
    -webkit-border-top-right-radius:4px;
    -webkit-border-bottom-right-radius:4px;
    -webkit-border-bottom-left-radius:4px;
}
#smartInputFloaterContent  /*下拉選單*/
{
    background:#f4f4f4 !important;
}
.private_to b,   /*私人訊息*/
.auto_ta .person  /*已選擇的噗友底色*/
{
    padding:2px 4px;
}
.wickEnabled, .wickEnabled:focus /*輸入欄*/
{
    background:none !important;
    border:0 !important;
    -moz-box-shadow:0px 0px 0px #ccc;
    -webkit-box-shadow:0px 0px 0px #ccc;
    box-shadow:0px 0px 0px #ccc;
}


_08_發噗選項

主控台中輸入文字的區域,稱作「發噗區」,包括輸入欄位、發噗按鈕、表情符號與語助詞等項目的設定。

/*======================== 發噗選項 ========================*/

div#plurk_form
{
    width:965px;
    height:px;
    margin:20px auto;
}

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

/*尚餘字數*/
.char_updater {color:#ccc !important;}

/*超過字數*/
.char_highlight {color:#fff !important;background:none !important;}
.char_highlight a {color:#fff !important;background:#333 !important;}

/*對齊中間*/
.plurkForm td {vertical-align:middle !important;}

/*頁籤*/
#toggle_tab,
#toggle_tab li,
#toggle_tab li.tt_selected
{
    color:#ccc !important;
    font-size:14px !important;
}
#toggle_tab {margin-left:px;}

/*隱藏頁籤圖示*/
#toggle_tab li span#plurk_tab,
#toggle_tab li span#search_tab
{
    width:0px !important;
}

/*輸入欄位*/
textarea#input_big_private,  /*發送私密噗視窗*/
textarea#input_big_private.content,  
textarea#input_big,  /*發噗輸入*/
textarea#input_permalink,
textarea#input_big.content,
input#current_query   /*搜尋輸入*/
{
    color:#111 !important;
    font-size:20px !important;
    line-height:1.5;
    padding:5px 5px;
    min-height:100px;
}

input#current_query,   /*搜尋輸入*/
input#current_query:focus
{
    color:#111 !important;
    min-height:31px !important;
}

/*發噗按鈕*/
.cmp_plurk
{
    background:url(http://) no-repeat scroll top left;
}

/*搜尋按鈕*/
input.orange-but   
{
    background:# !important;
    color:#fff !important;
    font-size:20px !important;
    padding:5px 4px !important;
    text-shadow:0px 0px 3px #ccc !important;  /*文字陰影*/
    border:0px solid #333 !important;
    -moz-box-shadow:0 0px 0 #aaa !important;   /*框線陰影*/
    -webkit-box-shadow:0 0px 0 #aaa !important;
    box-shadow:0 0px 0 #aaa !important;
}

.u_search, .u_search a,  /*搜尋其它會員*/
.share_search b   /*分享搜尋結果*/
{
    color:#ffffff !important;
    font-weight:normal;
}
input#share_link
{
    background:none !important;
    color:#444 !important;
    border:0 !important;
    border-bottom:1px solid #ccc !important;
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    filter:alpha(opacity=70); opacity:0.7; zoom:1;   /*透明度*/
}

/*發噗輸入區整體透明度變化*/
textarea#input_big
{filter:alpha(opacity=20) !important; opacity:0.2 !important; zoom:1;}
textarea#input_big:hover
{
    background:#fff !important;
    filter:alpha(opacity=80) !important; opacity:0.8 !important; zoom:1;
}


/*======================== 微笑表情 ========================*/

.smily_holder img
{filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;}
.smily_holder
{
    background:url(http://) center center no-repeat;
    padding-right:24px;
    padding-left:0 !important;
    margin:0 !important;
    width:24px !important;
}


/*======================== 分享功能 ========================*/

#main_poster .icons_holder  /*發噗區圖示*/
{
    position:absolute;
    left:px;
}
.cmp_image_off, .cmp_youtube_off, .cmp_link_off, .cmp_webcam_off
{filter:alpha(opacity=50) !important; opacity:0.5 !important; zoom:1;}
.cmp_image_on, .cmp_youtube_on, .cmp_link_on, .cmp_webcam_on
{
    filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
}


/*======================== 語助詞 ========================*/

/*語助詞旁的箭頭符號*/
.dd_img img
{
    filter:alpha(opacity=50) !important;opacity:0.5 !important; zoom:1;
}

.qualifier, .m_qualifier, .r_qualifier,  /*所有*/
div.bigplurk .r_qualifier  /*單噗頁面上下則*/
{
    background:none !important;  /*將外觀的背景去除*/
    border:0 !important;
}

.qualifier,  /*浪上*/
.mini_form .m_qualifier,  /*浪上每則噗發噗區*/
.r_qualifier  /*單噗頁面字*/
{
    font-size:12px !important;
}
.m_qualifier,  /*發噗區*/
#reply_box .m_qualifier,  /*單一噗浪發噗區*/
.content .r_qualifier   /*單噗主噗區*/
{
    font-size:15px !important;
}


/*--------------------------------------------------------------各欄位*/

.qual_menu .q_freestyle,
.q_freestyle,
td .q_freestyle   /*自由發揮*/
{
    background:none !important;
    color:#999 !important;
}
.qual_menu .q_loves,
.q_loves,
td .q_loves   /*愛*/
{
    background:none !important;
    color:#B20C0C !important;
}
.qual_menu .q_likes,
.q_likes,
td .q_likes   /*喜歡*/
{
    background:none !important;
    color:#CB2728 !important;
}
.qual_menu .q_shares,
.q_shares,
td .q_shares   /*分享*/
{
    background:none !important;
    color:#A74949 !important;
    border:0 !important;
}
.qual_menu .q_gives,
.q_gives,
td .q_gives    /*給*/
{
    background:none !important;
    color:#620E0E !important;
}
.qual_menu .q_hates,
.q_hates,
td .q_hates    /*討厭*/
{
    background:none !important;
    color:#ccc !important;
}
.qual_menu .q_wants,
.q_wants,
td .q_wants    /*想要*/
{
    background:none !important;
    color:#8DB241 !important;
}
.qual_menu .q_wishes,
.q_wishes,
td .q_wishes   /*期待*/
{
    background:none !important;
    color:#5BB017 !important;
}
.qual_menu .q_needs,
.q_needs,
td .q_needs    /*需要*/
{
    background:none !important;
    color:#7A9A37 !important;
}
.qual_menu .q_will,
.q_will,
td .q_will   /*打算*/
{
    background:none !important;
    color:#B46DB9 !important;
}
.qual_menu .q_hopes,
.q_hopes,
td .q_hopes   /*希望*/
{
    background:none !important;
    color:#e05be9 !important;
}
.qual_menu .q_asks,
.q_asks,
td .q_asks   /*問*/
{
    background:none !important;
    color:#8361bc !important;
}
.qual_menu .q_has,
.q_has,
td .q_has    /*已經*/
{
    background:none !important;
    color:#777 !important;
}
.qual_menu .q_was,
.q_was,
td .q_was   /*曾經*/
{
    background:none !important;
    color:#525252 !important;
}
.qual_menu .q_wonders,
.q_wonders,
td .q_wonders   /*好奇*/
{
    background:none !important;
    color:#2e4e9e !important;
}
.qual_menu .q_feels,
.q_feels,
td .q_feels   /*覺得*/
{
    background:none !important;
    color:#2D83BE !important;
}
.qual_menu .q_thinks,
.q_thinks,
td .q_thinks   /*想*/
{
    background:none !important;
    color:#689CC1 !important;
}
.qual_menu .q_says,
.q_says,
td .q_says   /*說*/
{
    background:none !important;
    color:#E2560B !important;
}
.qual_menu .q_is,
.q_is,
td .q_is    /*正在*/
{
    background:none !important;
    color:#E57C43 !important;
}


/*--------------------------------------------------------------表格欄位*/

.qual_menu td  /*選單表格*/
{
    text-align:center !important;
    font-size:12px;
}
.qual_menu
{
    background:#000 !important;
    border:1px solid #222 !important;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
}
.qual_menu .on
{
    color:#FFF !important;
    text-shadow:0px 0px 5px #eeeeee;
}  


/*======================== 表情選單 ========================*/

#emoticons_show  /*圖片背景*/
{
    background:#fff;  
    border-right:0px solid #fcfcfc;
    border-bottom:0px solid #fcfcfc;
    border-top:1px dashed #ccc !important;
    padding-top:10px;
}
#emoticon_selecter  /*選單背景*/
{
    text-align:center;
    position:absolute;
    background:#eee;  
    border:1px solid #eee !important;
    width:450px !important;
    overflow:no;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
}
#emoticon_selecter img {border:0px solid #fff !important;}
#emoticon_selecter a:hover img {border:0px solid #bebebe !important;}
#emoticons_tabs ul li
{
    background:#eee;  
    font-size:12px;
    font-weight:500;
    text-transform:normal;
    margin-left:0px;
    border:0 !important;
    padding:;
}
#emoticons_tabs ul li a  {color:# !important;}
#emoticons_tabs ul li.current a  {color:#eee !important;}
#emoticons_tabs ul li.current  /*項目 正選*/
{
    background:#555 !important;
    border:0;
    border-bottom:0px solid #222 !important;
    font-weight:500;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
}
#emoticon_selecter a:hover,
#emoticons_tabs ul li a:hover
{
    color:#333 !important;
    top:0px;
    left:0px;
}
#emoticons_show .red_link  /*額外 連結*/
{
    background:none !important;
    font-weight:normal;
    font-size:11px;
    text-decoration:none !important;
}


(待續)

創作者介紹
M6

金羽銀華

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


留言列表 (4)

發表留言
  • 玖縭子
  • 謝謝你的教學網誌~~
    原本還不知道怎麼改的....( 汗
    看完了網誌後我覺得受益良多~~
    我的成果:http://www.plurk.com/lovelybonbon
    不介意的話可以看看
  • 很可愛繽紛呀~ ^ ^

    M6 於 2011/06/28 14:31 回覆

  • 白白你狐說
  • 請問有沒有語法可以改變『搜尋噗浪,並發掘「現在」正在發生的事』這行字的顏色?謝謝你
  • #empty_timeline_fg
    {
    color:# !important;
    }

    放入色碼即可

    M6 於 2011/08/18 08:22 回覆

  • yaya08385
  • 你的教學文寫得超好 讓我又學到不少
    請問發噗區圖示可以更換嗎?? 謝謝你!!
  • yaya08385
  • 我有爬文爬到圖示更換的教學了!!
    下次我會先自己爬文再發問 謝謝你^^
  • ^^

    M6 於 2013/09/30 21:11 回覆

找更多相關文章與討論