Disp > FW

[技术] Hitbox聊天室自订字型撷取 8/10更新

楼主: Append (鸦片)   2014-08-10 04:15:23
     CSS: http://pastebin.com/yPeJpU10
     好读版 http://disp.cc/b/27-80j4
     首先,有图有真相

 
     (前情提要: #1IpUhrAc )
     由于最近Twitch再次都更,又有一些Twitch实况主开始尝试移动到Hitbox平台来
 进行实况。在今年一月初的时候,我曾经为了在OBS中嵌入Hitbox聊天室而写过一个
 CSS范本,达到调整字形、加上边框与去背景的效果;然而好景不常,Hitbox也都更
 了,虽然聊天室多了许多功能,不过旧的CSS也失去了效果。因此,趁假日有空的时
 候,参考了一些menjyoumayu在#1JntKwsu调整的内容,重新修正了一次,同时加上一
 些注解方便调整。
     为何不使用网页聊天室呢?直觉上我们可以去撷取聊天室,甚至对他去背景,但
 是这并不是个好方法。网页聊天室的字型和大小都绑在浏览器里面,要调整的话,牵
 一发动全身,平常看的其他东西也会一起改变;不调整的话,小小的字型经过H264压
 缩之后就糊成一团。一种理想的方式是透过Stylebot之类的CSS修改套件来更动网页
 聊天室的版面,事实上可以达到和这一篇几乎相同的效果。
     我所采用的这一套方法源自于OBSChat。( http://www.nightdev.com/obschat/ )
NightDev - OBS Chat
 
 他用正确大小的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 
     (这东西好像不是必要的,我自己没有装,)
     (但是目前有三个人装了之后解决问题。)
 --------
 使用
     

 
     安装完成之后,在OBS里面的"来源"区域,点选右键,选择"CLR Browser",
 取一个好认的名字,然后进入设定。
     General (一般)

imgur [检视原始大小(1031x663)]
 
     要注意的点只有三个:
     (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

     这里就是重点啦。自订CSS的功能可以更改版面还有字型的样式。
     总之我们可以复制贴上,然后安心按下确定。
     CSS码请看这里 http://pastebin.com/yPeJpU10
[CSS] Hitbox CLR用聊天室 CSS范本 Updated: 2014/08/10 - Pastebin.com
 
 ================
╭───── 看不懂就算了的框框 ───总之去复制上面的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) 完全透明

 
     rgba(0,0,0,0.5) 半透明

 
     rgba(0,0,0,1) 完全不透明

 
 --------
 结语
     作为一个去年十月才成立的平台来说,一年以来其实做了不少更新,稳定性似乎
 提升的很不错。上面的CSS很可能会在他们下次大幅更新聊天室的时候就会失效,如
 果有遇到这样的情况,可以试着通知我,我会试着尽快释出新版的CSS来复制贴上。
     Append.   2014.08.09. 21:15 UTC(+0)

PTT disp

Links booklink

Contact Us: admin [ a t ] ucptt.com