1/13 更新CSS:有时间戳记，字体描边更清晰 http://pastebin.com/QQg5M5r5 有图有真相: http://i.imgur.com/fBqGpU1.png 1/13 目前有两个人回报装上CLR套件之後OBS会无法启动， 解法为安装 Microsoft .NET Framework 4.5 http://goo.gl/CMNjh (这东西其实好像不是必要的，我自己没有装，) 但是目前有三个人装了之後解决问题) 1/12 更新CSS:有时间戳记 http://pastebin.com/s1xGAVbE 1/12 更新CSS:无时间戳记 http://pastebin.com/JMWSxbtH 1/09 修正:去除聊天室右边的白线 好读版 http://disp.cc/b/27-79uz 首先，有图有真相。http://i.imgur.com/JZ5GKsm.png 由於最近Twitch加长了延迟时间，有一些Twitch实况主开始尝试移动到Hitbox上 进行实况。然而，Hitbox的聊天室并不是用IRC协议，所以以往我们在Twitch/Justin 可以处理的自订聊天室没办法用在Hitbox上。直觉上我们可以去撷取聊天室，甚至对 他去背景，但是这不是一个好方法。网页聊天室的字型和大小都绑在浏览器里面，要 调整的话，牵一发动全身，平常看的其他东西也会一起改变；不调整的话，小小的字 型经过H264压缩之後就糊成一团。 由於听到不少人反应没IRC的痛苦，所以就花了些时间来研究心仪已久的CLR套件 ，这东西就是在你的OBS里面装好一整个浏览器！这实在是太豪迈了...这个套件一开 始出来的时候大家想到的用途是让OBS可以支援Flash，不过後来BetterTTV的作者 Night架好了用他截取Twitch官方聊天室的方法。我的直觉是，同一套玩法也可以拿 来截取Hitbox聊天室；直接用正确大小的CLR浏览器打开Hitbox的Popout聊天室，同 时利用自订CSS的功能来更改版面还有字型的样式，如此一来，Hitbox实况主也能够 在OBS中适当的安排聊天室的版面。 -------- 安装 Faruton's CLR Browser Source Plugin (出处 http://goo.gl/EfpacV ) 本文撰写时，当前核心版本：Chromium 31.0.1621.0 请依照你使用的OBS版本来下载。 (打不开7z的话，请下载免费的7-zip http://www.7-zip.org/ ) (64bit) http://goo.gl/A5qWrN (32bit) http://goo.gl/KsoQD1 将档案解压缩到OBS路径下的plugins资料夹中，然後打开OBS，安装完成。 如果装上套件，打开OBS就Crash掉─请装.NET Framework4.5 http://goo.gl/CMNjh (这东西好像不是必要的，我自己没有装，) (但是目前有三个人装了之後解决问题。) -------- 使用 http://i.imgur.com/a0ZL6J7.png 安装完成之後，在OBS里面的"来源"区域，点选右键，选择"CLR Browser"， 取一个好认的名字，然後进入设定。 General (一般) http://i.imgur.com/QR9P4Kf.png 要注意的点只有三个： (1) URL输入popout聊天室的位址， 例如如果是我(append)的聊天室， URL就是 http://www.hitbox.tv/embedchat/append 请把它改成你想看到的聊天室的ID。 (2) Dimensions可以让你设定这整个浏览器的尺寸， 请选个你喜欢的，而且合适的大小； 例如我通常会把基本解析度设定在960x540， 而我玩的游戏大多是4:3的，会占720x540， 这样就可以让聊天室占满剩下的空间 240x540 於是，Width(宽度)填上240，Height(高度)填上540。 (3) Opacity "不透明度" 请直接把他推到最右边。这个东西是"整个浏览器的不透明度"， 如果哪天你想让字也一起变的半透明再来考虑调整这个。 CSS http://i.imgur.com/w75dr1y.png 这里就是重点啦。自订CSS的功能可以更改版面还有字型的样式。 总之我们可以复制贴上，然後安心按下确定。 CSS码请看这里 http://pastebin.com/JMWSxbtH ================ ╭─────── 看不懂就算了的框框 ─── 我会复制贴上我超强 ──────╮ │ │ │ 这边仍然对细节稍做解释。 │ │ │ │ body { │ │ background-color: rgba(0,0,0,0.5) !important; │ │ /*这是背景颜色，rgba(红,绿,蓝,透明度) */ │ │ /*RGB可以分别从0~255，如果不清楚的话就打开小画家查*/ │ │ /*透明度: 0是完全透明，1是完全不透明。 */ │ │ /*所以像例子中的0.5就是用半透明的黑底。 */ │ │ } │ │ │ │ /*想要改字型大小颜色的可以注意这部分/* │ │ .chatBody li, .chatBody li.admin, .chatBody li.user, .chatBody .name{ │ │ font-size: 24px !important; /*文字大小*/ │ │ font-family: 微软正黑体 !important; /*文字字型*/ │ │ font-weight: 900 !important; /*文字粗细，900最粗，100最细*/ │ │ line-height: 1.05em !important; /*聊天室文字行高*/ │ │ padding: .05em .05em !important; /*与前後段距离*/ │ │ /*这边使用的单位em就是行高，会自动跟着fontsize变化*/ │ │ } │ │ │ │ .chatBody li, .chatBody li.admin, .chatBody li.user { │ │ color: white; /*聊天室文字颜色*/ │ │ /*如果想自订颜色也可以用 */ │ │ /*color: rgb(255,255,0) 像这样就是黄色 */ │ │ background-color: transparent !important; │ │ /*聊天室admin和mod的背景，设定为透明避免干扰*/ │ │ } │ │ /*其他以下原则上都不用动*/ │ │ │ │ ╰─────── 看不懂就算了的框框 ─── 我会复制贴上我超强 ──────╯ 效果在最上面看过了，不过我们这边提供三种透明度的版本。 rgba(0,0,0,0) 完全透明 http://i.imgur.com/RTVhQAq.png rgba(0,0,0,0.5) 半透明 http://i.imgur.com/D87Lj1w.png rgba(0,0,0,1) 完全不透明 http://i.imgur.com/Tkl0PHF.png -------- 结语 Hitbox聊天室...嘛，作为一个十月才刚成立的平台来说，三天两头发生一些bug 好像没办法怪他太多。事实上从他们的Twitter可以知道他们正在写新版的聊天室， 所以上面这个CSS很可能会在他们更新聊天室的时候就失效了。然而，要用的套件仍 然是同一个CLR浏览器套件，所以如果新版的聊天室上线了，我会试着尽快释出新版 的CSS来复制贴上。 其实这是我生平第一次写CSS，我毕竟不是做这行的，从来没学过，所以有点难 上手。...如果有哪个地方写得不好或是根本不对的，也请指正。当然，如果哪边写 的不够清楚，或是哪边执行上有问题的，或是Hitbox突然很神速的更新聊天室所以 不能用了，也都请顺便回报，让我对这篇文章做进一步的修正。 Append. 2014.01.09. 00:18 a.m. UTC(+0) -- ███◣ ◢██◣ ◢██◣ █ ◢█ ◣ ◢ ◢██◣ ◣ █ █ ██ █ ██ █ ██ █◢█◤ █◣◢█ █ ██ █◣ █ █ ██ █ ██ █ ██◤ ████ █ ██ ██◣█ @ ptt.cc ███◤ █ ██ █ ██◣ █◥◤█ ████ ████ █◥█◣ █ ██ █ ██ █◥█◣ █ █ █ ██ █◥██ 鸦片(Append) █ ◥█ ◥██◤ ◥██◤ █ ◥█ █ █ █ ██ █ ◥█twitch.tv/append --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 176.251.120.12 ※ 编辑: Append 来自: 176.251.120.12 (01/09 08:31) ※ 编辑: Append 来自: 176.251.120.12 (01/09 18:17) ※ 编辑: Append 来自: 176.251.120.12 (01/09 20:39) ***1/12更新*** 时间戳记版CSS http://pastebin.com/s1xGAVbE ※ 编辑: Append 来自: 176.251.120.12 (01/10 01:07) ※ 编辑: Append 来自: 176.251.120.12 (01/13 03:12) ※ 编辑: Append 来自: 176.251.120.12 (01/13 03:27) ※ 编辑: Append 来自: 176.251.120.12 (01/14 01:34) ※ 编辑: Append 来自: 176.251.120.12 (01/14 01:38) ※ 编辑: Append (90.201.30.4), 06/19/2014 20:29:34