CSS: http://pastebin.com/yPeJpU10 好读版 http://disp.cc/b/27-80j4 首先，有图有真相。http://i.imgur.com/UK8FlgK.png (前情提要: #1IpUhrAc ) 由於最近Twitch再次都更，又有一些Twitch实况主开始尝试移动到Hitbox平台来 进行实况。在今年一月初的时候，我曾经为了在OBS中嵌入Hitbox聊天室而写过一个 CSS范本，达到调整字形、加上边框与去背景的效果；然而好景不常，Hitbox也都更 了，虽然聊天室多了许多功能，不过旧的CSS也失去了效果。因此，趁假日有空的时 候，参考了一些menjyoumayu在#1JntKwsu调整的内容，重新修正了一次，同时加上一 些注解方便调整。 为何不使用网页聊天室呢？直觉上我们可以去撷取聊天室，甚至对他去背景，但 是这并不是个好方法。网页聊天室的字型和大小都绑在浏览器里面，要调整的话，牵 一发动全身，平常看的其他东西也会一起改变；不调整的话，小小的字型经过H264压 缩之後就糊成一团。一种理想的方式是透过Stylebot之类的CSS修改套件来更动网页 聊天室的版面，事实上可以达到和这一篇几乎相同的效果。 我所采用的这一套方法源自於OBSChat。( http://www.nightdev.com/obschat/ ) 他用正确大小的CLR浏览器打开跳出的聊天室，利用自订CSS的功能来更改版面和字形 样式。同一套方法理所当然也可以套用在Hitbox上，差别只有在CSS修改的内容不同 而已。 -------- 安装 (如果曾经用过OBSChat，这里使用的CLR Browser完全一样，可以直接跳过。) 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/IY5jvs (32bit) http://goo.gl/oV931w 将档案解压缩到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/wHAAH9R.png 这里就是重点啦。自订CSS的功能可以更改版面还有字型的样式。 总之我们可以复制贴上，然後安心按下确定。 CSS码请看这里 http://pastebin.com/yPeJpU10 ================ ╭───── 看不懂就算了的框框 ───总之去复制上面的CSS就对了 ─────╮ │ │ │ │ │ 这边仍然对细节稍做解释。 │ │ │ │ │ │ body { background-color: rgba(0,0,0,0) !important; } │ │ /*这是背景颜色，rgba(红,绿,蓝,透明度) */ │ │ /*RGB可以分别从0~255，如果不清楚的话就打开小画家查*/ │ │ /*透明度: 0是完全透明，1是完全不透明。 */ │ │ /*所以上面的例子中的0就是完全透明的聊天室。 */ │ │ │ │ │ │ /* 时间戳记，打开用inline，关闭用none*/ │ │ .chat-status-time, .chat-compact-time { display: inline !important; } │ │ │ │ │ │ /*想要改字型大小颜色的可以注意这部分/* │ │ .chat-messages.compact .message, .chat-status-message, │ │ .chatBody .name, .chat-status-time, .chat-compact-time { │ │ font-size: 16px !important; /*聊天室文字大小*/ │ │ font-family: 微软正黑体 !important; /*聊天室文字字型*/ │ │ font-weight: 900 !important; /*聊天室文字粗细，900为最粗*/ │ │ line-height: 1.05em !important; /*聊天室文字行高，1.05倍行高*/ │ │ /*这边使用的单位em就是行高，会自动跟着fontsize变化*/ │ │ } │ │ │ │ │ │ /*其他以下原则上都不用动*/ │ │ │ │ │ ╰───── 看不懂就算了的框框 ───总之去复制上面的CSS就对了 ─────╯ 效果在最上面看过了，不过我们这边提供三种透明度的版本。 rgba(0,0,0,0) 完全透明 http://i.imgur.com/pthhOWU.png rgba(0,0,0,0.5) 半透明 http://i.imgur.com/UK8FlgK.png rgba(0,0,0,1) 完全不透明 http://i.imgur.com/i2vnrma.png -------- 结语 作为一个去年十月才成立的平台来说，一年以来其实做了不少更新，稳定性似乎 提升的很不错。上面的CSS很可能会在他们下次大幅更新聊天室的时候就会失效，如 果有遇到这样的情况，可以试着通知我，我会试着尽快释出新版的CSS来复制贴上。 Append. 2014.08.09. 21:15 UTC(+0) -- ███◣ ◢██◣ ◢██◣ █ ◢█ ◣ ◢ ◢██◣ ◣ █ █ ██ █ ██ █ ██ █◢█◤ █◣◢█ █ ██ █◣ █ █ ██ █ ██ █ ██◤ ████ █ ██ ██◣█ @ ptt.cc ███◤ █ ██ █ ██◣ █◥◤█ ████ ████ █◥█◣ █ ██ █ ██ █◥█◣ █ █ █ ██ █◥██ 鸦片(Append) █ ◥█ ◥██◤ ◥██◤ █ ◥█ █ █ █ ██ █ ◥█twitch.tv/append --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 94.14.218.200 ※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Live/M.1407615328.A.E7B.html ※ 编辑: Append (94.14.218.200), 08/10/2014 04:19:32