eSports Stream Package

Product ReadMe

This page contains the essential information needed to setup this product. If you require any additional assistance please visit our Support Discord Server.

Product Information

Product Font(s):
Install the following fonts used in this product
Product Colours:
Click a colour to copy the Hex Code
Black
#040c24
Red
#e4245c
Dark Red
#961745

Product Settings

Transition Settings:

Type: Stinger

Transition Point Type: Time (milliseconds)

Transition point: 900

Alert Settings

Alert Duration: 8s

Alert Text Delay: 1s

Font Size: 52px

Font Weight: 600

Alert Custom HTML/CSS
HTML
CSS
<!-- alert image -->
<div id="alert-image-wrap">
  <div id="alert-image">{img}</div>
</div>

<!-- main alert box window -->
<div id="alert-text-wrap">

  <!-- alert text -->
  <div id="alert-text">

    <!-- alert message -->
    <!-- messageTemplate will be replaced with your message template -->
    <!-- for example : {name} is now following! or {name} donated {amount} -->

    <div id="alert-message">{messageTemplate}</div>
    <div id="alert-user-message">{userMessage}</div>

  </div>

</div>
.widget-AlertBox {
    position: relative;
}
body,
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#wrap {
    position: relative;
    height: 100%;
    width: 100%;
}
#alert-box {
    height: 100%;
    width: 100%;
    position: absolute;
}
#alert-box.hidden,
.hidden {
    opacity: 0;
}
#alert-text {
    padding: 20px;
}
#alert-message,
#alert-user-message {
    text-align: center;
}
#alert-user-message img {
    vertical-align: middle;
    height: 1em;
}
#alert-image {
    position: relative;
}
#alert-image video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#alert-message > span > span {
    display: inline-block;
}
#alert-image {
    z-index: 6;
    position: relative;
}
#alert-text {
    z-index: 6;
    position: relative;
}
#alert-text-wrap {
    z-index: 6;
    position: relative;
}