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

在選用背景圖的時候,常常會發現,圖片的寬度或是高度不夠,會顯露出底色,這時,除了調整背景圖大小的方式(可參見 這篇文章),還有一種做法,就是改變噗浪預設的佈局,將時間軸的背景高度調成適合底圖呈現的樣態。

調整時間軸佈局   

時間軸原本預設的高度是386px,將他拉高至600px,並調整底線與日期線的相對應高度,以符合底圖想要呈現的高度大小。

語法:

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



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

/*-----時間軸背景高度調整-----*/

#timeline_holder
{
    height:600px !important;
}
#timeline_cnt, #timeline_bg, #timeline_fg
{
    height:600px !important;
}
#bottom_line
{
    top:602px !important;
    background:#000 !important;
    border-color:#111 !important;
    filter: alpha(opacity=50); opacity:0.5; zoom:1;
}
.div_inner
{
    height:580px !important;
}
#time_show
{
    top:623px !important;
    background:#000 !important;
    border-color:#111 !important;
    z-index:1113;
}
#timeline_bg .day_bg .div_inner
{
    height:5px !important;
    background:#111 !important;
    border-color:#111 !important;
    filter: alpha(opacity=60); opacity:0.6; zoom:1;
}


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

#timeline_holder
{
    background:url(http://farm4.static.flickr.com/3228/5735874537_b3419aec03_o.jpg) center top no-repeat;
    background-color:#000;
    background-attachment:fixed;   /*浮水印固定背景*/
}


/*-----時間文字標示-----*/

.bottom_start, .bottom_end  /*時*/
{
    color:#999 !important;
    font-size:12px !important;
}
.day_start .bottom_start, .day_start .div_start  /*日*/
{
    color:#000 !important;
    font-size:9px !important;
    margin-left:25px;
    margin-top:-5px;
}
#time_show span   /*每一則對應時間*/
{
    color:#ddd !important;
    font-size:11px !important;
}

為了保持版面的簡潔與易讀性,調整時間軸下方的訊息功能列及主控台的位置,縮至時間軸內部處理。

語法:


/*-----所有訊息功能列位置調整-----*/

#filter_tab
{
    position:absolute;
    top:580px;
    right:20px;
    z-index:1114;
}


/*-----主控台背景位置調整-----*/

#dashboard_holder
{
    width:900px;
    top:400px;
    left:20px;
    position:absolute;
    z-index:1111;
}
div#plurk-dashboard
{
    width:900px;
    height:120px !important;
    overflow:auto;
    position:fixed;
    z-index:1112;
    background:none;
    border:0 !important;
}


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

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


/*-----頁尾連結移除-----*/

div#footer p
{
    position:absolute;
    top:-10000px;
}


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

body, html
{
    background:url() center top no-repeat;
    background-color:#111;
}

 

再把不需要呈現的部份隱藏起來~

語法:

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

.AmiTT_main, .tooltip_cnt,  /*功能小視窗*/
#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;
}

使用了以上的語法內容,可以得出範例的樣式。試著換張喜歡的底圖,調整看看相應的數值,來嘗試不同的佈局效果。

 

應用此佈局進階設計出的新版型:

路林訶 lu lin ha

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

 

_+『換張圖片來試試』+_

換背景圖來呈現  

這個背景圖有 2500x1667 大小,所以,還可以調整背景圖位置的語法,決定要呈現圖片的哪個部份:

調整圖位置  

/*-----時間軸背景圖-----*//*圖片置中,調整至y軸80%位置*/

#timeline_holder
{
background:url(http://farm3.static.flickr.com/2099/5735874409_f2555271c7_o.jpg) center 80% no-repeat;
}

不同的感覺~ 佈局的新呈現~ 這樣每天玩噗就很有新鮮感了~

試著找出最適合你喜愛圖片的佈局吧~ 讓噗版的樂趣越來越豐富喔~

創作者介紹
創作者 M6 的頭像
M6

金羽銀華

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


留言列表 (8)

發表留言
  • 鯊魚瑪莉
  • 請問一下,
    當滑鼠移到某一噗時,
    下方時間軸會顯示時間,
    要怎麼要更改顯示時間的圖?

    我試過文中time span的語法,
    只是在我現在套用的語法找不到...... .

    謝謝你囉!
  • 嗯,如果套用的語法沒有,就要另外加囉~
    語法:
    #time_show span
    {
    background: url(放圖片網址) top center no-repeat;
    }

    依照圖片大小可能需要設拉開間距(padding)的距離

    M6 於 2011/08/11 21:36 回覆

  • 鯊魚瑪莉
  • 我套用了你提供的語法之後,
    雖然成功的把圖放在顯示的時間上,
    但是就算圖片是100*40 還是會有白框欸......,
    請問這是間距的問題嗎?
    還是置中的問題呢?
    我有試過把no-repeat改成repeat,
    也沒有成功:(

    謝謝你的幫忙!
  • 加上
    #time_show /*每則時間*/
    {
    background:transparent !important;
    border:0 !important;
    }
    試試?

    M6 於 2011/08/12 14:50 回覆

  • 悄悄話
  • はな✿小花
  • 你好 套用你的語法後想在時間軸加背景

    /*時間軸與發噗區背景*/
    #timeline_holder,
    #timeline_bg .day_bg .div_inner,
    #bottom_line,
    .plurkaction,
    #toggle_tab li.tt_selected
    {
    background:none;
    border:0 !important;
    }

    不過這個語法讓時間軸和發噗區的圖片連在一起
    所以我在background寫語法時
    圖片就會出現在"時間軸" "全部、我的、私人回應那條" 和 "發噗區"
    變得很亂>< 請問要怎樣才能只設定在時間軸呢?

    謝謝噢 版主超厲害 感謝你的分享^^
  • 在這段後面再加上:
    #timeline_holder
    {
    background:url(圖片網址) center top no-repeat;
    }

    就可以囉 ^ x ^

    M6 於 2012/01/01 11:18 回覆

  • 莫里哀
  • 請問一下我要如何讓時間軸的背景圖片淡化看到噗浪背景圖片
    就是背景圖片能調透明度這樣的語法
  • 莫里哀
  • 講錯了,是河道背景圖
  • 需要使用 ps 等圖片處理軟體修改圖片透明度後再套進語法裡使用喔。

    M6 於 2012/10/31 21:08 回覆

  • 悄悄話
  • 綠茶
  • 是整個複製嗎?
    直接放在用好的樣式css下?
    因為我怎麼用最後都還是只有一片漆黑><
  • 不是喔,至少背景圖網址的部分需要換成你想使用的圖片,這篇文章是提供範例讓噗友自行試著編寫語法用,還請試著去了解語法的變化再應用喔。

    M6 於 2014/01/19 18:01 回覆