金羽銀華

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

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

對於新增改版後的留言顯示方式，想要美化它更符合自己的使用習慣與風格，我們可以用自訂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 {}