Deep Bot - Twitch Streamer Assistant
Deep Bot => Help/Support => Topic started by: MuddUnders on February 14, 2015, 06:46:47 AM
-
I have never used Deepbot chat before. Does deepbot chat (if overlayed on the stream) capable of adding custom badges for VIPs or stream colors?
-
Yes it is. It all CSS code.
-
can you plz explain how this is done?
-
Here is a link to a Tutorial of adding the Overlay chat to OBS: http://deepbot.deep.sg/wiki/OBS+CLR+Browser&structure=Index&page_ref_id=11
This is the CSS code to use:
It's not to hard to figure it out, but if you need help, I will try my best. I can try and customize it for you as well.
::-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%;
}
-
So I got the chat to overlay on OBS via CLR browser, copying and pasting the link and CSS into the CLR
Couple Things:
1. How to make it so it does not disappear after the few seconds
2. How can I get VIP badges to show?
3. How do I change VIP ppl colors?
Thanks again!
-
Nevermind, it appears it just works with the badges. So thats good.
How do I make it NOT disappear though?
-
Remove the Fade parameter from the URL
-
Ok I think I got it.
Is there a way to show the Deepbot Mod icon? I can see the VIP levels.
-
I am trying to use custom images for VIPs, is there a specific size the image needs to be?
-
I am trying to use custom images for VIPs, is there a specific size the image needs to be?
18x17
-
awesome thank you so much for the info.
1 last question, I have seen streams that change the color of the chat names depending on rank. I assume this is a manual process, but how would I change the viewer chatters color to a custom ranking color?
-
So in the CSS code, just add color tag and get an html color code, and add it like so:
.vipbronze {
background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
color: #FFF;
}
That should work, I have not tested it tho. Let me know.
-
Is there a way to lower the opacity on the background of the chat?
I know you can do it in OBS but that changes everything, including the text. I would just like the background to be somewhat clearer./
Thanks!
-
#chat_container {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px;
height: 95%;
width: 95%;
}
Try editing the background-color. I think you can put transparent
-
this helped me alot, one question is there a way for me to make it where every ones name is one color but a vip user can chose their own onscreen color if they donate?
-
i want to make the normal viewer rank one color were in the css is that located so i can change to it a green html code?
how do i make custom groups for badges like i see one for creator but i dont know how to give anyone the creator badge? i want to make a badge for higher donations given?