Warning: Creating default object from empty value in /customers/a/5/4/livespace.se/httpd.www/blogg/wp-content/themes/salient/nectar/redux-framework/ReduxCore/inc/class.redux_filesystem.php on line 29 Free animated alert notice for Twitch and OBS - LiveSpace Twitch Guide
Free Stuff

Free animated alert notice for Twitch and OBS

By 18 February, 2016 2 Comments

This is a free animated alert notice for Twitch that I include in some of my branding packages. It’s very easy to change (it’s only a image). You don’t need to know any HTML, CSS or JavaScript to use it. You might need to have a text editor so you can change the HTML and CSS to work with whatever image you want to use. The image (that pop-down) can be PNG, JPG or GIF and will work the same way as long as you enter the right height into the CSS code. You can remove the image and add regular text or use background image with text over it or easily change the amount of time it stays on screen (right now it’s set to 7,5 seconds).

The reason for this post is actually due to a message I got on Twitter from Miss Munster. She was wondering if I knew a service that could give you a notice window, sort of a follower alert but on a rotation instead of triggered. I’ve been including this script for some clients but you can thank her for putting some fire under me so I got it out since I’ve actually been meaning to clean up the code and get it out there for awhile now. If you have an idea for an article or a post that you would want to see don’t wait for me to write it and instead just let me know @visiblespeech!

How to change the image

When changing the image there’s two different ways to do it. The easiest is to simply replace the image with a new image (has to be the same size). If you want to have different dimensions you’ll need to do some minor editing in the CSS code, but nothing that’s going to give you a headache.

[mks_accordion] [mks_accordion_item title=”Step 1″] Open up style.css in any regular text editor (not a word processor). If you can’t find style.css it’s in the “css” folder.
[/mks_accordion_item] [mks_accordion_item title=”Step 2″] [mks_col] [mks_one_half]Find the following code snippet:
#note {
position: absolute;
z-index: 6001;
text-align: center;
line-height: 2.5;
overflow: hidden;
top: -262px;
[/mks_one_half] [mks_one_half]The “top: -262px;” will reflect the height of your image. If you’re image is 100px tall you need to enter -100px for the notice to work.[/mks_one_half] [/mks_col] [/mks_accordion_item] [mks_accordion_item title=”Step 3″] [mks_col] [mks_one_half]Find the following code snippet:
@-webkit-keyframes slideDown {
0%, 100% { -webkit-transform: translateY(0px); }
10%, 90% { -webkit-transform: translateY(262px); }
}[/mks_one_half] [mks_one_half]The “10%, 90% { -webkit-transform: translateY(262px); }” will, again, reflect the height of your image. You need to do the same change, but without the minus sign, and enter 100px if your new image is 100px tall.
[/mks_one_half] [/mks_col] [/mks_accordion_item] [/mks_accordion]

Change the time on screen

This is pretty simple so no step by step.

  • Open style.css and find: -webkit-animation: slideDown 7.5s 1.0s 1 ease forwards;
  • All you need to do is edit the 7,5s to whatever time you want it to stay on screen.

Change intervalls timing

If you thought the last step was simple then this one is even easier.

  • Open “livespace.html” in a text editor and find: <meta http-equiv=”refresh” content=”600″>
  • All you need to do is change the number 600 to however many seconds you want it be between it going on and off screen.
  • 600/60=10 so that’s 10 minutes between each time the image comes down

Free animated alert notice for Twitch

[mks_icon icon=”fa-file” color=”#000000″ type=”fa”] Direct Download


This year I’m introducing custom dynamic as a part of LiveSpace, want to get in on the future? I’ve work with both partnered and non-partnered Twitch streamers and done so for over 3 years. For me this is full time and I’m dedicated to my clients and my craft. I do both branding, visual branding and consulting based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away.

[mks_button size=”medium” title=”Twitch branding and consulting” style=”rounded” url=”http://twitch.livespace.se/” target=”_blank” bg_color=”#eeee22″ txt_color=”#0a0a0a” icon=”fa-arrow-right” icon_type=”fa”] [/mks_two_thirds] [mks_one_third]profile[mks_icon icon=”fa-twitter” color=”#000000″ type=”fa”] @visiblespeech
[/mks_one_third] [/mks_col]

Here we are at the end of the week. I had a great consulting conversation a few hours ago that went very well. I love talking Twitch with anyone so that’s always a treat. We got pretty far in an hour, we covered everything from marketing, promotion, audience building, networking and even more. It’s crazy how much you can get into an hour when you think about, hopefully we’ll get the chance to schedule another hour after what was talked about have been digested.

Tomorrow I’m taking the afternoon off to drink som free beers (yes we have that in my city). Going to celebrate that the week is over and that I’m moving forward with a lot of business (all related to Twitch in someway) ventures. They’re also going to have some table tennis… let’s see how that works out with alcohol.

Have a great weekend and keep streaming awesomeness! 



Do you need a Twitch website done the right way? Or do you need a Twitch branding strategy? If you're ready then take a look at the Twitch services and see if they fit into your future. twitch.livespace.se