[ plurk css ] 圖片顯示的修正 @ 金羽銀華

前陣子噗浪改了原本點圖呈現的方式，將原本圖片直接置中展開的框架，改成類似G+或FB的點圖同時出現留言的形式。由於目前尚未能有留言回覆的功能（據說下一版會推出），且留言數過多的話會影響整體瀏覽流暢感與反應速度，讓習慣簡潔看圖的噗友，感到界面過於複雜與不便，所以反應不是很好。而優點則是同時有多張圖的噗可在同個框架中點選閱覽不用跳出。

如同噗浪其他版面區塊，點圖的視窗，我們也可以用自訂css語法來自己彈性打造合適使用的界面。

原本改版後，點圖會出現的方式：

原本未修正前

會有一黑底遮住原本噗浪的網頁，然後左邊是圖，右邊則是留言。

可以使用自訂語法，修正成近似原先單純顯示圖片的樣式：

原本顯圖

語法：

/*修正為類似原先顯圖方式*/
#cbox_ads { display : none !important; }
div#cbox_right { display : none ; }
#cboxOverlay { background: none !important; }
#cbox_left
{
   background: url(http://statics.plurk.com/577ea8acd3e7ade25d3a23345f4d70d8.png);
   padding: 0px;
   border: 1px solid #bbb;
   margin-left: 160px !important;
}
#colorbox
{
   background: none !important;
   box-shadow:0 0 0px #333 !important;
}
#colorbox #cboxClose
{
   right: 150px !important;
   top: 4px !important;
}
#cbox_left #imgUrl a
{
   left: 160px !important;
   top: 3px !important;
   background: rgba(0,0,0,0.7);
   border-radius: 2px;
   opacity: 0.2; zoom: 1;
   font-size: 0.8em;
}

如果喜歡改版後黑屏的效果，也可以修改成背景底保留黑屏而圖片置中的方式：

黑屏置中

這樣可以更聚焦在圖片本身。語法：

/*圖片閱覽修正-黑屏置中*/
div#cbox_right { display : none ; }
#cboxOverlay { background: #000 !important; }
#cbox_left { background: none !important; margin-left: 160px !important; }
#colorbox
{
   background: none !important;
   box-shadow:0 0 0px #333 !important;
}
#colorbox #cboxClose
{
   position: fixed !important;
   right: 5px !important;
   top: 4px !important;
}
#cbox_left #imgUrl { margin: 0 auto !important; }
#cbox_left #imgUrl a
{
   left: 160px !important;
   top: 3px !important;
   background: rgba(0,0,0,0.7);
   border-radius: 2px;
   opacity: 0.2; zoom: 1;
   font-size: 0.8em;
}
#cbox_left #imgUrl a:hover { opacity: 0.6; zoom: 1; }

覺得改版後可看留言並點多圖很方便，但希望能有“全螢幕”的視野，不希望像FB一樣將圖與留言一起擠在中間的話，也可以進階調整成整個頁面的框架形式：

留言靠右

語法：

/*圖片閱覽修正-留言靠右*/
div#cbox_right
{
   position: fixed !important;
   right: 0px !important;
   top: 0px !important;
   background: rgba(255,255,255,1) !important;
}
#colorbox #cboxClose
{
   position: fixed !important;
   right: 7px !important;
   top: 6px !important;
}
#cbox_left { background: none !important; }
#cboxOverlay { background: #111 !important; }

/*去文字框陰影效果*/
#colorbox { background: none; box-shadow: 0 0 0px #333; }
#cbox_right #cbox_plurk { box-shadow: 0 0px 0px 0px rgba(0,0,0,0.25); }
#cbox_right.noScroll { box-shadow: 0 0 0px black; }

/*調整行距*/
#cbox_right #cbox_plurk .user, #cbox_right #cbox_response .user,
#cbox_right #cbox_plurk .user .qualifier, #cbox_right #cbox_response .user .qualifier,
#cbox_right #cbox_plurk .content, #cbox_right #cbox_response .content
{ line-height: 1.6em !important; }

/*去廣告*/
#cbox_ads { display : none !important; }