Chat changes, badges

[MuddUnders]

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?

[TheNumbLock]

Yes it is. It all CSS code.

[MuddUnders]

can you plz explain how this is done?

[TheNumbLock]

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.

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


[MuddUnders]

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!

[MuddUnders]

Nevermind, it appears it just works with the badges. So thats good.

How do I make it NOT disappear though?

[ExpertsOnline]

Remove the Fade parameter from the URL

[MuddUnders]

Ok I think I got it.

Is there a way to show the Deepbot Mod icon? I can see the VIP levels.

[MuddUnders]

I am trying to use custom images for VIPs, is there a specific size the image needs to be?

[TheNumbLock]

I am trying to use custom images for VIPs, is there a specific size the image needs to be?

18x17

[MuddUnders]

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?

[TheNumbLock]

So in the CSS code, just add color tag and get an html color code, and add it like so:

Code: [Select]

.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.

[MuddUnders]

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!

[TheNumbLock]

#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

[CalToxReaper]

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?