General Information

Thanks for checking out the PixelPop Widget Pack. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop is not required for any portions of this product.

The alerts, overlays, and widgets have been designed for use with OBS Studio, Streamlabs OBS, XSplit, and BEBO. Please make sure your streaming software is up to date before using this product. If you are not familiar with how to set up and use streaming software, we strongly suggest checking out the below tutorial before moving on:

OBS Studios Tutorials by NerdOrDie

Before You Install

Fonts Used

If you’d like to match the style of the overlay and alerts, use the fonts listed below.

  • Anton – This is the primary font used
  • Roboto – This is used for the text box

To download Google fonts, simply create a selection of fonts, open the drawer at the bottom of the screen, then click the “Download” icon in the upper-right corner of the selection drawer. You can download the fonts to use in mock-ups, documents, or locally on your machine.

Colors Used

Color 1: #64E8DE
Color 2: #8a64EB
Text Color: #74ADE6


Installation Guide

Installing the Alerts

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as “PixelPop Alerts”. The import link will only override your alert package. This means you combine these alerts with any other scene collection you’ve made in Streamlabs. If you want to save your old alerts, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software. We recommend setting the size to at least 1920 wide and 700 tall (more height is recommended if using messages). If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Once you’ve added this into your streaming software test the alerts to make sure they’re working properly.

Delaying Text-to-Speech

If you’re planning on using text-to-speech you may need to delay them from being read, as there is an intro animation. To do this, you can change the Alert Text Delay in the Streamlabs base options. If you’re using alert variations (such as re-subs) you will need to  update in the variations as well.

Custom Alert Options

These options are found in the Custom Fields tab.

  • Font size – The font-size you want to use for your alert, everything will be dynamically calculated from this.
  • Skew Degree – How much to skew the animation
  • Top Line – Changed the text templates used for each alert. You can use dynamic tags like {name}, {amount}, {count}, and {months} in these text boxes.
  • Top Line Font Family – The font family to use for the alerts.
  • Bottom Line – Changed the text templates used for each alert. You can use dynamic tags like {name}, {amount}, {count}, and {months} in these text boxes.
  • Bottom Line Font Family – The font family to use for the alerts.
  • Message Font – The font family to use for the alerts.
  • Color 1 – This will control the colour 1 (left) in the gradient
  • Color 2 – This will control the colour 2 (right) in the gradient
  • Text Color – This is the colour of the Top Line text
  • Pixel Explosion – This is if you want to enable the pixel explosion.
  • Pixel Shape – You can change the shape of the pixel explosion using this drop down
  • Pixel Count – How many pixels do you want to appear, for best results use 60-75
  • Pixel Outro Delay – How long do you want the pixels to appear on the screen, this is in seconds

Once you’ve downloaded and unzipped the files from Nerd or Die, open up the files included. You’ll see a folder for the event list and standard alerts.

Event List

  1. Click the Widget Quick Setup link in your downloaded files to begin installing this event list.
  2. If you’d like, choose “Create Profile” and name it something appropriate such as “Uplink”. The import link will only override your event list. This means you can combine this event list with any other scene collections you’ve made in Streamlabs. If you want to save your old event list, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Widget URL” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software. We recommend using a size of at least 1000 by 1000.
  6. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your event list box is already added in.

Fire off a few test events to make sure that things are working properly.

Streamlabs Base Options

  • 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 have no effect on this widget
  • Font — allows you to pick the font family user in this package, the default font is Rajdhani.
  • Animation and Animation Speed — will have no effect on this widget
  • Fade Time — will hide the widget after X seconds, 0 always displays the widget.
  • Other Options — will allow you to flip the widget. For example, enabling the Flip Y will make the events come from the bottom. Flip X will enable the animations coming from the right side .
  • DO NOT — change the custom HTML/CSS options unless you know HTML/CSS/JS – we do not support custom changes.

Custom Options

These options are found in the Custom Fields tab.

  • Space between between each event – The space between each event
  • Username Font – The font to use for the names
  • Username Font Size – The font-size for the names
  • Username Text Color – The font color for the names
  • Tag Message Font – The font to use for the events
  • Tag Font Size – The font-size for the event
  • Tag Text Color – The font color for the names
  • Background Color – Background color for the event
  • Opacity of background (%) – Opacity of the background color
  • Skew Degree – How much to skew the animation
  • Color 1 – Icon Box Color – Background color gradient for the icon box (left side)
  • Color 2 – Icon Box Color – Background color gradient for the icon box (left side)
  • Icon Color – Color of the icon

The widgets included in this package are set up specifically for Streamlabs users and some utilize the customization options now available.

  1. Click the appropriate “Quick Setup” link in your downloaded files (widgets folder) to begin installing these alerts.
  2. If you’d like, choose “Create Profile” and name it something appropriate such as “PixelPop”. The import link will only override the widgets that you’re choosing to install. For example: if you’re importing the design for a donation goal, this will not effect your alerts or goal widgets.
  3. Select “Use” for the profile you want to import into.
  4. Copy your widget URL.
  5. Paste this URL as a “Browser Source” in your streaming software. We recommend setting the size to at least 1920 wide by 700 tall. If you’re using the StreamLabs OBS .overlay file, you may not need to complete this step if your widget boxes are already added in.
  6. You will need to start a goal in Streamlabs in order to see the widget appear

Editing the Goal Widgets

You can find custom options for goal widgets in the Settings > Custom Fields tabs.

Goal Progress

  • goalTopFont – The font you want to use for the goal title
  • goalTopFontSize – The font size want for the goal title
  • goalTopFontColor – The font color for the goal title
  • goalBottomFont – The font you want to use for the counter and end date
  • goalBottomFontSize – The font size want for the counter and end date
  • goalBottomFontColor – The font color for the counter and end date
  • percentageFont – The font you want to use for the percentage number
  • percentageFontSize – The font siue you want for for the percentage number
  • percentageFontColor – The font colour want for the percentage number
  • goalWidth – Width of the goal
  • goalHeight – Height of the goal
  • progressThickness – This controls the thickness of the progress bar outline
  • color1 – Colour 1 for gradient you want to use
  • color2 – Colour 2 for gradient you want to use
  • goalVerticalOffset – Change this value to move the goal up and down in your browser source (lower the number the higher it moves)
  • goalHorizontalOffset – Change this value to move the goal left and right in your browser source (lower the number the more to the left it moves)
  • goalHorizontalPosition – Change this to positoin the goal in another position (left, middle, right)
  • prefix – This controls the prefix for the counter (eg $100 / $100)
  • suffix – This controls the suffix for the counter (eg 100 / 100 followers)

Goal Completion

  • fontSize – Font size of the text
  • topFont – Font for the text
  • text – Text you want to display
  • textColor – Colour of the text
  • bottomFont – Font for the sux text
  • alertType – Sub text you want to display
  • skewDegree – How much do you want to skew it by
  • pixelExplosion – Do you want to enable the pixel explosion
  • pixelCount – How many pixels to display
  • pixelOutroDelay – How long do you want the pixels to display on the screen for (every 1000 is 1 second)
  • pixelShape – What shape pixels do you want (square, circle, triangle)
  1. Click the Chat Box Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as “PixelPop”. The import link will only override your chat package. This means you combine these alerts with any other scene collection you’ve made in Streamlabs. If you want to save your old alerts, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Custom Chat Box Options

These options are found in the Custom Fields tab.

  • Chat Size – How many lines to limit the chatbox to
  • Space between between each message – The space between each chat message
  • Chat Username Font – The font to use for the names
  • Chat Username Font Size – The font-size for the names
  • Chat Message Font – The font to use for the messages
  • Chat Message Font Size – The font-size for the messages
  • Chat Message Text Color – The font color for the messages
  • Background Color – Background color for the event
  • Opacity of background (%) – Opacity of the background color
  • Skew Degree – How much to skew the animation
  • Color 1 – Line separator color – Background color gradient for the line separator
  • Color 2 – Line separator color – Background color gradient for the line separator

Color Presets Recommendations

Blue/Green
Color 1: #0CF2AD
Color 2: #00B4FC
Text Color: #26D4D3

The Doc
Color 1: #F40F1A
Color 2: #333333
Text Color: #9E0E18

Shinobi
Color 1: #FFF432
Color 2: #0C5ABB
Text Color: #8FAA7F

Galaxy
Color 1: #5238C9
Color 2: #D2599D
Text Color: #913AA7

Dawn
Color 1: #FEC180
Color 2: #FF8993
Text Color: #FDBC84

Usage Terms

The user may use these alerts for personal and commercial use. It is intended for one (1) user and one (1) device only. These usage permissions do not expire. Re-distribution is strictly prohibited. The alert graphics and code remain the property of Twitch Temple and Nerd Or Die unless written permission is granted.

Please refer to our Terms and Conditions for more information.

Future Reiterations, Errors and Updates

This version of the alert is provided as is. If there are missing elements or you think something critical needs addressing, please contact us outlining the issue and provide the email used to purchase the product. You are allowed up to 5 downloads per product.

Please follow @NerdOrDieCom on Twitter for update information.


Changelog

To receive these updates simply re-download the product via the email link, or on your account page when logged in.

  • No major updates yet!