版權所有+保留所有權利_+_+_
© 2010-2015 Created by 如我協力創意工作室 Be Myself Inc.
**版權說明**
-- 我們提供與設計的噗版CSS內容僅供個人自用,請勿改製再分享或用於商業用途 --
((請勿將全部或部份內容直接取用當作自己的設計))
-- 除了個人噗版自用外(修改請註明原CSS碼出處),其它使用方式均未授權,還請務必注意,勿侵權喔~--

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

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

因為我用火狐,並有安裝 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; }

創作者介紹
M6

金羽銀華

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


留言列表 (10)

發表留言
  • urania.galaxy
  • 請問您的「上一則訊息」、「下一則訊息」的連結網址還存在嗎?謝謝!
  • 這個功能噗浪改版後已經拿掉了,css 只能改變外觀,功能無法還原喔!

    M6 於 2012/07/08 15:32 回覆

  • urania.galaxy
  • 謝謝,我也曾多次寫信給噗浪官方網站請求恢復此功能,卻一直沒有回應。
    如果當局一直選擇不予恢復,想必有其特殊考量吧,那就無法勉強,我不能再繼續緊迫盯人:)
  • :)

    M6 於 2012/07/08 15:57 回覆

  • 蛇默
  • 最後一個我試不出來耶。:-?
  • 蛇默
  • 成功了謝謝您的分享w
  • ^ ^

    M6 於 2012/07/08 15:57 回覆

  • imreenie
  • 不好意思,想請問要怎麼改噗浪回應列的位置?
    今天噗浪改版之後我的回應列就向右歪了(圖片裡紅色那一段)
    不知道有沒有辦法改回去T_T謝謝
    http://images.plurk.com/f2af9b18afb7f7a71a26ecd5fb1f14cd.jpg
  • 把這段語法刪去即可:
    /*表格寬度*/
    .display table,.toggled table, .list table { width: 100% !important; }

    M6 於 2012/07/11 18:12 回覆

  • 悄悄話
  • xiaomi0128
  • 請問那個網址裡面.要如何下載呢
  • 點選“安裝網址”連結就可以套用版型了

    M6 於 2012/07/29 19:51 回覆

  • 陳詩敏
  • 想請問 如果希望單則訊息也能呈現半透明
    語法要怎麼打呢?
  • 將透明度語法放入你想要使用的段落 {} 中即可。
    透明度語法可以參考這篇說明:
    http://m66660000.pixnet.net/blog/post/30919028

    M6 於 2013/07/17 18:56 回覆

找更多相關文章與討論