External Chat with the colours set up selected on deep bot.

[Jim]

I think it would be cool if the colours selected on deepbot chat for mods, vip bronze,silver, gold,etc. Got applied on the external chat so that if you capture the screen of the exeternal chat and put it inside the stream there would be a clear distinction between VIP's.

Thanks.

[emrerocky]

You can do this by changing the CSS of your OBS CLR Browser plugin (which means you don't capture it, but it loads straight inside OBS).  This is the default CSS that you would need to customize:

Code: [Select]

::-webkit-scrollbar {
visibility: hidden;
}
html {
height: 95%;
width: 95%;
}
BODY {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
color: #FFF;
height: 95%;
width: 95%;
}
.nick {
font-weight: bold;
text-transform: capitalize;
text-shadow: 1px 1px 0 #000;
}
.tag {
display: inline-block;
text-indent: 21px;
background-position: 0 center;
background-repeat: no-repeat;
display: inline-block;
vertical-align: bottom;
height: 18px;
min-width: 18px;
width: expression((document.body.clientWidth < $width) ? '18px;:'auto');
padding: 0;
margin-right: 3px;
margin-bottom: -1px;
text-indent: -9999px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
overflow: hidden;
}

.turbo {
background-color: #6441a5;
background-image: url(http://chat-badges.s3.amazonaws.com/turbo.png);
}

.moderator {
background-color: #009900;
background-image: url(http://chat-badges.s3.amazonaws.com/mod.png);
}

.broadcaster {
background-color: #000000;
background-image: url(http://chat-badges.s3.amazonaws.com/broadcaster.png);
}

.staff {

background-image: url(http://chat-badges.s3.amazonaws.com/staff.png);
}

.admin {

background-image: url(http://chat-badges.s3.amazonaws.com/admin.png);
}
.creator {

background-image: url(http://deepbot.deep.sg/images/obschat/creator.png);
}
.vipbronze {

background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {

background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {

background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
padding-left: 5px;
padding-right: 5px;
margin-right: -10px;
padding-top: 2px;
padding-bottom: 3px;
line-height: 16px;
word-wrap: break-word;
color: #FFF;
}
#chat_box {

}
#chat_container {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px;
height: 95%;
width: 95%;
}