NightDev Community Forums

[Guide] Customize follower alert for other broadcasting software


#1

How to customize your follower alert without using OBS

Intro

This guide is for users that either don't like the OBS plugin because you need to look at OBS to see who followed, or users that use other broadcasting software like Xsplit. It took me a while to figure out how to customize my follower alert without using the OBS plugin, so I decided to write this guide for anyone that is interested in doing the same thing. This guide should also be useful for the Subscriber alert and Streamtip, but I don't use those myself. I expect the steps to be similar.

About

This method uses an extension/addon called Stylish. It manipulates CSS after a page load and you can save your own CSS for specific webpages. This is how we can use our own CSS, much like you can with the OBS plugin. The steps included are for the Chrome extension, the addon for Firefox works similar.

What you need

**1** Complete the setup for your follower alert. (picture size can be anything, not just 580x110) **2** Google Chrome or Mozilla Firefox is mandatory. **3** Install Stylish extension for Chrome or Stylish addon for Firefox. Use google to find it. (I can't link everything because I am a new user)

Setup

[Screenshots][1] **1** Click the new icon on the right top of your screen, and click manage installed styles. **2** Click write new style on the left side of your screen. **3** Give your style a name. **4** Copy the default (centered Text layout) CSS into the code section. [code]body { background-color: transparent; color: white; }

#follower-alert {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 580px;
height: 110px;
}

#follower-alert .text {
margin-left: 15px !important;
width: 550px !important;
font-size: 45px !important;
padding-top: 45px;
text-align: center;
line-height: 45px;
vertical-align: middle;
font-family: Impact;
text-shadow: 2px 2px 1px #000;
white-space: nowrap;
color: #ffffff;
}
[/code]

5 Click the specify button.
6 Copy your follower alert URL in the URL field and click Add.
7 Copy the same URL into the URL field and add &preview=true to the end and press Add again.
8 Click Save on the left side to save the changes and you are done setting up.

Customize

Any CSS value can be added or edited to suit your likings. My best tip is to just experiment if you are not used to css and see what happens when you refresh your preview page. Everything is possible, even rotating your text with the transform command. For exmaple, if you add this to your *#follower-alert .text* block it will rotate your follower text 7 degrees.[code]transform: rotate(7deg);[/code]

Final words

I hope this guide is useful and if you have any questions about setting this up I will try to answer them in this thread. If you need help on CSS I recommend to take a look at [w3schools.com][2]. That website has all the information you need on CSS-commands with live examples. Have fun customizing your follower alert!

#2

#3

Is it possible to change the duration of the alert ? And how ?


#4

The duration of the alert cannot be changed at this time.


#5

Is there a way to change the text that says “New Follower” to something else through the CSS? Say make it say “Welcome” instead?


#6

This is not possible at this time, sorry.


#7

Bit late, but this works:

#follower-alert .text::before { 
    content: "New Follower: ";
}