[ plurk css ] 2013_基本款背景型 (可自由運用換背景) @ 金羽銀華

多方嘗試各種噗版的可能後，總有一段時間，會回歸使用最原始的版型，噗浪的預設值。然後，又想著哪裡可以再修正，或是更簡潔地置換想看的背景圖的方式。

2013_基本款，就此誕生。

拿掉了背景、底色、框線，隱藏了不必要的選項，設定好基本的文字大小與色系，這套『基本款』的語法，可以依照個人不同的需求再增減項目，項目清單請參考「噗浪css架構對照表」這篇文章。

語法內容如下，請參考：

/*======================== 前置作業 ========================*/

/*去除背景與框線*/
body, html,
#timeline_holder,
#timeline_bg .day_bg .div_inner,
#time_show,
#bottom_line,
#filter_tab a.off_tab,
#filter_tab a.filter_selected,
#filter_tab a.off_tab:hover,
#filter_tab a.filter_selected:hover,
#updater, #music_player,
.plurkaction,
#toggle_tab li.tt_selected,
input#share_link,
div#plurk-dashboard,
#dash-stats h2, #dash-friends h2, #dash-fans h2,
a.friend_man, a.friend_man:hover,
#plurk_responses ul.responses,
div #plurk_responses h2 a,
#plurk_responses div.feed-link a,
div #plurk_responses h2 a:hover,
#plurk_responses div.feed-link a:hover,
#plurk_responses ul.responses li,
#reply_box,
#reply_box_holder,
div #not_logged_in h2,
div #not_logged_in h2 a,
.AmiTT_main,
#more_options_link,
#more_options td,
#more_options .caption,
#more_options_holder,
.plurk_box .login_to_see a,
.red_link
{
   background:none !important;
   border:0 !important;
}

/*拿掉框線*/
.AmiMenu.info_menu,
.tooltip_cnt,
img
{
   border:none !important;
}

/*透明度變化*/
#footer,
.browse_button,
.cmp_poll_line
{
   filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;
}
#footer:hover,
.browse_button:hover
{
   filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
}

/*放上背景與顏色*/
#top_login
{
   background:rgba(0,0,0,0.1) !important;
   margin:0;
   margin-bottom:px;
   padding-top:5px;
   padding-right:10px;
   height:px;
   border-bottom:1px solid rgba(0,0,0,0.1);
   -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   -o-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   -ms-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/*文字顏色*/
.bottom_start, .bottom_end,
p#about_me, #dash-profile, p#relationship_container,
#dash-stats, #dash-stats table td,
#dash-friends, #dash-fans
{
   color:#aaa !important;
   line-height:em;
   font-size:8pt;
}

/*連結文字*/
a:focus, :focus, a, a:link, a:visited, a:active {outline:0 !important;}
a, a:link, a:visited, a:active,
#plurk_responses ul.responses .message a,
div #not_logged_in h2 a
{
   color:#777 !important;
   text-decoration:underline !important;
   text-transform:normal;
   -moz-outline-style:none !important;
}

/*頁首頁尾文字*/
#top_login a,
#top_bar, #top_bar a,
#top_bar .content a#edit_link,
#alert_beacon,
#languge_selector,
#footer, #footer p,
#footer a, #footer a:hover
{
   font-size:8pt;
   font-weight:normal !important;
   text-transform:normal;
   text-decoration:none !important;
   border:0 !important;
   background:none !important;
}

/*底色*/
.tooltip_cnt,
.AmiMenu.info_menu,
.AmiMenu.info_menu .separator,
.AmiMenu.info_menu .block,
.AmiMenu.info_menu td.on,
.AmiMenu.info_menu .user_info.on,
.GB_Window .header td.caption,
.GB_Window .close,
.unread #alert_beacon,
.unread_generic,
#filter_tab a.filter_selected .unread_generic,
.selectedSmartInputItem, .selectedSmartInputItem a,
.selectedSmartInputItem a:hover,
.auto_ta .person
{
   background:#ccc !important;
}

/*整個隱藏起來*/
#dynamic_logo, #logo img, img#creature,
.link_arrow, .cmp_points-arrow,
.cmp_karma_up,
.cmp_karma_down,
a.link_arrow,
a.link_arrow link_badges,
#dash-friends p, #dash-friends form,
div #tw_help,
div a#dashboard-invite,
div #sharePlurk,
.dash-icon,
#top_login a#sign_up,
#getting_started,
div .adsense
{
   filter:alpha(opacity=0) !important;
   -moz-opacity:0 !important;
   opacity:0 !important;
   height:0 !important;
   width:0 !important;
   overflow:hidden;_overflow:none;
   zoom:1;
   position:fixed;
   top:-9000px;
}

/*輸入與選單*/
textarea,
textarea#input_big_private,
textarea#input_big_private.content,
textarea#input_big,
textarea#input_permalink,
textarea#input_big.content,
input#current_query,
select, select:focus,
input#share_link,
input#loc_field,
.auto_ta
{
   color:#555 !important;
   background:rgba(255,255,255,0.05) !important;
   border:1px solid #eee !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;
}
textarea:focus,
textarea#input_big_private:focus,
textarea#input_big:focus,
textarea#input_permalink:focus,
select:focus
{
   color:#111 !important;
   background:rgba(255,255,255,0.5) !important;
   border:1px solid #aaa !important;
}

/*捲軸*/
HTML
{
   SCROLLBAR-FACE-COLOR:#f4f4f4;
   SCROLLBAR-HIGHLIGHT-COLOR:#fff;
   SCROLLBAR-SHADOW-COLOR:#eee;
   SCROLLBAR-3DLIGHT-COLOR:#bbb;
   SCROLLBAR-ARROW-COLOR:#f4f4f4;
   SCROLLBAR-TRACK-COLOR:#ccc;
   SCROLLBAR-DARKSHADOW-COLOR:#ccc;
   overflow-x:hidden;
}
::-webkit-scrollbar {background:rgba(255,255,255,0.5);}
::-webkit-scrollbar-thumb {background:#eee;}
::-webkit-scrollbar-thumb:hover {background:#ccc;}
::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover
{
   -moz-border-radius:10px;
   -khtml-border-radius:10px;
   -webkit-border-top-left-radius:10px;
   -webkit-border-top-right-radius:10px;
   -webkit-border-bottom-right-radius:10px;
   -webkit-border-bottom-left-radius:10px;
   -moz-box-shadow:0px 0px 5px #fff;
   -webkit-box-shadow:0px 0px 5px #fff;
   box-shadow:0px 0px 5px #fff;
   -moz-box-shadow:0px 0px 5px rgba(255,255,255,0.5);
   -webkit-box-shadow:0px 0px 5px rgba(255,255,255,0.5);
   box-shadow:0px 0px 5px rgba(255,255,255,0.5);
}

/*======================== 放背景圖 ========================*/

/*全頁面*/
body, html
{
   background:url() center top no-repeat !important;
}

/*時間軸*/
#timeline_holder
{
   background:url() center top no-repeat !important;
}

/*主控台*/
div#plurk-dashboard
{
   background:url() right bottom no-repeat !important;
}

※ 把以上的語法內容複製貼上在“個人檔案設定”的“自訂佈景風格”欄位按儲存後即可使用。

在 /*=放背景=*/ 這區塊中，可將喜愛的桌布網址貼進想放的版面位置，就可以在使用純白的噗版外，換不同風景，搭配每日心情～

/*------------------------------------------------------------------------
噗浪版型 Plurk CSS: 2013_基本款背景型
設計出處 Design by: Be Myself Inc. M6
背景圖源 Background image from: (customize.org)
安裝網址 Install: http://www.plurk.com/installDesign/3997864-8140a7ee49
更多佈景 More Themes: http://www.flickr.com/groups/plurkcss
-- 此噗版CSS僅供個人自用，請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有保留一切權利 All Rights Reserved --
------------------------------------------------------------------------*/

這是今天的風景。

然後，想想在這樣的基礎上，如何修正變化，再創造出不同的噗版佈景CSS，更讓自己開心