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

噗浪終於推出了快速回覆功能,加在原本影音圖片顯示視窗點開後的底部,這樣對瀏覽多圖或多個影片來說十分方便哪~ 

如果你希望修改成早期噗浪單純的呈顯方式(沒有右方留言框),或是原本版型中已有修改語法,因多了快速回覆欄位導致版面跑位,可以參考 這篇文章 做修正。

對於新增改版後的留言顯示方式,想要美化它更符合自己的使用習慣與風格,我們可以用自訂css來設計:

(影音圖片視窗---白色)

影音圖片視窗---白色 

(影音圖片視窗---黑色)

影音圖片視窗---黑色

 範例語法如下:

/*影音圖片視窗---白色*/
#cboxOverlay { background: #eee !important; }
div.cbox_left, #colorbox, #colorboxVideo { background: #fff; box-shadow:0 0 0px #333; }
div.cbox_right.noScroll { box-shadow: 0 0 2px 2px rgba(7,7,7,0.07); }
div.cbox_right .cbox_plurk_main { box-shadow: 0 0px 0px 0px rgba(7,7,7,0.07); border-bottom: 1px solid #eee; }

/*回應列表*/
.cbox_right .cbox_response { background: #fff; border-color: #f1f2f3; }
.cbox_plurk.plurk.cboxAnchor { border-color: #f0f0f0; }
.cbox_plurk.plurk.cboxAnchor:hover { background: #f5f5f5; }
.cbox_right .cbox_response .cbox_plurk.current { border-left: 3px solid #69b; background: #eee; }
.cbox_right .cbox_response .cbox_plurk.withimage:hover,.cbox_right .cbox_response .cbox_plurk.withvideo:hover { border-left: 3px solid #ccc; }

/*快速回覆區*/
.cbox_right .quick_reply textarea { background: #fff; box-shadow: 0 -3px 1px -2px rgba(7,7,7,0.07); border-color: #ddd; color: #ccc !important; line-height: 1.4em; }
.cbox_right .quick_reply textarea:focus { color: #444 !important; }

/*隱藏廣告*/
div.cbox_ads
{
    display : none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden;_overflow: none;
    position: fixed;
    top: -9000px;
    filter: alpha(opacity=0) !important; opacity: 0 !important; zoom:1;
}

/*連結網址*/
div.imgUrl a
{
    background: rgba(255,255,255,0.6) !important;
    border-radius: 3px;
    opacity: 0.2; zoom: 1;
    font-size: 11px;
    letter-spacing: 0em;
    color: #67b !important;
}
div.imgUrl a:hover { opacity: 0.6; zoom: 1; color: #444 !important; }
#colorboxVideo .hideVideo, .hideVideo:hover { background: none !important; color: #67b !important; }

/*關閉符號*/
#colorbox #cboxClose, #colorboxVideo #cboxClose
{
    background: url(http://i614.photobucket.com/albums/tt230/m66660000/icon/icon1/16/cancel.png) !important;
    width: 16px; height: 16px;
    opacity: 0.6; zoom: 1;
}

/*文字*/
.cbox_right .cbox_plurk_main .content, .cbox_right .cbox_response .content { font-size: 1.01em; line-height: 1.7em; letter-spacing: 0.01em; }
div.content { color: #555; }
.cbox_right a { color: #67b !important; }

 

/*影音圖片視窗---黑色*/
#cboxOverlay { background: #111 !important; }
div.cbox_left, #colorbox, #colorboxVideo { background: #000; box-shadow:0 0 0px #333; }
div.cbox_right.noScroll { box-shadow: 0 0 2px 2px rgba(7,7,7,0.17); }
div.cbox_right .cbox_plurk_main { box-shadow: 0 3px 1px 0px rgba(7,7,7,0.07); border-bottom: 1px solid #211111; }

/*回應列表*/
.cbox_right .cbox_response { background: #000; border-color: #211111; }
.cbox_plurk.plurk.cboxAnchor { border-color: #221111; }
.cbox_plurk.plurk.cboxAnchor:hover { background: #001111; }
.cbox_right .cbox_response .cbox_plurk.current { border-left: 3px solid #69b; background: #111; }
.cbox_right .cbox_response .cbox_plurk.withimage:hover,.cbox_right .cbox_response .cbox_plurk.withvideo:hover { border-left: 3px solid #65c; }

/*快速回覆區*/
.cbox_right .quick_reply textarea { background: #000; box-shadow: 0 -3px 1px -2px rgba(7,7,7,0.07); border-color: #211111; color: #444 !important; line-height: 1.4em; }

/*隱藏廣告*/
div.cbox_ads
{
    display : none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden;_overflow: none;
    position: fixed;
    top: -9000px;
    filter: alpha(opacity=0) !important; opacity: 0 !important; zoom:1;
}

/*連結網址*/
div.imgUrl a
{
    background: rgba(255,255,255,0.6) !important;
    border-radius: 3px;
    opacity: 0.2; zoom: 1;
    font-size: 11px;
    letter-spacing: 0em;
    color: #67b !important;
}
div.imgUrl a:hover { opacity: 0.6; zoom: 1; color: #444 !important; }
#colorboxVideo .hideVideo, .hideVideo:hover { background: none !important; color: #67b !important; }

/*關閉符號*/
#colorbox #cboxClose, #colorboxVideo #cboxClose
{
    background: url(http://i614.photobucket.com/albums/tt230/m66660000/icon/icon1/16/cancel-inv.png) !important;
    width: 16px; height: 16px;
    opacity: 0.6; zoom: 1;
}

/*文字*/
.cbox_right .cbox_plurk_main .content, .cbox_right .cbox_response .content { font-size: 1.01em; line-height: 1.7em; letter-spacing: 0.01em; }
div.content { color: #555; }
.cbox_right a { color: #67b !important; }

 

可以對照看看兩者語法的不同處,或者套用其一然後自行修改其中的數值,了解相應改變的區域,進一步將噗浪顯示影音圖片的欄位改成自己最喜歡或最適用的模樣 ^ ^

如果想讓留言回應列表整體靠右對齊,讓瀏覽的視野全螢幕顯現,則可以再加上以下這段語法:

/*影音圖片修正---全螢幕留言靠右*/
div.cbox_right
{
    position: fixed !important;
    right: 0px !important;
    top: 0px !important;
    background: #fff !important;
}
#colorbox #cboxClose, #colorboxVideo #cboxClose
{
    position: fixed !important;
    right: 7px !important;
    top: 6px !important;
}
div.cbox_left, #colorbox, #colorboxVideo { background: none !important; }
div.cbox_ads { display : none !important; }

影音圖片修正---全螢幕留言靠右 

若使用黑色底,則將 div.cbox_right 項目中的 background 色碼改為#000 即可:

黑色全螢幕留言靠右  

 

不改變噗浪預設值,只套用 /*影音圖片修正---全螢幕留言靠右*/ 這段,則會呈現如圖示:

單加上全螢幕留言靠右  

 

那麼,並不需要新增的快速回覆功能,想隱藏該欄位呢? 就放上這行語法吧:

/*隱藏快速回覆欄位*/
.cbox_right .quick_reply textarea  { display : none !important; }

 

動手調整看看,找到適合你版面的方式,讓瀏覽噗浪的經驗變得更愉快吧~

 

補充可自訂css項目:

/*暱稱*/
.cbox_right .cbox_plurk_main .user *, .cbox_right .cbox_response .user * {}

/*語助詞*/
.cbox_right .cbox_plurk_main .user .qualifier,.cbox_right .cbox_response .user .qualifier {}

 

文章標籤
創作者介紹
M6

金羽銀華

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


留言列表 (40)

發表留言
  • 小紓
  • 謝謝你www 問題解決了
  • ^ ^

    M6 於 2012/11/10 21:23 回覆

  • Wun-Jyuan Jhang
  • 不好意思><
    我直接套用了「/*影音圖片視窗---黑色*/」的這個語法,
    顏色改了,可是卻依然有跑位的問題,請問要改哪裡呢ˊˋ
    http://i.imgur.com/6RQpi.png
    原圖→http://i.imgur.com/Z3Fe1.png
  • 檢查看看原本的語法中是否有使用到 .cbox_response { height ; } 相關高度設定的內容,要拿掉這個部分喔,因為多出一欄高度已經不同了~:)

    M6 於 2012/11/10 21:25 回覆

  • Soda小唯
  • 不好意思,我直接套用了隱藏廣告與圖片修正全螢幕靠右這兩個語法。

    因為,弄好卻發現,打開圖片影音是沒有廣告跑出來,但點開噗就會有看見廣告....不加隱藏廣告又會有廣告出現...(影音圖片典擊開來看後)

    在這之前也套用了網路上流傳的廣告消失語法,很正常的沒有廣告問題。

    請問這是這是出了什麼問題,要修改哪裡比較好呢?^^
  • 噗尾端的廣告是另個項目喔,這篇文章說明的是影音另開視窗後的語法內容。
    要隱藏噗尾端的廣告,語法是:
    div#resp_banner_ads.show { display : none !important; }

    M6 於 2012/11/11 10:45 回覆

  • Soda小唯
  • 謝謝告知~
    不過...貼上大大給我的語法後還是有廣告耶~"~
  • 咦?項目名稱是沒錯的,我使用後也的確會使廣告消失,可能是其他語法影響或是貼上的語法有誤?換成使用:
    div#resp_banner_ads.show { width: 0px; height: 0; }
    試試呢?
    再不行的話就要檢查整體語法內容了。

    M6 於 2012/11/11 14:11 回覆

  • Soda小唯
  • 還是有出現(苦笑)

    不過很感謝大大幫我想辦法解決^^ 看來我只好去檢查一下語法整體內容了ww
  • ^ ^

    M6 於 2012/11/11 17:01 回覆

  • Wun-Jyuan Jhang
  • 我直接把影音圖片的地方套用成「/*影音圖片視窗---白色*/」的,
    可是還是有跑位ˊAˋ
    對不起可以幫我看一下CSS需要修正的地方嗎ˊˋ
    CSS>>http://paste.plurk.com/show/1378023/
  • 把 /*調整高度*/ 段落中的 .plurk { margin-top:60px; }
    這行項目改成 #timeline_holder .plurk { margin-top:60px; }
    應該就可以了。

    M6 於 2012/11/12 22:17 回覆

  • Wun-Jyuan Jhang
  • 對了是圖片跑位哦,不是留言的部分><
    因為還是不知道要改哪裡
    麻煩大大了><
    謝謝!!!!
  • 回覆在上則詢問中囉,請試試看 ^ ^

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

  • Wun-Jyuan Jhang
  • 謝謝QQQQ
    成功解決了QWQQQ
    不好意思麻煩這麼多次lllOTL
  • 不會。解決了就好~耶~^w^

    M6 於 2012/11/13 21:06 回覆

  • Wun-Jyuan Jhang
  • 對不起我又來了QQ
    圖片的跑位解決了,
    可是浪上的噗全都都往上移了,
    東西都往上跑了 是要改哪裡呢ˊˋ
    呃我問題好多QQQQ
  • 咦?如果改成使用 #timeline_holder .plurk { margin-top:60px; } 這行語法浪上的噗應該不會往上跑才是?
    要不要檢查看看語法是否有誤,或是在後面加上 !important; 試試? 寫成 #timeline_holder .plurk { margin-top:60px !important; }

    M6 於 2012/11/13 21:22 回覆

  • n2130213
  • 不好意思借這串問一下
    http://i.imgur.com/7r0Ha.png
    如這張圖,有一些靠近底部的噗,當內文比較長的時候
    消音那些選項就會被擋掉
    不知道這個問題該從哪裡修改,困擾我一陣子了

  • /*-----所有訊息功能列位置調整-----*/

    #filter_tab
    {
    z-index:700;
    }

    這裡的數值,700改成501或其他不會擋住的數值試試看?

    M6 於 2012/11/13 21:18 回覆

  • n2130213
  • 沒有用耶,還是會擋到(汗
    我有設到更小的數字,不過沒有效
  • 那可能要試試看調整版面排版的其他部分了~如果找到解法會再回覆喔 ^ ^

    M6 於 2012/11/13 22:38 回覆

  • n2130213
  • 只好先這樣了,不好意思麻煩你了
    謝謝~
  • 時間軸靠近底部會擋住噗的問題,找找看語法中是否有 #timeline_holder {position: relative !important;} 這行,把它刪去就可以了。

    M6 於 2012/11/22 13:02 回覆

  • Wun-Jyuan Jhang
  • 好像沒效QQQ
    沒關係就先這樣好了ˊˋ
    謝謝大大哦><
  • :)

    M6 於 2012/11/14 20:37 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Agemini Shuang
  • 您好...金羽銀華大大...
    之前我用你白色的語法去改的...
    我不知道怎麼樣改我都只要圖片需要縮放...
    我的留言視窗上方就會變成黑色...
    因為我想要的感覺是留言部分是白色
    影音視窗那部分是黑色(因為看得比較清楚)
    出錯部分
    http://i.imgur.com/hsegj.png
    語法
    http://paste.plurk.com/show/1386813/
  • 把 #colorbox, #colorboxVideo 這兩項目的背景設為白色試試看?

    M6 於 2012/11/19 20:07 回覆

  • Agemini Shuang
  • 可以是可以QQ...
    可是這樣的話影音視窗部分就變成白色了...
    不是我想要的黑色
  • 那換個項目,在 div.cbox_right .cbox_plurk_main { } 項目裡加上 background: #fff !important; border-color: #f0f0f0 !important;

    M6 於 2012/11/19 21:23 回覆

  • Agemini Shuang
  • 哦哦!!正常了!!謝謝QQ!!
  • ^ ^

    M6 於 2012/11/21 20:58 回覆

  • n2130213
  • 感謝!!
    #timeline_holder {position: relative !important;}刪掉之後就解決了!!
  • :D

    M6 於 2012/11/23 20:23 回覆

  • 悄悄話
  • 悄悄話
  • 桐島
  • 我想請問噗浪點選圖片時跳出來的視窗為什麼會一閃而過然後變成此訊息的視窗?是長圖片會短圖片不會.然後之前那個佈景主題沒問題換到另一個佈景就變這樣了.請問你知道這是什麼語法問題嗎?謝謝
  • 要看版型的語法內容才知道ㄛ

    M6 於 2012/12/08 09:47 回覆

  • 靖 靖
  • 請問我的圖片點開後,圖片會往上跑
    如圖:http://i.imgur.com/VuwZH.jpg
    我的CSS裡沒有關於圖片的語法,請問這個該如何解決?
  • 要看css語法內容才知道喔,你可以發私噗給我,或是留下你的噗浪網址,我過去幫你看。
    我的噗浪: http://www.plurk.com/66660000

    M6 於 2013/01/17 21:14 回覆

  • Shihoin Yoruichi
  • 你好,我點開圖片後,圖片會往上移,有一條白線似的。
    附圖 :http://i.imgur.com/pEt9xRB.png
    請問有什麼解決方法?
    CSS:http://www.plurk.com/Users/getCustomCss?user_id=8382931
    Plurk: tsz19
    麻煩你了,謝謝 !
  • .plurk {margin-top:11px;} /*浪上的噗往下移*/

    把這行項目前面加上 #timeline_holder 試試?#timeline_holder .plurk {margin-top:11px;} 這樣。

    M6 於 2013/02/02 09:43 回覆

  • sky11235
  • 你好,我是使用白色的語法,可是我希望後面(原本的河道那邊)是黑色的,需要修改哪裡呢? 若不想要純黑,希望有透明是需要修改哪裡??
  • sky11235
  • 抱歉!!請忽略上面那一個留言!! 我想換個說法,我直接用黑色的語法,但是右邊的回應部分要怎麼改成白色的?
  • 就把 /*回應列表*/ 跟 /*快速回覆區*/ 兩個段落置換成白色的就好囉。

    M6 於 2013/06/23 18:16 回覆

  • ♥嘻嘻
  • 你好` 我套用了 影音圖片修正---全螢幕留言靠右 的語法
    比較長的圖片右邊的 快速留言 不見了 請問該如何修改 ˊ ˋ
    http://imageshack.us/a/img594/3544/uu32.jpg
  • 加上這行試試看?
    .cbox_right .cbox_response { min-height: 500px !important; }

    M6 於 2013/07/24 17:52 回覆

  • ♥嘻嘻
  • 好像是原噗太長 把 快速留言擠下去(?)了
  • ♥嘻嘻
  • 嗚呼呼` 我弄好了 ˊ ˇ ˋ
    謝謝你 > <
  • ^ ^

    M6 於 2013/07/25 09:21 回覆

  • 悄悄話
  • 悄悄話
  • 迪西
  • 不好意思打擾了>< 想請問一下
    我已經把語法貼到CSS上了 但還是沒有旁邊的對話欄qwq
    用了好久最後還是來詢問、不好意思麻煩了><
    這是我的版型:
    http://www.flickr.com/photos/m66660000/8205830316/in/pool-plurkcss
  • 把語法放到所有語法最後試試看,
    也可以直接刪去原本語法中 /*修正*/ 這整段,
    就會恢復預設值。

    M6 於 2014/01/05 18:09 回覆

  • 迪西
  • 不好意思我又來打擾了><
    遵照你上次的方式把修正那段刪掉,卻變成旁邊一片白白qq
    這樣: http://i.imgur.com/5yhkYL6.png
    請問還有什麼方式能補救嗎TQT
  • 可能只刪除了部分語法,請檢查看看是否是整段都刪除了喔。
    如果不清楚語法內容,可以發私噗給我,我再幫你看看哪裡有誤。
    我的噗浪:http://www.plurk.com/66660000

    M6 於 2014/01/18 22:57 回覆

  • �S�S
  • 還有游標移去河道上的噗的時候
    時間軸那邊就會顯示 X月X日-X:Xam(pm) 那個背景顏色要怎麼去掉呢?
    只要顯示月日時間就好

    不好意思麻煩了~
  • 語法:
    .evening,.night, .day,.morning
    {
    background: none !important;
    border: 0 !important;
    }

    M6 於 2014/02/10 12:24 回覆

  • 阿陸 奈米
  • 不好意思我想請問一下
    http://i.imgur.com/0alWcjt.png
    會甚麼會變成這樣QQ 圖片跑位 而且回應間距過大
  • 找找看是否有這行語法:
    .plurk {margin-top: px;} /*浪上的噗往下移*/

    若有,在語法前面加上 #timeline_holder 試試?改寫成:
    #timeline_holder .plurk {margin-top: px;} 這樣。

    M6 於 2014/03/30 12:47 回覆

找更多相關文章與討論