前幾天噗浪將預設版面做了大幅度的更改，頁首增加了一條bar，單則訊息網址頁的排版也大幅更動了。一開始的更動造成大部份版型背景圖無法顯示，並有跑位的情況，後來噗浪有再修改過這點，背景圖無法顯示的問題有些已經解決，但頁首的bar，多出的外框，讓版型整體會有跑位的情況，則仍舊無法解決。
目前用自訂佈景的方式，能夠做的變動其實並不多，因為寫入自訂佈景區塊的css內容，噗浪會在前面強制加上一個項目標籤，所以寫入的內容雖然項目一樣、語法正確，但卻無法顯示。原本浪上的噗回應區的格式也因為如此而無法自訂，後來似乎是有許多噗友反應，這樣會嚴重影響到噗的閱讀性，才開放並恢復了這部分的自訂功能。
頁首的bar更改方式，目前在自訂佈景該項目是無法更動的。而噗浪新的這版頁首，其實可以容納更多選單項目，視覺上也更活潑，較之原本的連結點選方式，有其方便之處，但可惜的是無法自訂樣式，造成背景圖上方多出突兀的一條，而下方捲軸往下拉也會出現底色，讓原先自訂的背景圖無法完全覆蓋住，整個版面看起來是走樣的。
整體外框跑位的情形，雖然無法從自訂佈景改善，但上方橫條bar的底色，我們嘗試過後，可以用時間軸背景語法的方式來暫時蓋過，讓佈景整體趨於一致。
以「不動煌真」這個版型來舉例，
原先跑版情況：
調整後：
使用語法：
/*plurk左側與上方分欄式版型調整*/
html, body
{
background: #111 url(這裡放原先版型內的背景圖連結網址) center top no-repeat fixed !important;
background-size: cover !important;
min-height: 1200px !important;
}
#timeline_holder, #bottom_line, .day_bg .div_inner, #time_show, .plurkaction, #toggle_tab li.tt_selected, #filter_tab a.filter_selected, #filter_tab a.off_tab, #plurk-dashboard, #plurk-dashboard h2
{
background: none !important;
border: 0 !important;
}
div#timeline_holder
{
background: #111 url(這裡放原先版型內的背景圖連結網址) center top no-repeat fixed !important;
background-size: cover !important;
height: 700px !important;
margin-top: -42px !important;
}
/*調整主控台資訊區寬高*/
#dash-additional-info { width: 260px !important; }
#dash-stats { top: -183px; max-height: 40px !important; }
#dash-friends { left: 560px; top: 42px; max-height: 40px !important;}
#dash-fans { left: 795px; top: 42px; max-height: 40px !important;}
.karma_hover { margin-top: 12px !important; }
/*調整時間軸浪上的噗高度*/
#timeline_holder .plurk { margin-top: 70px !important; }
/*調整所有訊息選單區位置*/
#filter_tab { z-index: 903 !important; top: -120px !important; }
/*調整發噗區位置*/
div#plurk_form { top: -120px !important; position: absolute !important; width: 950px; }
/*隱藏暱稱*/
span.nick_name { font-size: 0px !important; }
/*隱藏頁尾*/
div#footer, div#sliderAds, div#sliderAds .btnClose { display : none !important; }
說明：
/*背景*/ 段落要用新的背景語法整段取代，並視背景圖片大小，適當調整 min-height 與 height 這兩行的數值。其餘語法則可以貼在所有自訂語法內容的最後。
這個方法是使用時間軸位置整體往上調整覆蓋住原本bar的底色，所以需要調整時間軸、訊息列、發噗區與河道噗浪的相對位置來因應。
直接安裝連結：http://www.plurk.com/installDesign/5807705-1f8265d1ac
同樣類型的版面也可以使用這個方法來修正。
如：「不動真煌」 （直接安裝連結：http://www.plurk.com/installDesign/5807705-275e628238）
除了這個版式，最新發表的「GOTOTHEFUTURE+」，則可以示範另一種覆蓋橫條bar的方式。
調整後：
使用語法：
/*GOTOTHEFUTURE+背景修正*/
html, body
{
background: #2d3538 url(這裡放原本的背景圖網址) center top no-repeat !important;
background-size: contain !important;
height: 120% !important;
}
div#timeline_holder
{
background: url(這邊放要使用在上方橫條的底色圖片或背景圖網址) left top no-repeat !important;
background-size: 3000px 43px !important;
margin-top: -42px !important;
}
#timeline_holder, #more_options, #bottom_line, .day_bg .div_inner, #time_show, .plurkaction, #toggle_tab li.tt_selected, #filter_tab a.off_tab, #filter_tab a.off_tab:hover, #filter_tab a.filter_selected, #filter_tab a.filter_selected:hover, div#plurk-dashboard, #plurk-dashboard h2
{
background: none !important;
border: 0 !important;
}
/*隱藏自介暱稱*/
span.nick_name { font-size: 0px !important; }
/*隱藏頁尾*/
div#footer, div#sliderAds, div#sliderAds .btnClose { display : none !important; }
/*調整卡馬值字型大小*/
div#karma { font-size: 20px !important; }
div.karma_hover { font-size: 22px !important; }
留言列表
噗浪CSS (2)