登入 Piko Live
提示:登入PikoLive後,即可追隨以下所有的直播平台。
TwitchYoutubeStreamup
LiveHouseUstream
快捷列表

聊天室去背

直播聊天室視窗變透明,彈出視窗完整教學

  1. OBS外掛直接使用聊天室去背 (資料來源:雷神小喵喵)
  2. 使用Chrome or Firefox更改CSS

【方法一】OBS外掛直接使用聊天室去背(資料來源:雷神小喵喵) 

很多人會想要,實況結束剪精華時,能跟其他實況主一樣有聊天室可以看 
由於本人智商不高,剛開始用這個的時候非常的困擾 (?)
所以我做此教學文,把每個步驟都非常仔細的用出來
希望各位給予鼓勵,下次有新玩意兒 再用教學文給大家使用

 

首先呢~ 我們先到這個網頁 
http://www.nightdev.com/obschat/
 按下INSTALL

  1. 1.jpg
     
  2. 沒有下載安裝OBS者請下載安裝~Download 新版本不穩定,皮克先提供舊的穩定版本給大家使用。使用0.657B以前版本者(點擊下載) 
    2.jpg
     
  3. 打上自己實況帳號 在 Username

    3.jpg
     
  4. OK 到這個步驟 我們先暫停一下 保留此網頁
    4.jpg
     
  5. 使用0.657B以前的版本者必須操作此步驟,非0.657B以前版本忽略此步驟
    再來 尋找你的OBS~ 再把剛剛下載的東西 (下面說明)
 安裝到 OBS 的 plugins
    路徑:C:\xxxx\OBS\plugins\CLRHostPlugin)


  6. 下載壓縮檔打開 把這兩個臭東西丟進去


    
會變成


    你的OBS就可以重新打開
CLR Browser 就出現囉



    【所有版本者需操作】
    再來設定CLR Browser

拉回去第三步驟
    1. 把Hosted URL 的網址貼上 URL

    2. Width 450 , Height 600 (可以自行設定大小)

    3. 旁邊那個是透明度 100% 即可 (可以自行設定透明度)
  7. 複製下面的CSS貼上
     

===================虛線以下複製貼上=======================



::-webkit-scrollbar {
    visibility: hidden;
}

body {
    background-color: rgba(0,0,0,0.0) !important; /*背景,rgba(紅,藍,綠,透明度:0為完全透明)*/
    margin: 0px auto;
}

.chat_line {
    font-size: 19px !important; /*聊天室文字大小*/
    font-family: 微軟正黑體 !important; /*聊天室文字字型*/
    font-weight: 900 !important; /*聊天室文字粗細,900為最粗*/
    line-height: 1.30em !important; /*聊天室文字行高,1.30倍行高*/
    padding: .05em .05em !important; /*聊天室文字與前後段距離,0.05倍行高*/
}

.chat_line .nick {
    font-weight: bold;
    text-transform: capitalize;
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /*聊天室 ID 邊框顏色,可以把這段移除不加邊框*/
}

.chat_line .message {
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /*聊天室文字邊框顏色,可以把這段移除不加邊框*/
}



===================虛線以上複製貼上======================= 以上作者:雷神小喵喵 

 

 


 

 

 

 

【方法二】使用Chrome or Firefox更改CSS

 

 

  • 直播主有時後會把聊天室加入自己的直播畫面,但是怎麼樣做到「透明化」呢?
    接下來我們使用Chrome 以及 Firefox兩個瀏覽器來做教學!
    (我們不建議使用IE的瀏覽器,所以沒有做IE的教學!)
    注意!以下的方法目前只適用Twitch的直播主。Justin的直播主的教學會陸續補上
    (2014/03/31更新,對應新版Twitch聊天室)

【Chrome瀏覽器】

  1. 首先先開啟皮克的「彈出」聊天室,接著在聊天室中,按下鍵盤上面的F12
  2. 這時候會看到有一個新的視窗跳出來,注意是否切換到「Elements」這個分頁
  3. 接著我們在新視窗中,按下Ctrl + F,會看到下面多了一個搜尋列
  4. 在搜尋列中輸入「chat-message」,並且按下Enter
    你會發現有一個黃色的亮標出現了
  5. 接著我們點選那一行,會發現整行變成「藍色」
  6. 這時候在右手邊overflow-y的下面空白處輕點一下,會出現一個輸入框
  7. 在這個輸入框輸入「background」
  8. 剛輸入好之後,按下「Tab鍵」,你會發現它跳到下一格
  9. 這時我們輸入「red」,會發現右手邊的視窗改變顏色了
  10. 這時候我們可以透過直接選取顏色來改變顏色
  11. 通常我們選黑色
  12. 下一步我們要改文字顏色,這時候搜尋「chat-line」
  13. 點選這行之後,會發現右手邊多了一個「color」可以選擇顏色
  14. 一般來說文字會選「白色」當然你也可以選你喜歡的顏色
  15. 這樣Chrome的設定就完成摟

【Firefox瀏覽器】

  1. Firefox瀏覽器我們要借助一個外掛工具「Firebug」
    先在瀏覽器按下Alt鍵
    找到「工具」->「附加元件」
  2. 接著我們在搜尋列輸入「firebug」,找到之後按下「安裝」
  3. 安裝完畢之後,必須要把整個Firefox關掉再重開。
  4. 重開之後,我們看到右上角,會有一支昆蟲的圖案,並且是灰色的
  5. 此時打開皮克直播的彈出聊天室,並且按下Firebug的圖示
  6. 按下圖示之後,會發現下面多了新的視窗
  7. 我們先把整個畫面拉大一點,好方便我們作業
  8. 接著我們在輸入筐輸入「chat-message」
    此時會找到一個,並且標示灰色
  9. 接著點選這行前面的「div」,會發現整行會被圈起來並且變成「藍色」
  10. 點選width下面的空白處(雙擊),會變成一個輸入框
  11. 這時我們輸入「background」
  12. 輸入好按下「Tab鍵」會跳到下一格
  13. 這時我們輸入「black」會發現上面的視窗背景改變了
  14. 接著我們繼續搜尋「chat-line」,一樣會找到一個,並且是灰色的
  15. 點選前面的「div」,直到整行變成藍色
  16. 接著看到右手邊,點選color隔壁的#323232,將值改為#ffffff
  17. 這時候聊天室的字就會變成白色的了
  18. 弄好了就可以把Firebug關掉了
  19. 最後再把聊天室調整成我們要的大小,就完成了!

【xSplite設定】

  1. 首先點選Add,加入一個screen region
  2. 接著框選聊天室的範圍
  3. 在剛剛新增的Screen region按右鍵,會出現一個視窗
  4. 點選「Color Key」,並且把右邊的紅、綠、藍都設為0,聊天室就會透明了!

【OBS設定】

  1. 先在來源的地方,新增一個「擷取視窗」
  2. 名稱我們就先叫做「聊天室」
  3. 先在視窗那裡選擇彈出的聊天室
    接著打勾「區域」,再按下「選擇區域」
  4. 接著移動框框,直到框住你想要的位置
    要注意透明的那個白框邊邊才可以調整大小
  5. 然後打勾「使用色碼」,連點兩下圖中的那個區塊,然後選擇「黑色」的色彩
  6. 按下確定之後,你就會發現聊天室變成透明的了!

 




以上如果有疑問的話,可以前往「皮克直播實況研究社」裡面留言討論,我們會盡快回覆您