Announcement

Collapse
No announcement yet.

Custom UT TwitchAlerts style for OBS

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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;}       
    }
    Click image for larger version

Name:	ca2c0e2675.png
Views:	1
Size:	17.0 KB
ID:	364521 Click image for larger version

Name:	ss (2017-03-21 at 12.47.50).png
Views:	1
Size:	10.8 KB
ID:	364523
    Attached Files
    Last edited by _Lynx; 03-21-2017, 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
    This is so awesome! Great work. Will try and set it up on the weekend.
    This forum post was sponsored by coffee, cigarettes and procrastination at work.
    I tweet occasionally at @pundurs and stream embarrassingly bad game play on my Twitch.

    Comment


    • #3
      Very nice! Thanks for sharing it
      UT ingame alias: nukkuj
      Youtube Twitch Twitter

      Comment


      • #4
        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

        Comment


        • #5
          Thank you ! wery good job !
          scientistpac logo animation | Reign of blood [Frag movie] | scientistpac Twitch | scientistpac Youtube Channel |

          UnrealPUGs trailer | UnrealPUGs Facebook | UnrealPUGs Twitter | UnrealPUGs Website | UnrealPUGs Youtube |

          Comment


          • #6
            Is there any way that i could change the logo design to another?

            Comment


            • #7
              GiantManKenzie, yes, but you need to keep dimensions the same. Replace "http://i.imgur.com/QKwULrj.png" in the 4 lines that you paste into TwitchAlerts with the link to your logo. It should be a 176px by 176px, 24-bit png with an alpha channel. You might want to also add a shadow to the logo, so that it stands out against any background:
              "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

              Comment

              Working...
              X