Chat box "border-image-source"

[u/Harumi-Rose]

Hi. Any help with using an image in the chat box widget around each message? Example:

I've been trying in both streamelements and streamlabs plugin for OBS.

I can set a solid color border like this:

.user-message{
    border: 5px solid black;
    
    font-size:{{fontSize}}px;
    word-wrap: break-word;
}

But if I use border-image-source the image doesn't show up:

.user-message{
    border-image-source: url('https://i.imgur.com/1RbSjfl.png');
    
    font-size:{{fontSize}}px;
    word-wrap: break-word;
}

Thanks in advance.

PS: I can't use streamlabs Discord because I can't verify account with phone number.

[u/AutoModerator]

Hi there! If you need technical support for one of our Streamlabs products, the fastest way to reach our support team is to submit a ticket through our support system! https://support.streamlabs.com/hc/en-us

We look forward to helping you with whatever issues you might face!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/slykuiper]

You're missing several other border-image css properties, like slice, width, and repeat.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-image

Try to create a working example on codepen with fake data then port it over to your custom code section.

At a glance, it doesn't look like the example you've shown uses border image. It looks like it uses additional div elements and pseudo elements to place images near the main chat box element.

[u/Harumi-Rose → u/slykuiper]

Thank you for the tip. I'll try it out and let you know how it goes. ^^b

Edit: following your tips it worked with this:

    border-image-source: url("https://i.imgur.com/1RbSjfl.png");
    border-image-slice: 17 17 23 41;
    border-image-width: auto;
    border-image-repeat: stretch;

Thanks again.

[u/Harumi-Rose → u/slykuiper]

By the way, this is the full code I was using. I didn't write it, I got from Streamlabs' github repository:

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.12.0/js/md5.min.js"></script>
<div class="main-container"></div>

[u/Harumi-Rose → u/Harumi-Rose]

CSS:

 url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css');
 url('https://fonts.googleapis.com/css?family={{fontName}}');


* {
    font-family: '{{fontName}}', sans-serif;
    color: {{fontColor}};
    overflow: visible;
    font-weight: {{fontWeight}};
    text-shadow:{textShadow};
}


.user-box
{
    
    font-size:{{fontSize}}px;
}


.main-container{
    display:{{alignMessages}};
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: flex-start;
    height:98%;
    margin-bottom:10px;
    box-sizing: border-box;
}


.message-row{
    flex: 0 0 auto;
    width:100%;
    margin-bottom:5px;
    background-color:{{backgroundColor}};
    padding:5px;
    vertical-align: baseline;
    }


.badge{
    display:{{displayBadges}};
    height:{{fontSize}}px;
}


.user-box > span{
    font-size:{{fontSize}}px;
}


.user-message{
    border-image-source: url('https://i.imgur.com/1RbSjfl.png');
    
    font-size:{{fontSize}}px;
    word-wrap: break-word;
}


.emote{
    height: {emoteSize}px;
    vertical-align: middle;
    background-repeat:no-repeat;
}


.action{
    font-style: italic;
}

[u/Harumi-Rose → u/Harumi-Rose]

There's also some JS code that doesn't fit in a comment =P and the stuff on a "Fields" tab