Need help with chat CSS

[Lucaser007]

Hey guys. Yesterday i installed the deepbot again and i wanted to take it's chatoverlay, because of the VIP Stars. The problem is, i do like the chatbox from twitch alerts more, because its better animated.

Is it possible to changes settings like this in the CSS box?

Things i want:

-30 sec fade out on every SINGLE message, not the whole chat.

-Chat comes from bottom, and scrolls up

-Chat lines are flying in from the right


i have no idea what to do. Im currently using the standard CSS for the deepbotchatoverlay.


Hope you can help me..


Sincerely,

Lucas



edit: Maybe it's not possible to change the animation of the deepbot chat. but maybe it's possible to include the VIP Stars in front of the twitch alerts chat?


i got the CSS for the twitch alerts chat.

Code: [Select]

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body {
    text-shadow:0 0 1px #666,1px 1px 0 #000;
    background: $background_color;
}

html, body {
    height: 100%;
    overflow: hidden;
}

#log>div {
    animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease $message_hide_delay forwards;
    -webkit-animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease $message_hide_delay forwards;
}

.colon {
    display: none;
}

#log {
    font-family: Roboto;
    display: table;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 10px 10px;
    width: 100%;
    box-sizing: border-box;
    line-height: 24px;
    color: $text_color;
    table-layout: fixed;
}

#log>div {
    display: table-row;
}

#log>div.deleted {
    opacity: 0;
}

#log .emote {
    background-repeat: no-repeat;
    background-position: center;
    padding: 4px;
}

#log .emote img {
    display: inline-block;
    height: 24px;
    opacity: 0;
    vertical-align: top;
}

#log .message,#log .meta {
    vertical-align: top;
    display: table-cell;
    padding-bottom: 6px;
}

#log .meta {
    width: 35%;
    text-align: right;
    padding-right: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#log .message {
    word-wrap: break-word;
    width: 65%;
}

.badge {
    display: inline-block;
    margin-right: 4px;
    position: relative;
    top: 3px;
}

.name {
    font-weight: 700;
}


[Godzinhu]

i am looking for this too, any dev can help us ? tank you

[Godzinhu]

up

[TheNumbLock]

Well you can customize the chat more if you download the page and host it yourself. (I have never done it myself, but I know a few users who do this with notifications so they can have different notifications for different amounts.)

However, you may be able to make each line fade out with CSS animations that run every x seconds. (I have never tried it, since I am horrible with animations, but it may be possible.)

As for the slide, you can do this with OBSChatv9: Right to Left: http://deepbot.tv/notifications/OBSChatv9.htm?slide=1 Left to right: http://deepbot.tv/notifications/OBSChatv9.htm?slide=2 and from Top to Bottom: http://deepbot.tv/notifications/OBSChatv9.htm?slide=3

[chikarkas36]

Well you can customize the chat more if you download the page and host it yourself. (I have never done it myself, but I know a few users who do this with notifications so they can have different notifications for different amounts.)

However, you may be able to make each line fade out with CSS animations that run every x seconds. (I have never tried it, since I am horrible with animations, but it may be possible.)

As for the slide, you can do this with OBSChatv9: Right to Left: http://deepbot.tv/notifications/OBSChatv9.htm?slide=1 Left to right: http://deepbot.tv/notifications/OBSChatv9.htm?slide=2 and from Top to Bottom: http://deepbot.tv/notifications/OBSChatv9.htm?slide=3

How to add fade to this http://deepbot.tv/notifications/OBSChatv9.htm?slide=2

[TheNumbLock]

I don't think you can. Would have to create your own chat link to do so. I know one of the support team members has a link with a chat. I just don't know if it can be customized to fade each line. But if you want to fade the whole chat after being inactive, you would add &fade=30 (which would fade it after 30 secs of inactivity.)