Striker 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
Red
#e4084d
Grey
#818e9d
Black
#0c0c14

Product Settings

Transition Settings:

Type: Stinger

Transition Point Type: Time (milliseconds)

Transition point: 1000

Alert Settings

Alert Duration: 8s

Alert Text Delay: 3s

Font Size: 32px

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