因應今日噗浪的改版,之前發過的 圖片顯示修正方式 需要再次修正項目內容,就新發了此文。

這次的變動主要是預設的 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 此項即可。

arrow
arrow
    文章標籤
    plurkcss
    全站熱搜

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