除了上一篇全頁面背景圖的運用外,試著將圖片放到時間軸、主控台,調整背景與文字顏色等色系,並進一步改善浪上的噗的呈顯方式,改一點小細節,就能有完全不一樣的噗浪風景~

2013_基本款背景型2

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

因為圖片放在時間軸,若希望時間軸底線呈現富透明度的背景,在原本基本款的語法外,可以再加上時間軸底線的語法:

#timeline_bg .day_bg .div_inner, /*換日線*/
#bottom_line /*時間底線*/
{
    background:rgba(0,0,0,0.4) !important;
    padding-top:4px;
}

#timeline_bg .day_bg .div_inner  /*讓換日線跑到底端-如果希望換日線完整出現,這段語法不用放*/
{
    height:0px;
}

然後改連結的文字顏色(#aa0000 紅色),以及主控台等文字顏色。

另外,全頁面背景設為黑色,所以需要調整一些輸入區的文字顏色(將黑色改成淺灰色)及底色(由白色改為黑色),讓色彩更協調。

這個版放上了浪上的噗的基礎應用,包括透明度與底色的設定,還替換了時間軸往前往後以及loading的小圖,可以進階參考應用。

 

再來,圖片放到主控台的範例:

2013_基本款背景型3

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

這款是將上篇 2013_基本款 的語法,加上了時間軸線的底色,改連結顏色為青綠,並加上了浪上的噗語法。

而主控台圖片的呈現,原圖尺寸為1024x768,選局部呈現,則需要特別調整一下背景語法中的指定位置:

/*主控台*/
div#plurk-dashboard
{
    background:url(這邊放圖片網址) right 10% no-repeat !important;  /*圖片靠右對齊,調整至y軸10%位置*/
}

 

喜歡圓圓的噗嗎?那就加上圓角設定:

/*加上圓角*/
.plurk_cnt,
.dots .inner,
.response_count,
.qualifier, .m_qualifier, .r_qualifier,
div.bigplurk .r_qualifier,
#prev_plurk, #next_plurk
{
    -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;
}


/*圖片的框線與圓角*/
.p_img,
.user_link,
#profile_pic
{
    border:3px solid #ffeeee !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;
}

 

像這個圓圓的egg~

2013_基本款背景型_egg

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

如何?圓圓的背景很適合圓角吧? ^ w ^ (有網友留言:「好有端午節的 FU~」XD)

 

多練習多嘗試,發現各種噗版的好玩之處與可能性吧~

arrow
arrow

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