Hey what’s up everyone it’s Derek from Nerd or Die and I’m proud to introduce you
to Fortified.
This event list design is the first of four parts that we’ll be releasing for this pack
- and in this video I’ll show you how to set everything up and also walk you through
all the options it includes.
This design is created with Fortnite streamers in mind, but can be adapted to work for almost
any other stream, which can be done by taking advantage of the custom fields we built into
this widget.
Let’ get right into it.
The fortified event list will display your latest followers, tippers, subscribers, and
more.
It’s design for use with Streamlabs and can support Twitch, YouTube Gaming, Mixer,
Facebook, and even Periscope.
While there are tons of options included, it’s also created in a way that will allow
you to install and start using in seconds.
The set features custom designed badges for the different types of events, and a system
that lets you change the colors of badges background, badges themselves, and even the
texture that’s seen behind the text.
You can change the color of the text and reposition it as needed.
You can even hide certain parts of the event list, if you’d prefer to.
On the left you’ll see the default design, and then on the right you’ll see a design
I made with a few changes to the custom options.
Anyways, let’s get into how to install this pack, then we’ll take a better look at each
option.
First, you’ll want to download and extract the files from NerdOrDie.com - for this video,
I’ll just put the event list folder on my desktop.
We’ll see a few a few files in the main folder.
The first I want to point out is the Fortified setup guide.
You’ll want to click this link to get you to our setup guide page.
This page details the process we’ll cover in this video and also includes helpful images
about the widget.
Next, you’ll find the Fortified Event List Setup for Streamlabs file.
To start
Double click the Fortified Event List Setup for Streamlabs link in your downloaded files.
If you need to log in to Streamlabs, do so.
If you’d like to keep this event list separate from other widget profiles you’ve made,
choose “Create Widget Theme” and name it something appropriate such as “Fortified”.
The import link will only override your event list.
This means you can combine this event list with any other Widget Themes you’ve made
in Streamlabs.
So, if you don’t want to override your current event list, then create a new widget theme.
Next, select “Use” for the profile you want to import into.
After a little bit, you should be brought into your new profile, with the event list
imported.
You may notice the preview area does not properly animate the event list - don’t worry if
it doesn’t, this is completely normal.
This area will only be used for looking at the design, and not the animations.
Let’s add this into OBS Studio, we’ll work on customizing it later.
Navigate to “Widget URL” and copy your unique URL.
Paste this URL as a “Browser Source” in your streaming software.
We recommend setting the size to at least 600 wide and 1000 tall.
This size may change depending on your customization options.
One thing I want to note is that we made this event list a lot bigger than we expect it
to be in most streams - this is so that if you do want it to be larger, the resolution
will be crisp and clear.
You may want it at its natural size, but we do expect most people to scale it down, especially
on your scenes with gameplay.
If you need to scale down, you can do so directly inside of OBS Studio.
If you’re using the StreamLabs OBS, you may not need to complete this step if your
event list box is already added in - however, you’ll probably need to edit the width and
height to fit.
You can hit the test buttons a few times to get an idea about the overall size of the
widget.
Once you’ve sized everything appropriately we can move onto the options.
As I said before, there are a lot of options.
Before we change any, I want to mention that we will sometimes need to refresh the page
or the event list widget inside of our streaming software, before all settings can take effect.
So, if things aren’t working properly, just refresh the page or refresh the cache of your
browser source in order to get everything to display as intended.
In OBS Studio you can easily do this by clicking the “Refresh cache of current page” button
in your browser source properties.
Also, we’re planning on included recommended style options on our website, to give you
some ideas on how to get different looks and styles for this event list.
Let’s start with the default ones included in Streamlabs.
Options like Theme and Theme Color will have no effect on this widget.
Enable Events allows you to decide which events you want to display inside the widget.
Min Options let you set how many viewers for hosts, bits, or raiders for raids will trigger
an event.
Max Events let’s you change how many events are displayed at once.
Background Color is only for preview purposes.
Text Color will change the color of the usernames Font allows you to pick the font family for
usernames in this package, the default is “Luckiest Guy”.
Animation and Animation Speed will have no effect on this widget.
Fade Time will hide the entire widget after X seconds, 0 always displays the widget.
The Other Options will allow you to flip the widget.
Enabling Flip Y will make the events come from the bottom towards the top.
Enabling Flip X will make the events aligned to the right side.
Please DO NOT change the custom HTML/CSS options unless you know HTML/CSS/JS – we do not
support custom changes
So, I’ll change a couple of the options around here and hit save settings.
You should see that the layout changes, but sometimes if we scroll up to the top and test
the events, they might not work.
To fix this, just refresh the cache inside of OBS Studio and run the tests again.
Now, I’ll see my animations coming from the right side and the bottom area when I
test the events.
For the remainder of this video I’ll disable Flip X and Y and hit save settings one more
time to get things back the way they were.
That covers the basic options, but let’s take a deeper look at what else lies under
the hood of this event list.
Go ahead and click the “Custom Fields” tab to begin.
DO NOT click “reset code” or “remove overlays”.
These options are in place for those that like to tinker around and make the designs
more to their liking.
First, we have
Badge Background Color - there’s a solid color behind each badge, you can use the color
picker or enter in a specific color code here Badge Base Color will change the color of
all the badges - personally, I like to keep the colors more on the darker side, but it’s
really up to you on what you think looks best here
Badge Scale lets you make the badges larger or smaller
Text Alignment is pretty straight forward and allows you to decide which side your text
will be aligned to.
Typically this is best to leave on centered, but if you decide to hide some of the elements,
it might look better to set this to right or left
Text Padding is the space between the text and the edges of the boards.
Again, this should be fine at its default here, but if you want a more minimal design,
you can decrease this option to get the text closer to the badges
Text shadow color lets you change the shadow color behind all the text.
A tip here, it’s usually a good idea to have this be a contrasting color from your
main text colors.
So if your text is light, you’ll want this to be dark and vice versa… however, sometimes
it can look good when you don’t follow this rule of thumb
Fade Out Position is the number that you want your events to start fading out at.
So, let’s say you have 5 total events shown, you can set this to 4, and then events number
4 and 5 will have a faded effect Fade Out Opacity is the opacity of the faded
out events.
From our example above, events 4 and 5 will be at 50% opacity
Event Spacing is the vertical margin between each event
Show tag allows you to hide the tag in your events, which is typically says “follow,
subscriber, etc.”
Tag Font Color is the color of the tag, if it’s not hidden of course
Tag Font Family can be used to select a separate font for the tag section
Tag Font Size lets you choose bigger or smaller text for the event tags
Name Offset and Tag Offset allow you to adjust the Y position of these text areas.
This allows you to put your tags above the username, or simply adjust them.
You’ll find these options useful if you’re changing the text size or font families
Show Badge Background, Board Texture, and Board Frame allows you to hide these respective
elements.
If you hide the board texture, a solid color will take its place
Solid Background Color is the color that will be in place of the board texture
Solid Background Opacity lets you change the opacity of this shape.
Let’s say you don’t want any shape or color behind your username and tag, then simply
set this to 0 to hide them completely
And yeah… that’s just about it.
So, I’ll wrap up a few of the tweaks to the design I want to make, and then hit save
changes.
After that, we just need to refresh the source in order for our animations to work properly.
Let’s test a few out, and hopefully things are working well.
I do hope that you can see we put quite a lot of effort into this in hopes that you
can make it look and work the way you need it to.
With that said, there might be bugs here or there, so if you spot any, please let us know
via our contact form on our website.
We try to get back to you as soon as possible.
Please let me know in the comments below what you think about this product or if you have
any questions at all.
If the video helped you out, don’t forget to leave a like
Also, if you’re interested in more streaming and gaming related content, then don’t forget
to subscribe with notifications on.
We have more additions to this Fortified design, which I think you don’t want to miss.
Thanks so much for watching, and I’ll see you next time.