my code and settings for my streamlabs layout

!StreamlabLayout

chat box settings:
  base theme: clean
  badges: all enabled
  extra emotes: bTTV, FFZ
  back color: #010101
  text color: #ffffff
  font size: 20px
  hide messages after: disabled
  chat delay: 0
  message animations: no
  hide common chat bots: no
  hide commands: no
  muted chatters: none (xd)
  custom bad words: n/a
  code: see codeChat.*

alert box settings:
  back color: #FF00FF
  alert delay: 0
  unlimited alert moderation delay: ??? no
  layout: n/a
  reset stream labels auto: no
  alert parries: ??? yes
  parry alert delay: 0.5
  profanity:
    replace bad words with happy words
    enable standard `bad word` list
    anonymize names containing `bad words`
  follow alerts:
    yes
    layout: n/a
    alert anim: slide in left / slide out right
    msg: {name} just joined the Frankenstein Apocalypse!
    text anim: none
    image: none
    sound: none
    sound vol: n/a
    alert duration: 2
    alert delay: 0
    code: see codeAlertFlw.*
  subscriptions:
    yes
    layout: n/a
    alert anim: slide in left / slide out right
    show prime
    msg: {name} subscribed!
    text anim: none
    image: none
    sound: none
    sound vol: 50%
    alert dur: 4
    alert delay: 0
    code: see codeAlertSubT.*
  donations:
    yes
    layout: n/a
    alert anim: slide in left / slide out right
    min amount: 0
    msg: {name} donated {amount}! :D
    text anim: none
    image: none
    sound: https://uploads.twitchalerts.com/000/052/999/922/B_Donation.ogg
    sound vol: 100%
    alert dur: 4
    alert delay: 0
    code: see codeAlertDono.*
  hosting:
    yes
    layout: n/a
    alert anim: slide in left / slide out right
    show auto hosts: yes
    viewer minimum: 0
    msg: {name} is now hosting my stream with {count} viewers!
    text anim: none
    image: none
    sound: welcome (quake)
    sound vol: 12%
    alert dur: 2
    alert delay: 0
    code: see codeAlertHost.*
  bits:
    yes
    layout: n/a
    alert anim: slide in left / slide out right
    min bits: 0
    msg: {name} > x{amount}
    text anim: none
    image: none
    sound: (from clickbit) https://uploads.twitchalerts.com/000/052/999/922/upgrade-sharedassets1.assets-28.wav
    sound vol: 80%
    alert dur: 8
    alert delay: 0
    code: see codeAlertBits.*
  raids:
    no
    layout: n/a
    alert anim: slide in left / slide out right
    raid min: 0
    msg: {name} is raiding with a party of {count}!
    text anim: none
    image: none
    sound: none
    alert dur: 0
    alert delay: 0
    code: see codeAlertRaids.*
  merch:
    yes
    layout: n/a
    alert anim: slide in left / slide out right
    msg: {name} bought {product}!
    text anim: none
    don't replace image with custom
    sound: none
    sound vol: 50%
    alert dur: 3
    alert delay: 0
    code: see codeAlertMerch.*

event list settings:
  base theme: slick
  theme color: #636363
  enable all except redemps
  min views for host: 0
  min bits: 0
  min raiders: 0
  max events: 10
  back color: #000000
  text color: #ffffff
  font: archivo narrow
  font size: 22px
  anim: fade in / fade out (n/a)
  anim speed: 250
  fade time: 0
  flip: !x, !y
  code: n/a

codeAlertBits.css

.widget-AlertBox {
    position: relative;
}
* {
    font-family: /*Px437 IBM BIOS-2y,*/ Px437 IBM CGAthin, Arial, sans-serif, Times, serif !important;
    /*font-size: 16px;*/
}
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;
}

codeAlertBits.html

<!-- 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>

codeAlertDono.css

.widget-AlertBox {
    position: relative;
}
* {
    font-family: Arial, sans-serif, Times, serif !important;
}
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 {
    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;
}

codeAlertDono.html

<!-- 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>

codeAlertFlw.css

.widget-AlertBox {
    position: relative;
}
body,
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
* {
    font-family: Arial Narrow, sans-serif !important;
}
#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 {
    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;
}

codeAlertFlw.html

<!-- 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>

codeAlertHost.css

.widget-AlertBox {
    position: relative;
}
* {
    font-family: Arial, sans-serif, Times, serif !important;
}
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;
}

codeAlertHost.html

<!-- 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>

codeAlertMerch.css

.widget-AlertBox {
    position: relative;
}
*  {
    font-family: Arial, sans-serif, Times, serif !important;
}
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;
}

codeAlertMerch.html

<!-- 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>

codeAlertRaids.css

.widget-AlertBox {
    position: relative;
}
*  {
    font-family: Arial, sans-serif, Times, serif !important;
}
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;
}

codeAlertRaids.html

<!-- 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>

codeAlertSubT.css

.widget-AlertBox {
    position: relative;
}
* {
    font-family: Arial, sans-serif, Times, serif !important;
}
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 {
    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;
}

codeAlertSubT.html

<!-- 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>

codeChat.css

body {
    background: $background_color;
    color: $text_color;
    font-size: $font_size;
}

.colon,.name {
    height: 26px;
}

html, body {
    height: 100%;
    overflow: hidden;
}

#log {
    font: 0.8em "Times New Roman",Helvetica,Arial Narrow,sans-serif;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 10px 10px;
    width: 100%;
    box-sizing: border-box;
    display: table;
    table-layout: fixed;
}

#log>div {
    padding-bottom: 0.4em;
    animation: fadeOut 1s ease $message_hide_delay forwards;
    -webkit-animation: fadeOut 1s ease $message_hide_delay forwards;
    word-wrap: break-word;
}

#log>div.deleted {
    visibility: hidden;
}

#log .emote {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    padding: 4px;
}

#log .emote img {
    display: inline-block;
    height: 1em;
    opacity: 0;
}

.badge,.colon,.name {
    display: inline-block;
    vertical-align: top;
}

#log .meta {
    padding-right: 4px;
    position: relative;
    /* top: -1px;*/
}

.badge {
    margin-right: 4px;
    height: 1em;
}

.name {
    font-weight: 700;
    margin-left: 0.1em;
}

.writer {
		width: 30%;
  	text-align: right;
}

.msg {
  	width: 70%;
}

codeChat.html

<!-- item will be appened to this layout -->
<table id="log" class="sl__chat__layout">
</table>

<!-- chat item -->
<script type="text/template" id="chatlist_item">
	<tr data-from="{from}" data-id="{messageId}">
		<td class="writer">
	   	<span class="meta" style="color: {color}">
	      <span class="badges"></span>
	      <span class="name">{from}</span>
	 	  </span>
		</td>
    <td class="msg">
	   	<span class="message">
	      {message}
	   	</span>
    </td>
  </tr>
</script>

codeChat.js

// Please use event listeners to run functions.
document.addEventListener('onLoad', function(obj) {
	// obj will be empty for chat widget
	// this will fire only once when the widget loads
});

document.addEventListener('onEventReceived', function(obj) {
  	// obj will contain information about the event
	
});