因應今日噗浪的改版,之前發過的 圖片顯示修正方式 需要再次修正項目內容,就新發了此文。
這次的變動主要是預設的 css 項目名稱更動了,然後,噗浪將點選影片後出現的播放視窗也改成跟圖片一樣,變成回應列表在右的形式。
未修正前的圖片及影片顯示範例:
貼上修正語法後:
語法:
/*影音圖片顯示修正*/
div#cbox_right, div.cbox_right.noScroll, div.cbox_right { display : none ; }
#cboxOverlay, #colorbox, #colorboxVideo { background: none !important; box-shadow:0 0 0px #333; }
div.cbox_left
{
background:url(http://statics.plurk.com/b0cd5a5dc070c705ebf8814a909802c3.gif) no-repeat center center #333;
padding: 0px;
border: 1px solid #eee;
border-radius: 0px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.03);
margin-left: 160px !important;
}
#colorbox #cboxClose, #colorboxVideo #cboxClose
{
right: 150px !important;
top: 4px !important;
}
div.imgUrl a
{
left: 160px !important;
top: 3px !important;
opacity: 0.2; zoom: 1;
font-size: 10px;
letter-spacing: 0em !important;
}
div.imgUrl a:hover { opacity: 0.6; zoom: 1; }
#colorboxVideo .hideVideo, .hideVideo:hover { background: none !important; color: #fff !important; }
也可以用另一種方式呈現,保留全螢幕黑底的遮罩,讓影片圖片置中顯示,如圖:
語法:
/*影音圖片顯示修正-黑屏置中*/
div#cbox_right, div.cbox_right.noScroll, div.cbox_right { display : none ; }
#cboxOverlay, #colorbox, #colorboxVideo { background: none !important; box-shadow:0 0 0px #333; }
#cboxOverlay { background: #000 !important; }
#colorboxVideo .hideVideo, .hideVideo:hover { background: none !important; color: #fff !important; }
div.cbox_left { background: none !important; margin-left: 160px !important; }
#colorbox #cboxClose, #colorboxVideo #cboxClose
{
position: fixed !important;
right: 5px !important;
top: 4px !important;
}
div.imgUrl { margin: 0 auto !important; }
div.imgUrl a
{
left: 160px !important;
top: 3px !important;
opacity: 0.2; zoom: 1;
font-size: 10px;
letter-spacing: 0em !important;
}
div.imgUrl a:hover { opacity: 0.6; zoom: 1; }
能調整自訂外觀與顯示方式,一直是噗浪的特點,這次改版後回應數較多的噗點開後仍會頓頓的,無法順利閱讀,且亦無放上可直接輸入的回應欄位,希望能看見更好的改變,在此之前,就用自訂語法來調整適合自己的顯示方式吧~ ^ ^
*2012/11/8 噗浪已有新增快速回覆的欄位與功能,如果因多出此欄導致版面跑位,請更新語法中的第一行:div#cbox_right, div.cbox_right.noScroll, div.cbox_right { display : none ; }
也就是在原語法中加上 div.cbox_right 此項即可。
留言列表