Deep Bot - Twitch Streamer Assistant

Deep Bot => Custom Notifications => Topic started by: serfma on April 29, 2015, 07:51:27 AM

Title: How would I get chat to fill the box set by CLR Browser?
Post by: serfma on April 29, 2015, 07:51:27 AM

I'm wanting to fill the entire 500x150 CLR browser box with the chat so that I can quickly and easily align chat up with a background image I have on-screen for chat. Is there any way of doing this? It seems to not fill the box completely requiring a resize of the box every time for every scene. Any help? :)

Title: Re: How would I get chat to fill the box set by CLR Browser?
Post by: TheNumbLock on April 29, 2015, 08:18:27 AM

Are you using the CLR browser as a global source? I would just suggest just add the clr browser to each scene, instead of using a global source.

Title: Re: How would I get chat to fill the box set by CLR Browser?
Post by: serfma on April 29, 2015, 08:54:30 AM

Wow I completely forgot all about global sources...thanks. However, that doesn't fix my issue with the chat not completely filling the dimensions of the box.

As you can tell from here: http://i.imgur.com/9qpDffD.png it does not fully fill up the CLR browser width/height of 500x150. The background image is 500x150, too. My CSS is:

Code: [Select]

::-webkit-scrollbar {
    visibility: hidden;
}
html {

}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    background-image: url(http://i.imgur.com/XC7XvWt.png);
    background-repeat: no-repeat;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}

.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: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {
   
}
#chat_container {
    border-radius: 0px;
    background-color: rgba(0,0,0,0.0);
    padding: 0px;
   
}

Title: Re: How would I get chat to fill the box set by CLR Browser?
Post by: TheNumbLock on April 29, 2015, 10:52:58 AM

Ya, I tried fiddling with it a bit. And even if I make it smaller, it does the same. Try making the background image a bit bigger like 550, and then try 500 on the dimensions.

Title: Re: How would I get chat to fill the box set by CLR Browser?
Post by: serfma on April 30, 2015, 05:29:49 AM

Yeah I don't know CSS that well at all but I'm pretty sure setting background-color for "html" isn't supposed to do this:

With background-color set: http://i.imgur.com/8c2WbOp.png
Without background-color set: http://i.imgur.com/eNyFPLn.png

I did set a background color for #chat_container, #chat_box and .chat_line.

Title: Re: How would I get chat to fill the box set by CLR Browser?
Post by: IanChandler1990 on May 01, 2015, 04:07:36 PM

I Had this as well and it is to do with the padding but in the end I used Dante557's chat overlay(one made for deepbot) that is a local HTML file on my pc this fills the full window size that you set in CLR.

Regards,

Ian Chandler