User Tag List

Results 1 to 4 of 4

Thread: Custom UT TwitchAlerts style for OBS

  1. #1
    Super Moderator
    Join Date
    May 2014
    Location
    Moscow, Russia
    Posts
    1,876
    Mentioned
    17 Post(s)
    Tagged
    0 Thread(s)

    Custom UT TwitchAlerts style for OBS

    Want to stream UT in style? You might want to try this:





    This style replicates the UI made by Zaccubus' for his DM-Underland video. This was tested only with OBS, other streaming software set-up may differ

    In TwitchAlerts Dashboard go to Alert Box under Stream Widgets on the left

    1. Set the alerts to text only (middle option)
    2. Enter this text into Message template:
      On Follow tab:
      Code:
      <div class="logo-div"><img src="http://i.imgur.com/QKwULrj.png" class="logo" width="176px" height="176px" /></div><div class="UW"><div class="Name">{name}</div></div><div class="DW"><div class="Msg">is now following</div></div><div class="bar"><img src="http://i.imgur.com/b5DJ1f9.png" /></div>
      On Subscriptions tab:
      Code:
      <div class="logo-div"><img src="http://i.imgur.com/QKwULrj.png" class="logo" width="176px" height="176px" /></div><div class="UW"><div class="Name">{name}</div></div><div class="DW"><div class="Msg">just subscribed!</div></div><div class="bar"><img src="http://i.imgur.com/b5DJ1f9.png" /></div>
      On Donations tab:
      Code:
      <div class="logo-div"><img src="http://i.imgur.com/QKwULrj.png" class="logo" width="176px" height="176px" /></div><div class="UW"><div class="Name">{name}</div></div><div class="DW"><div class="Msg">donated {amount}!</div></div><div class="bar"><img src="http://i.imgur.com/b5DJ1f9.png" /></div>
      On Hosts tab:
      Code:
      <div class="logo-div"><img src="http://i.imgur.com/QKwULrj.png" class="logo" width="176px" height="176px"/></div><div class="UW"><div class="Name">{name}</div></div><div class="DW"><div class="Msg">now hosting with {count} viewers!</div></div><div class="bar"><img src="http://i.imgur.com/b5DJ1f9.png" /></div>
      On Bits tab:
      Code:
      <div class="logo-div"><img src="http://i.imgur.com/QKwULrj.png" class="logo" width="176px" height="176px"/></div><div class="UW"><div class="Name">{name}</div></div><div class="DW"><div class="Msg">cheered! x{amount}</div></div><div class="bar"><img src="http://i.imgur.com/b5DJ1f9.png" /></div>
    3. Set the Message Font to "Aldrich", font size to 50, weight to 600. Repeat this step on all tabs. This is important! If text and bar are misaligned, Double check if you have this set correctly!
    4. Open OBS Studio and add a a new source to your scene: Browser source
    5. Copy the link from TwitchAlerts Alert Box page (at the top, under How To section) and paste it into the URL field.
    6. Set Width to 620, height to 400, FPS to 30. Height is twice more than required, but this is needed to accommodate donation and bits messages
    7. Paste the CSS below into CSS field and click OK (source will not apply any CSS changes unless you click OK)
    8. Test the alerts using the test buttons on TwitchAlerts Alert Box page


    The widget was made with docking to the left side of the screen in mind, adjust the the commented line in #alert-user-message below if you want to place it in the center or on the right.

    HTML Code:
     body, #alert-box, #wrap, #alert-text-wrap{
        height: 400px;
        width: 600px;
      }
      
      #alert-message, #alert-text{
        text-align: left;
        padding: 0px;
      }
    
     #attribution{
      display: none;
      visibility: hidden;
      }
      
      
      #alert-text{
        text-shadow: 0px 0px 1px #3e3e3f, 0px 0px 2px #3e3e3f, 0px 0px 3px #3e3e3f, 0px 0px 4px #3e3e3f;
      }
      
      #alert-user-message{
        position: absolute;
        top: 180px;
        text-align: left;
    /* text-align: right; */
    /* text-align: center; */
        padding-left: 10px;
        padding-top: 10px;
        padding-right: 10px;
        animation-name: msgFadeIn !important;
        animation-delay: 3s !important;
        animation-timing-function: linear;
      }
      
    .logo{
        animation-name: Urollout; 
        animation-duration: 10s;
      text-align: left;
        animation-timing-function: linear;    
    }
    
    .logo-div{
        position: absolute;
        top: 0px;
        height: 176px;
        width: 600px;
        text-align: center;
        animation-name: Ustatic;
        animation-duration: 10s;
        animation-timing-function: linear;    
        transform: scale(0,0);
    }
    
    .bar{
        width: 500px;
        position: absolute;
        top: 206px;
        left: 0px;
        text-align: right;
        animation-name: bar; 
        padding-left: 10px;
        animation-duration: 10s;
        animation-timing-function: linear;
        transform:scale(1,0);
        transform-origin: right;
    }
      
    .UW{
        position: absolute;
        overflow: hidden;
        height: 67px;
        width: 490px;
        top: 10px;
        left: 140px;     
    }  
    
    .DW{
        position: absolute;
        overflow: hidden;
        height: 164px;
        width: 490px;
        top: 78px;
        left: 140px;    
    }
      
    .Name{
        font-family: 'Aldrich', sans-serif;
        text-transform: uppercase;
        font-size: 50px !important;
        font-weight: 600 !important;
        padding-left: 12px; !important;
        padding-top: 4px;
        color: white;
        text-align: justify !important;
        position: relative;
        width: 490px !important;
        animation-name: textUp;
        animation-duration: 10s;
        animation-timing-function: linear;
        top: 240px;
        transform:scale(1,1.2); 
        overflow: hidden;  
    }
    
    .Msg{
        font-family: 'Aldrich', sans-serif;
        text-transform: uppercase;
        text-align: left !important;
        width: 500px !important;
        color: white;
        font-size: 36px !important;
        font-weight: 500 !important;
        padding-left: 10px !important;
        animation-name: textDown;
        padding-left: 14px !important;
        padding-top: 8px; 
        position: relative;
        animation-duration: 10s;
        animation-timing-function: linear;
        top: -100px;
        overflow: hidden; 
    }
      
    @keyframes msgFadeIn {
      0% {opacity: 0;}
      15% {opacity: 0;}
      17% {opacity: 1;}  
      98% {opacity: 1;}
      100%  {opacity: 0;}
    }
    
    @keyframes Urollout {
     from { opacity: 0; transform:translateY(-10px) rotate(720deg);}
     10% { opacity: 1; transform:translateY(-10px) rotate(0deg);}
     15% { opacity: 1; transform:translate(-220px, -10px) rotate(-15deg);}
     17% { opacity: 1; transform:translate(-220px, -10px) rotate(15deg);}
     18% { opacity: 1; transform:translate(-220px, -10px) rotate(-15deg);}
     19% { opacity: 1; transform:translate(-220px, -10px) rotate(10deg);}
     20% { opacity: 1; transform:translate(-220px, -10px) rotate(-5deg);}
     21% { opacity: 1; transform:translate(-220px, -10px) rotate(0deg);}
     79% { opacity: 1; transform:translate(-220px, -10px) rotate(0deg);}
     80% { opacity: 1; transform:translate(-220px, -10px) rotate(-5deg);}
     81% { opacity: 1; transform:translate(-220px, -10px) rotate(5deg);}
     82% { opacity: 1; transform:translate(-220px, -10px) rotate(-10deg);}
     83% { opacity: 1; transform:translate(-220px, -10px) rotate(15deg);}     
     85% { opacity: 1; transform:translate(-220px, -10px) rotate(-15deg);}      
     90% { opacity: 1; transform:translateY(-10px) rotate(5deg);}    
     100% { opacity: 0; transform:translateY(-10px) rotate(800deg);}    
    }
    
    @keyframes Ustatic {
      from {transform: scale(0.1);}
      10% {transform: scale(1.0);} 
      90% {transform: scale(1.0);}    
      100% {transform: scale(0.1);}    
    }
    
    @keyframes bar {
     from { opacity: 0; transform:translate(100px, -130px) scale(0,1);}
     12% { opacity: 1; transform:translate(100px, -130px) scale(0,1);}
     15% { opacity: 1; transform:translate(100px, -130px) scale(0.92,1);}
     85% { opacity: 1; transform:translate(100px, -130px) scale(0.92,1);}      
     88% { opacity: 1; transform:translate(100px, -130px) scale(0,1);}    
     100% {opacity: 0;transform:translate(100px, -130px) scale(0,1);}    
    }
    
    
    @keyframes textUp {
       from {opacity: 0;top: 240px;}
       16% {opacity: 0;top: 240px;}
       19% {opacity: 1;top: 0;}
       81% {opacity: 1;top: 0;}
       84% {opacity: 0;top: 240px;}    
      100% {opacity: 0;top: 240px;}  
    }
    
    @keyframes textDown {
      from {opacity: 0;top: -200px;}
      16% {opacity: 0;top: -200px;}
      19% {opacity: 1;top: 0px;}
      81% {opacity: 1;top: 0px;}
      84% {opacity: 0;top: -200px;}    
      100% {opacity: 0;top: -200px;}       
    }
    ca2c0e2675.png ss (2017-03-21 at 12.47.50).png
    Attached Images Attached Images
    Last edited by _Lynx; 03-21-2017 at 01:47 PM.
    "Yeah. _Lynx can fire the lightning gun, have the lightning bolt turn a 90 degree corner, stop and ask the closest teammate for directions, confuse the directions and get lost, realize it went the wrong way, make a U-Turn, and get a headshot on the intended target."
    - RenegadeRetard

  2. #2
    Junior Member
    Join Date
    Apr 2016
    Location
    Riga, Latvia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is so awesome! Great work. Will try and set it up on the weekend.

  3. #3
    Senior Member
    Join Date
    May 2014
    Posts
    247
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Very nice! Thanks for sharing it
    UT ingame alias: nukkuj
    Youtube Twitch Twitter

  4. #4
    Super Moderator
    Join Date
    May 2014
    Location
    Moscow, Russia
    Posts
    1,876
    Mentioned
    17 Post(s)
    Tagged
    0 Thread(s)
    Updated to fix the gray bar at the bottom
    "Yeah. _Lynx can fire the lightning gun, have the lightning bolt turn a 90 degree corner, stop and ask the closest teammate for directions, confuse the directions and get lost, realize it went the wrong way, make a U-Turn, and get a headshot on the intended target."
    - RenegadeRetard

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •