Retro Computer Event List Widget
Thanks for downloading our Retro Computer Event List Widget
Here you will find instructions on how to set everything up and an in-depth description of its possibilities.
⚠️ Take note: This widget is hosted on StreamElements and works only with StreamElements donations — make sure you have a StreamElements account before setting it up!
Setup Guide
- Log in to Streamelements with your Youtube or Twitch account
- Go to the “2. Widget” folder in the package you’ve downloaded
- Pick the file that corresponds to your streaming platform (Twitch or YouTube) and double-click to install it.
Voila! Your widget is installed!
Widget Customization
- Pick your widget in your StreamElements dashboard and click “Edit”
- Click on “Layers” and go to “Retrp Computer Event List”
- Go to the “Settings” tab
- Woohoo, here you can customize everything to your taste :)
Customization Options
⚠️ IMPORTANT
For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!
Design
Tailor the design of your widget to match your style with a range of customizable settings. These options let you adjust text characteristics, spacing, and other elements for a polished and personalized appearance.
| Name | Description |
|---|---|
| Font Name | Choose from various Google Fonts for your text. |
| Font Weight | Set the thickness of your font. |
| Highlight Font Weight | Adjust the weight of highlighted text. |
| Text Alignment | Align your text to the left, center, or right. |
| Font Size | Determine the overall size of your font. |
| Top Bar Font Size | Customize the font size specifically for the top bar. |
| Icon size | Adjust the size of icons within the widget. |
| Padding | Set the space between messages and widget borders. |
| Spacing | Control the distance between separate events. |
| Border Size | Choose the thickness of borders around elements. |
| Top Bar Size | Define the size of the top bar within the widget. |
| Hide Top Button Icons | Toggle to show or hide control icons on the top bar. |
Behavior
| Name | Description |
|---|---|
| Max Events | Set the maximum number of events that can be displayed simultaneously on your widget. |
Global Event Controls
This widget offers two distinct color modes to personalize your events: Global and Event-Specific. The Global Controls allow you to establish a uniform color scheme across all events, ensuring a cohesive visual experience. When you set the Icon Color, Font Color, and Background Color in the Global Controls, these choices become the default colors for every event within the widget.
To activate the global color settings, it's necessary to adjust each event's individual settings. You'll find an option titled "Overwrite Global Color" within the settings of each event. By default, this may be enabled, allowing you to assign unique colors to that particular event. However, if you prefer a harmonized color theme across all events, you'll need to disable the "Overwrite Global Color" option for each event. Once disabled, the global color settings will take precedence, ensuring that all events reflect the universal color choices you've selected.
| Name | Description |
|---|---|
| Global Icon Color | Set a universal color for all icons. |
| Global Message Color | Choose a consistent color for all messages. |
| Global Top Bar Color | Define a color for the top bar across the widget. |
| Global Font Color | Select a global color for all text. |
| Global Label Color | Customize the color of all labels. |
| Global Border Color | Set a uniform color for all borders. |
| Global Buttons Fill Color | Choose a background fill color for all buttons. |
Specific Event Controls
| Name | Description |
|---|---|
| Enable X Event | Toggle to display this specific event type. |
| Overwrite Global Color | Choose to use unique colors for this event, bypassing global settings. |
| X Label | Set a custom label for this event to appear in the top bar. |
| X Icon Color | Customize the color of this event's icon. |
| X Message Color | Select a specific color for messages in this event. |
| X Top Bar Color | Define a unique color for the top bar of this event. |
| X Font Color | Choose a distinct font color for this event. |
| X Label Color | Set a specific color for labels in this event. |
| X Border Color | Customize the border color for this event. |
| X Buttons Fill Color | Choose a background fill color for buttons in this event. |
| X Template | Define a display template using variables like {{icon}}, {{name}}, {{amount}}, and {{plural_amount}} (more on that below) |
| X Pluralization Single | Specify the singular form for word pluralization (e.g., Month, Dollar, Viewer). |
| X Pluralization Multiple | Indicate the plural form for word pluralization (e.g., Months, Dollars, Viewers). |
Note: Pluralization is not available for Follow (Twitch) and Subscriber (YouTube) events.
Text Fields Customization
This section will guide you through tailoring the text fields within your widget to fit your unique style and preferences:
- Utilize any of the five available variables: {{icon}}, {{name}}, {{amount}}, {{plural_amount}}, and {{currency}} to dynamically insert content.
- This widget is designed to support a variety of languages and currency symbols so you can use it in your native language easily.
- Emphasize parts of your text by enclosing them within double angle brackets: << >>. For instance, <<This will be highlighted>>.
- Feel free to insert your own words between the variables for a personalized touch. Example: {{name}} generously contributed {{amount}}.
Variable Definitions
| Variable | Description |
|---|---|
| {{icon}} | Displays the associated event icon. |
| {{name}} | Inserts the user's name (e.g., Mike). |
| {{amount}} | Shows the numeric value of the event (e.g., 200). |
| {{currency}} | Includes the currency symbol (e.g., $). |
| {{plural_amount}} | Adds the plural form of the unit (e.g., Bits for multiple). |
Note: The {{plural_amount}} variable adjusts to match the quantity specified by {{amount}}.
Sample Layouts
Here are a few examples of how you can structure your text fields:
| Layout Format | Example Output |
|---|---|
| {{name}} {{currency}}{{amount}} | Alex $20 |
| {{icon}} {{name}} <<{{amount}} {{plural_amount}}>> | 🌟 Alex 20 Followers |
| NEW <<DONATION>>: {{name}} | NEW DONATION: Alex |
These templates serve as a starting point. You can mix and match variables and text to create a format that resonates with your brand and engages your audience.
Size and Opacity
This widget is fully responsive - you can change its size however you want to and it will always look nice. To do that simply follow these steps:
- Open “Position, size and style” menu
- Change height, width, and opacity to your liking
⚠️ IMPORTANT
For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!
How to Add it to the Streaming Software?
OBS Studio
- Copy the URL of your Widget from the StreamElements dashboard
- Open OBS Studio
- Click “Add Source” (plus icon) in the Sources section.
- Add a “Browser” source, give it a name, and press “Ok”
- Paste the URL you’ve copied
- Set the width to 1920 and the height to 1080
- Press “Ok” and we’re done!
Streamlabs Desktop
- Copy the URL of your Widget from the StreamElements dashboard
- Open Streamlabs Desktop
- Click “Add a new Source” (plus icon) in the Sources section.
- Choose “Browser Source”, give it a name, and press “Add Source”.
- Paste the URL you’ve copied previously
- Set the width to 1920 and the height to 1080
- Now press “Close” and that’s it! Your widget is ready to use!