[ plurk css ] 調整畫面佈景與主控台高度 @ 金羽銀華

若希望畫面佈景的整張背景圖呈現，沒有外露的底色，也不被時間軸所框限住呢？

調整畫面佈景與主控台高度示範

可以的。只要將背景圖網址的語法放到畫面佈景（body, html）的項目中，並且固定住主控台的高度，

這樣，就不會因為個人資訊太多而讓背景圖高度不足涵蓋整體畫面了～

/*------------------------------------------------------------------------
噗浪版型 Plurk CSS: 調整畫面佈景與主控台高度示範
設計出處 Design by: Be Myself Inc. M6
背景圖源 Background image from: (socwall.com)
-- 我們設計的噗版CSS內容僅供個人自用，請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有保留一切權利 All Rights Reserved --
------------------------------------------------------------------------*/

/*======================== 背景設定 ========================*/

/*-----畫面背景-----*/

body, html
{
   background:url(http://farm4.static.flickr.com/3121/5745071848_af1dd751b7_o.jpg) center top no-repeat; /*圖片置中靠上對齊不重複*/
   background-color:#000;
   background-attachment:;   /*浮水印固定背景fixed*/
}

/*-----時間軸背景-----*/

#timeline_holder
{
   background:none; /*去除背景*/
   border:0 !important; /*去除框線*/
}

#timeline_bg .day_bg .div_inner, /*換日線*/
#bottom_line /*底軸時間線*/
{
   background:#111 !important;
   border-color:#111 !important;
   filter: alpha(opacity=10); opacity:0.1; zoom:1;
}

/*-----隱藏特定時間軸主題的時間直線-----*/

.block_bg .div_one_line,
.small_timeline .block_bg .div_one_line
{
   filter:alpha(opacity=0) !important;
   -moz-opacity:0 !important;
   opacity:0 !important;
   height:0 !important;
   width:0 !important;
   overflow:hidden;
   zoom:1;
}

/*-----隱藏噗浪生物-----*/

#dynamic_logo, #logo img, img#creature
{filter:alpha(opacity=0); opacity:0; zoom:1;}

/*-----發噗區背景-----*/

.plurkaction,
#toggle_tab li.tt_selected
{
   background:none;
   border:0 !important;
}

/*-----主控台背景-----*/

div#plurk-dashboard
{
   background:none !important;
   border:0 !important;
   height:206px; /*設定固定高度*/
   overflow:auto; /*溢出高度的內容自動顯示捲軸*/
}

/*-----隱藏區域-----*/

#dash-friends p, #dash-friends form,   /*朋友搜尋*/
div #tw_help,   /*入門說明*/
div a#dashboard-invite,   /*邀請朋友,*/
div #sharePlurk,   /*分享連結*/
.dash-icon    /*社交小圖示*/
{
   filter:alpha(opacity=0) !important;
   -moz-opacity:0 !important;
   opacity:0 !important;
   height:0 !important;
   width:0 !important;
   overflow:hidden;_overflow:none;
   zoom:1;
}

/*-----隱藏卡馬箭頭-----*/

.link_arrow, .cmp_points-arrow
{
   height:0 !important;
   font-size:0 !important;
   position:absolute;
   filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;
}
.cmp_karma_up,
.cmp_karma_down
{filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;}
a.link_arrow,
a.link_arrow link_badges
{filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;}

使用了以上的語法，就可以得出如上圖的呈現樣態。

進一步，若想要整張底圖完整呈現，畫面乾淨俐落如桌布一般，則可以再加上下面的語法：

/*-----透明度隱藏與顯現-----*/

div#plurk-dashboard, /*主控台*/
div#plurk_form,   /*發噗區*/
#timeline_cnt, /*浪上的噗*/
#top_login, /*頁首右邊*/
#top_bar, /*頁首左邊*/
#footer, /*頁尾*/
.browse_button   /*往前往後箭頭*/
{
   filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;
}

/*滑鼠移至則顯現*/
div#plurk-dashboard:hover,
div#plurk_form:hover,
#timeline_cnt:hover,
#top_login:hover,
#top_bar:hover,
#footer:hover,
.browse_button:hover
{
filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
}

/*-----隱藏時間軸線-----*/

#timeline_bg .day_bg .div_inner, /*底*/
#bottom_line
{
   background:none !important;
   border:0 !important;
}
.bottom_start, .bottom_end /*時*/
{
   font-size:0px;
   height:0;
   width:0;
   overflow:hidden;
   filter:alpha(opacity=0); opacity:0; zoom:1;
}

這樣，噗版即會顯現出如同桌布的姿態～

加上隱藏語法

應用整張圖置於畫面佈景，並固定主控台高度的設定，進階設計出的新噗版～

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

所以，找出你最喜歡且最適合你瀏覽環境的設計吧～底圖放在畫面佈景或時間軸，會顯現出不同的風格，同一張圖也能有不同的呈現哪～