隔了一段時間,終於有空整理一下噗浪單則訊息頁面的問題。

噗浪將單則訊息頁面改版已經有好一陣子了,在上方增加了一個橫幅放廣告,原本置中的回應區放到左側,讓右側多出空間來放其他資訊與廣告欄位。

因為我用火狐,並有安裝 Adblock 外掛,所以預設看到的頁面會是這樣:

火狐(Adblock) 

會自動擋掉有廣告的部份。

如使用Chrome並且沒有安裝擋廣告的外掛,則會呈現這樣:

Chrome 

上方的橫幅與右側的廣告,可能會干擾到訊息本身的閱讀,如果有自訂的噗版樣式,多出來的區塊則會突兀的橫在那邊,導致版面不協調。  

我們可以使用自訂語法將原本的噗浪單則訊息頁面調回來,修正成原來的樣子。

用火狐看:

修正

用Chrome看:

C2-拿掉生物跟置中  

語法:

/*拿掉突兀的頁首與右側欄位*/
#plurker_info section, #top_header { display : none !important; }

/*拿掉噗浪生物*/
#timeline_holder #creature  { display : none !important; }

/*調整回應列表寬度並置中*/
#plurk_responses,
#reply .responses li article .message
{
    max-width: 960px !important;
    float : none !important;
}

 

如果原本使用的自訂佈景裡,浪上的噗訊息有特殊的指定底色或文字顏色,像是黑底白字,也可以使用語法來做適當調整:

訊息框

調整訊息框 

語法:

/*訊息底色字色與框線調整*/
#timeline_holder .bigplurk .content, #vert_timeline .bigplurk .content
{
    border: 0 !important;
    color: #eee !important;
    padding: 5px;
    background-color: #000; /*底色*/
    border-radius: 4px; /*圓角*/
}

/*調整頭貼大小*/
#timeline_holder .bigplurk .content .avatar img, #vert_timeline .bigplurk .content .avatar img { width: 40px; height: 40px; }

 

下方的回應區也可以相應的調整顏色:

回應框

調整框跟底色  

語法:

/*回應區底色字色與框線調整*/
#response_number h2 a, #plurk_responses div.feed-link a { background: none !important; }
#plurk_responses ul.responses
{
    background: #000 !important;
    border: 0 !important;
}
#plurk_responses ul.responses li
{
    background: #fff !important;
    border: 0 !important;
}

/*輸入區底色字色與框線調整*/
.plurkaction
{
    background: #000 !important;
    border: 0 !important;
}

 

如果希望保留左右側的排列,讓按讚分享的噗友資訊能顯示出來,也可以只改變外框顏色:

改框色

改外框  

語法:

/*調整右側資訊與回應欄位底色框線*/
#plurker_info section, #plurk_responses ul.responses, .plurkaction
{
    background: #000 !important;
    border: 0 !important;
}

 

動手嘗試看看吧!讓單則訊息頁面也能改成適合自己的噗版樣子~

 

補充:

想要保留右側欄位,但須隱藏廣告,可以使用這個語法~

/*只拿掉廣告,保留上方與右方欄位排列*/
 .adsense { display : none !important; }

arrow
arrow
    全站熱搜

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