前陣子，噗浪有在官方部落格中公告即將把廣告放到時間軸上，今天，終於看到它出現了.......
如果你不希望廣告出現在個人的時間軸上，可以用這一行語法把它蓋起來～
/*一行隱藏*/ #plurk_ads {max-height:0px !important;max-width:0px !important;}
然後就會恢復像原本這樣乾淨的噗面～
商業化的路徑，廣告是許多網站選擇開始獲利的最便捷方式，如今噗浪也選擇了同樣的道路。
雖然如此，但還是有許多網站，選擇另一種道路，以「創新」服務來支持網站營運下去的條件。
在發噗區下方的圖示改變了，功能也有調整，原本在發噗按鈕旁的表情符號也移到了這：
從左至右分別是：分享資訊（圖片、連結、影片、視訊），選擇表情符號，同步更新（fb、twitter、新浪微博），私人訊息及隱私選項。
浪上的噗打開回應列表下方的發噗區，則只會有分享資訊與選擇表情等兩個選項：
這陣子，噗浪真是一直在做一些小變動啊～
新增了「自訂表情」的功能，「換行」的功能，「刪除線」等的格式功能～
另外，還把分享影音圖文的預設樣式也變更了～
圖片的框框加上圓角跟底色，顯得有些多餘且突兀...
部落格與影音分享的轉貼連結，也多了顯示圖片、文字連結、左列框線等的樣式設定～
而原本轉噗會出現的那列轉噗者名單，則好像已經拿掉了。要看自己轉噗的訊息，現在點時間軸右下方"說讚&轉噗訊息"就可以看到了。
當個人檔案填寫滿90%，就會出現自訂表情的功能列：
點新增會跳出自訂視窗：
這些許許多多的小更動，也都有相應的css可以自訂改變它呈現的樣式，上面的圖片有些是已經改好後的樣子，想看看噗浪原本預設的樣貌？先暫時清除掉自訂樣式內容就可以看見了～ ^ ^
接下來就列出相關的語法項目，請需要的朋友試著自己修改看看～
之前曇花一現短暫出現幾個小時的轉噗（分享）功能，今日又重出江湖囉～
按下你的推文旁邊的 轉噗 連結，就會出現如上的圖示。
妙的是目前噗浪所推出的轉噗功能，是不會再發一個新的噗在自己河道上的，所以按下去後也沒有出現轉噗的內容在發噗區供你再確認與修正，而是直接發出去了～
以原本該則噗的樣態，發到你所有的好友及粉絲的河道上，所以，你的河道上不會再有一則新的噗，只會在原本被轉噗（分享）出去的噗的原噗下方顯示誰分享了此則訊息：
這一整條就這樣突兀的出現在噗上，跟套用的噗版樣式可能會不大搭配，所以需要再次修正自訂css的內容～
將～ 是不是合適多了呢 XD
相關的語法如下：
/*-----轉噗欄位-----*/
.td_info, .tr_info
{
background:none !important; /*拿掉背景*/
border:0 !important; /*去除框線*/
color:#fff !important; /*文字顏色*/
}
.td_info a, .td_cnt a
{
color:#7ac !important; /*連結顏色*/
}
請根據你所使用的噗版樣式適當更改顏色的設定喔 ^ ^
這兩天，噗浪開發了一個可以自行選擇暱稱顏色的功能：
有 紅、綠、藍 三色可選，預設值則為 黑 色。
這裡的顏色選擇，不僅僅會出現在自己的噗浪河道上，其他噗友看見的暱稱顏色也會跟著一起變，不同於自訂CSS語法的功能。
因為不習慣河道上充滿花花綠綠的各種色彩，所以我一直沒使用該功能，而我設計的噗版CSS中也多半有強制指定暱稱顏色的設定。
如果你需要統一一下自己河道上的暱稱顏色，看起來不那麼繽紛，可以使用下列語法：
/*-----噗上的人名-----*/
.td_qual span a,
.td_qual span a:hover
{
color:#111 !important; /*統一為黑色*/
}
也可以指定其他顏色，可以參考色碼查詢網站： http://www.colorschemer.com/online.html
而如果原本套用的噗版已經有指定顏色，但你希望能夠顯現出噗友各自的選擇，就請刪除上面那段囉～ ^ ^
今天噗浪多了一些新功能，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）的項目中，並且固定住主控台的高度，
這樣，就不會因為個人資訊太多而讓背景圖高度不足涵蓋整體畫面了～
單則訊息頁與功能視窗，之前有發文說明過：
在這篇則列出常用的設計項目。
_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;
}
主控台資訊區塊的細部設定，包括自介、統計、朋友、粉絲等。
_09_資訊區塊
/*======================== 資訊區塊 ========================*/
#dash-profile, #dash-stats, #dash-friends , #dash-fans /*置中對齊*/
{
text-align:center;
}
#dash-stats h2, #dash-friends h2, #dash-fans h2 /*標題*/
{
background:none !important;
border:0 !important;
color:# !important;
}
/*列出所有朋友粉絲連結*/
.show_all_friends a
{
font-size:11px !important;
color:# !important;
text-decoration:none !important;
letter-spacing:px;
}
.show_all_friends a:hover
{
color:# !important;
background:# !important;
text-decoration:none !important;
}
再來是發噗區的設定。包括「私人訊息、語系及選項」選單，以及"plurk"與"搜尋"頁籤及內容的設計。
_07_私人選項
/*======================== 私人選項 ========================*/
#more_options_link /*打開前*/
{
background:transparent url(http://) left top no-repeat !important;
padding-left:15px !important;
border:0 !important;
color:#aaa !important;
font-size:12px !important;
}
#more_options td,
#more_options .caption,
#more_options_holder
{
background:none !important;
border:0 !important;
color:#eee !important;
font-size:12px !important;
letter-spacing:;
text-decoration:none !important;
}
#more_options_holder /*打開後*/
{
background:#444 !important;
border:1px solod #222 !important;
}
在前一篇噗版的主要背景與頁首頁尾設定後，細部調整時間軸（河道）相關的設計變化：
_04_時間顯示
/*======================== 時間顯示 ========================*/
.bottom_start, .bottom_end /*隱藏底線時間*/
{
font-size:0px;
height:0;
width:0;
overflow:hidden;
filter:alpha(opacity=0); opacity:0; zoom:1;
}
.day_start .bottom_start, .day_start .div_start /*顯示日期*/
{
background:#09628a !important;
color:#edffff !important;
font-size:11px !important;
padding:0 22px;
margin-top:2px;
width:auto;
height:auto;
filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
}
#timeline_bg .day_bg .div_inner
{
width:24px !important;
height:1px !important;
}
/*每則噗的對應時間*/
#time_show
{
background:# !important;
border:0 !important;
height:px;
margin-top:px;
padding:px;
-moz-border-radius:5px 5px 0px 0px;
-khtml-border-radius:5px 5px 0px 0px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
}
#time_show span
{
color:#;
font-size:12px !important;
}
又到了整理噗版CSS總表的時間。
現在我設計噗版，是以分段的方式來進行，各個段落的變化與整合配搭，可以產生許多不同的變化：
列出各段基本項目與常用樣式，一方面是留下記錄，一方面也希望有助噗友自己創作噗版結構時參考。
噗浪預設的功能視窗與說明小視窗，有時和噗版整體的背景色顯得不太協調，這時就需要用自訂CSS來改變一下視窗的外觀樣式～
/*------功能視窗樣式------*/
[ 0 原本的功能視窗 ]
[ 1 改變標題與內框的顏色 ]
語法：
/*標題列*/
.GB_Window .header td.caption,
.GB_Window .close
{
color:#ddd; /*字顏色*/
background:#333 !important; /*背景色*/
}
/*內框線*/
.GB_Window .header
{
border:1px solid #333 !important;
}
.GB_Window .content
{
border-color:#333 !important;
}
（2011-03-06：發現單則噗的廣告消失了～噗浪拿掉了嗎？希望不會和"讚"一樣，又復活了～ 
）
（2011-03-07...果然...只是短暫的現象......單則噗還是有廣告的......）
昨天 2011-02-16 開始，噗浪首頁放上了廣告：
訊息已經有更新在 噗浪有新的「首頁」了... 該篇文章。
而今天， 2011-02-17 發現，原來單則訊息頁也出現了廣告：
首頁的廣告，是這個平台的選擇，選擇以這樣的方式來面對所謂利潤的需要。
但，單則訊息頁的廣告，就像是在使用者部落格的頁面，無通知的直接置入了廣告......
雖然，這些廣告，只有會員登出後才看得見，登入時（目前）是看不見的。
如果你不希望其他人瀏覽你的頁面的時候，出現類似廣告訊息，可以用下面這段語法來隱藏它：
/*-----------------------------------------------隱藏單則訊息廣告區*/
div .adsense
{
height:0 !important;
width:0 !important;
overflow:hidden;
filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;
}
噗浪CSS (2)