Gravity 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
#2bb2dc
#5be7fe
#575781
#0b0b14

Product Settings

Transition Settings:

Type: Stinger

Transition Point Type: Time (milliseconds)

Transition point: 1000

StreamElements Alert Settings

Alert Width: 1920

Alert Height: 1000

Alert Duration: 7s

Alert Text Delay: 1s

Font Size: 60px

Top Margin: 452

Left Align: 808

Streamlabs Alert Settings

Alert Duration: 8s

Alert Text Delay: 2s

Font Size: 50px

Font Weight: 600

Streamlabs 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;
    text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 4px #000, 0px 0px 5px #000;
}
#alert-message,
#alert-user-message {
    padding-left: 790px;
    text-align: left;
}
#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;
}