Deep Bot - Twitch Streamer Assistant

Deep Bot => Feature Requests => Topic started by: Jim on June 08, 2015, 06:17:19 PM

Title: External Chat with the colours set up selected on deep bot.
Post by: Jim on June 08, 2015, 06:17:19 PM

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.

Title: Re: External Chat with the colours set up selected on deep bot.
Post by: emrerocky on June 09, 2015, 01:39:05 AM

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%;
}