金羽銀華

今天噗浪多了一些新功能，CSS的部份，原本的表情選單項目已經不適用，現在改成這樣囉～

比原本的噗浪預設樣式更為清爽簡潔，但，如果我們想更自訂它的風格，或是修正原先套用版型時這部份的CSS，就需要瞭解新的自訂div項目了。

主控台版型的排列練習與嘗試，請試著按照段落一一貼上，來觀察其中的排版變化跟影響的區塊，熟悉後，就可以自己試著寫寫看合用的版本囉～

[ 資訊置左 ]

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

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

/*------------------------------------------------------------------------
噗浪版型 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 --
------------------------------------------------------------------------*/

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

2013_基本款，就此誕生。

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

語法內容如下，請參考：

為了方便自己選用與組合噗版的各個CSS項目，所以整理了一份對照表，羅列了大部份使用過的項目清單，也放上來提供大家參考～

/*------------------------------------------------------------------------
噗浪語法 Plurk CSS: 噗浪CSS架構對照表
列表整理 List order by: Be Myself Inc. M6
-- 此噗版CSS僅供個人練習參考用，請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有 保留一切權利  All Rights Reserved --
------------------------------------------------------------------------*/


/*-----#前置設定-----*/

img   /*所有圖片*/
a:focus, :focus, a, a:link, a:visited, a:active  /*連結文字*/
a:hover
select  /*下拉選單*/
select:focus
input    /*輸入欄位*/
input:focus


/*-----語言字型-----*/

body.language-large-font
.language-large-font #top_login
.language-large-font #footer
.language-large-font .small
.language-large-font .tooltip_cnt
.language-large-font .direct-l


/*-----Google瀏覽器捲軸-----*/

::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-thumb:hover


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

body, html
#page_title  /*標題*/
#top_login    /*頁首登入列*/
#top_bar /*頁首左邊*/
#top_bar a   /*頁首左邊連結*/
#top_bar .content a#edit_link   /*編輯*/
#alert_beacon  /*通知*/
.unread #alert_beacon    /*未讀通知*/
#top_bar .item img  /*頁首左邊小圖*/
/* USE_DARK_ICONS */ /*頁首左方小圖使用深色*/
#top_login a /*頁首右邊文字*/
a#login_link   /*登入登出*/
#languge_selector  /*切換語言*/
#languge_selector form select  /*尚未展開時的下拉表格欄位*/
#languge_selector form select option  /*展開後的表格*/
div#footer  /*頁尾*/
div#footer p    /*頁尾段落*/
#footer a  /*頁尾連結*/

為了呈現底圖適合的風景，除了放到時間軸並調整佈局，或是用語法改變背景圖大小外，

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

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

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

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

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

語法：

換來換去，還是覺得簡潔清爽的版面，會讓自己不容易用膩啊～ (茶)

所以，就趁空將之前噗友反應過的，希望將 二月二 這個白淨噗版作成部落格樣式的願望，付諸實現～

新的 D+二月二 痞客邦部落格樣式就這樣出爐啦～

單則訊息頁與功能視窗，之前有發文說明過：

[ plurk css ] 單則訊息連結頁

[ plurk css ] 功能視窗的小變化

在這篇則列出常用的設計項目。

_11_單則訊息頁

/*======================== 單則訊息 ========================*/

div.bigplurk
.user-nick,    /*暱稱*/
.user-nick:hover
{
    font-size:18px !important;
    font-weight:500 !important;
    letter-spacing:em;
    top:0px;
    left:0px;
}

div.bigplurk h1.content .plurk_content   /*文字設定*/
{
    font-size:18px !important;
    line-height:24px !important;
    letter-spacing:em;
    color:#111 !important;
}

div.contentwrapper h1.content    /*內容區*/
{
    border:1px solid # !important;
    border-bottom:0 !important;
    filter:alpha(opacity=100) !important;opacity:1 !important; zoom:1;
    -moz-border-radius:3px 3px 0px 0px;
    -khtml-border-radius:3px 3px 0px 0px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -webkit-border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
}

div.time    /*時間區*/
{
    border:1px solid # !important;
    border-top:0 !important;
    filter:alpha(opacity=100) !important;opacity:1 !important; zoom:1;
    -moz-border-radius:0px 0px 3px 3px;
    -khtml-border-radius:0px 0px 3px 3px;
    -webkit-border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
}

浪上的噗，是主要玩噗閱讀噗的所在，也是整體噗版設計的重點。

_10_浪上的噗

/*======================== 浪上的噗 ========================*/

#timeline_holder div.plurk  /*淡入效果*/
{
    -webkit-transition:top 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-transform-origin:0 0;
    -moz-transition:top 0.5s ease, -moz-transform 0.5s ease;
    -moz-transform-origin:0 0;
}

/*浪上的噗往下移*/
.plurk {margin-top:12px;}

/*浪上噗的最小高度*/
.plurk .truncated {min-height:22px;}

/*讓超過時間軸的噗內容出現*/
#timeline_cnt {overflow: visible;}

/*表格寬度*/
.list table {width:100% !important;}

/*列表延伸動態*/
.list
{
    -webkit-transition:height 0.5s ease;
    -moz-transition:height 0.5s ease;
}