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

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

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

文章標籤
創作者介紹
創作者 M6 的頭像
M6

金羽銀華

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


留言列表 (15)

發表留言
  • qccxy
  • 您好~
    請問之前用"留言靠右"這個語法的該如何修正呢?
    謝謝!!
  • 替換成這段語法:
    /*圖片閱覽修正-留言靠右*/
    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;
    }
    div.cbox_left { background: none !important; }
    #cboxOverlay { background: #111 !important; }

    M6 於 2012/09/28 21:23 回覆

  • 悄悄話
  • 悄悄話
  • R.B.
  • 請問一下,我把影音圖片的語法改成本篇文中教的設定之後點開一些長度比較長的圖片它就會跳掉,畫面變成這個樣子(下圖),要調整哪個部份才能正常的顯示圖片呢? 謝謝! ˊAˋ
    http://images.plurk.com/7kBf09zqwrfybRBjaxmdcQ.jpg
  • 語法中第一行有新增項目:
    div#cbox_right, div.cbox_right.noScroll, div.cbox_right { display : none ; }

    將 div.cbox_right 隱藏起來應該就可以了。

    M6 於 2012/11/08 12:31 回覆

  • ショウ ナ
  • 請問,我的CSS是從這裡的版型再做修改的,但是我沒有修改圖片點開的模式,原本都是正常的,但是前幾天新增"快速回覆"之後,點開圖片或影片都會變成下圖,請問我該怎麼辦,謝謝><
    http://i.imgur.com/K3uqD.png
  • 沒有修改圖片點閱方式?
    那檢查看看是否有高度的設定?把有關/有出現
    .cbox_response { height: ; }
    回應列表高度設定這行刪去就可以了。

    M6 於 2012/11/09 21:16 回覆

  • Wun-Jyuan Jhang
  • 你好><
    我照著本文中的教學增加了這一項:
    div#cbox_right, div.cbox_right.noScroll, div.cbox_right { display : none ; }
    圖片變回跟以前一樣,但是變成沒有字了,請問該怎麼修改呢?
    http://i.imgur.com/fa6zf.png
  • 所以是希望保留圖片預設顯現方式,有留言欄位?
    加上 div#cbox_right, div.cbox_right.noScroll, div.cbox_right { display : none ; } 這行的應用是針對原先有使用修改影音圖片顯現方式的語法作調整喔。

    M6 於 2012/11/09 21:21 回覆

  • 文 李
  • 請問一下,快速留言被擠到快看不見得話(紅線處)該如何解決?
    https://docs.google.com/file/d/0B7DqgB6vLxS6M2kwZThqdGYyLW8/edit

    ps.我用的噗浪板型是 SOLOWIND@
  • 把語法中 /*---------------噗浪*/ 裡的這行

    .plurk { margin-top: 15px; }

    項目內容改成
    #timeline_holder .plurk { margin-top: 15px; }

    這樣就可以了。

    M6 於 2012/11/12 00:05 回覆

  • 文 李
  • 改好了!謝謝!
    那再問個問題,我不想滑鼠移上去某一噗的時候該噗變成半透明,請問我要怎麼改?
    不好意思麻煩你了>"<
  • 刪去 /*噗外框*/ 中的這行:
    .plurk_cnt:hover { opacity: 0.7 !important; zoom: 1; }

    M6 於 2012/11/12 09:16 回覆

  • 美智
  • 你好,如果將這個修正改回噗浪提供的版本,該怎麼改呢?
    前提是,已經將/*修正*/這個部份改成第一個的語法了。
  • 改回預設值?那就直接把修正部分的語法刪除就可以囉。

    M6 於 2012/11/29 21:33 回覆

  • 風翎
  • 我跟ショウ ナ 有一樣的問題...
    可是我找不到有.cbox_response { height: ; }這一行...

    http://www.plurk.com/s89110 這是我的噗...
    可否幫忙看看
    謝謝
  • 在 /*調整高度*/ 那段,將這行:
    .plurk { margin-top:180px; }
    改成 #timeline_holder .plurk { margin-top:180px; }
    即可。

    M6 於 2013/05/30 10:42 回覆

  • 風翎
  • 謝謝你幫我看
    但我改了之後版面有點怪
    因為我的發噗區是在上方所以...
    請問還有別的方法嗎??
    抱歉一直問
  • 用 .cbox_plurk.plurk {margin-top:22px!important;} 放在語法後面試試看?
    照理說加上 #timeline_holder 在 .plurk 前面後應該是可以的喔,時間軸的噗還是會保持距上方180px才是。

    M6 於 2013/06/01 11:45 回覆

  • 風翎
  • 可是我把#timeline_holder加上去後
    噗整個網上移耶
    因為跟發噗區重疊所以很多噗不能點
    0_0??
  • 風翎
  • 不過已經可以了
    真的很感謝你
  • ^^

    M6 於 2013/06/02 07:54 回覆

  • a Willi
  • 請問一下 最新噗浪最新改版後又跑出快速回復攔位了 要怎麼刪掉呢?
  • 目前這部分自訂佈景功能已失效喔。詳細情況請參見此文:
    http://m66660000.pixnet.net/blog/post/43557262

    M6 於 2014/06/15 12:21 回覆