> ## Documentation Index
> Fetch the complete documentation index at: https://docs.1up.vision/llms.txt
> Use this file to discover all available pages before exploring further.
# Twitch Polls & Predictions
> Show live Twitch channel polls and predictions on your overlay with animated results bars.
## What is the Twitch Polls Layer?
The **Twitch Umfragen** layer displays **channel polls** and **predictions** from Twitch directly on your stream overlay. When you start a poll or prediction on Twitch, the question and options appear in the layer and update live as viewers vote.
You can switch the layer between:
* **Polls** – standard channel polls (multiple options, vote counts).
* **Predictions** – channel point predictions (always two outcomes, channel points per option).
***
## Adding the Layer
In Vision, open the overlay you use in OBS (or create a new one).
Click **Add layer** and choose **Twitch Umfragen** (or **Twitch Polls**).
In the layer settings, set **What should be displayed?** to **Polls** or **Predictions** depending on what you run on stream.
Drag the layer where you want it. The block grows from the bottom or top edge of the layer box (see **Poll display**).
Save the overlay and reload your browser source in OBS if it is already open.
Use a **separate layer** for polls and one for predictions if you want both on stream at different times. Each layer only reacts to the mode you selected.
***
## Layer Settings
| Setting | What it does |
| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **What should be displayed?** | **Polls** or **Predictions** – must match what you start on Twitch. |
| **Preview** | Mock data in the editor. Turn off to see live events in the editor while testing. |
| **Preview options** | Number of mock choices for polls (1–10). Predictions always show 2 options. |
| **Poll display** | **Build upward** or **Build downward** – where the block is anchored inside the layer. |
| **Hide while awaiting result** | Predictions only. Show the layer while betting is open, hide it once the prediction locks, then bring it back with the result when it resolves. Useful for long-running predictions (e.g. a football match). Off by default – the layer stays visible the whole time. |
| **Hide after end** | Seconds to keep results visible after a poll/prediction ends, then fade out. |
| **Fonts & colors** | Question font, option font, container background, bar colors, corner radius, bar height. |
| **Animations** | Standard layer in/out animations when a poll begins and ends. |
### Recent polls
When the layer is set to **Polls**, the layer card can show a short list of your last completed polls (title, winner, time). This is for reference in the editor only.
***
## On Stream vs in the Editor
* **OBS / browser source:** Live Twitch events appear automatically when the overlay is open.
* **Editor with preview on:** You see sample options to design the layout.
* **Editor with preview off:** Live events appear in the canvas the same way as on stream.
For local development or testing without a public webhook URL, use the production overlay URL in OBS; Twitch sends events to Vision’s servers, not to localhost.
***
## Styling
Fonts, colors, corner radius, bar height, and animations are configured in the layer card. For finer control, use **Advanced → Theme → Custom CSS** on the layer.
With custom CSS you can style the **question/title** and **option labels**, change **progress bars** (track, fill, leading color), highlight the **leading option**, and add borders, shadows, or glass effects on the container. Basic CSS knowledge (selectors, colors, spacing) is enough.
### Where to add CSS
In the overlay editor, select your **Twitch Umfragen** layer.
In the layer panel, open **Advanced → Theme**.
Add your rules under **Custom CSS**. Changes apply on the overlay when saved.
Reload the browser source or use live sync to verify on stream.
### How selectors are scoped
Vision automatically scopes your CSS to the selected layer so it does not affect other layers.
* Your layer’s HTML `id` is derived from the **layer name** (spaces become hyphens), e.g. a layer named `Twitch Polls` → `#Twitch-Polls`.
* You can use the placeholder **`#layer`** in selectors; Vision replaces it with that id.
* If you omit `#layer`, selectors are prefixed with your layer id automatically.
Example:
```css theme={null}
#layer .twitch-poll__title {
font-size: 28px;
text-transform: uppercase;
}
```
### DOM structure
Rough hierarchy rendered on stream:
```
.twitch-poll
└── .twitch-poll__container
├── .twitch-poll__title
└── .twitch-poll__choices
└── .twitch-poll__choice (× n)
├── .twitch-poll__choice-header
│ ├── .twitch-poll__choice-label
│ └── .twitch-poll__choice-metric
└── .twitch-poll__bar.twitch-poll__bar-track
└── .twitch-poll__bar-fill
```
### CSS class reference
#### Root & container
| Class | Description |
| ------------------------- | ------------------------------------------------------------------------- |
| `.twitch-poll` | Outermost wrapper of the poll UI inside the layer. |
| `.twitch-poll__container` | Card with background and padding; anchored to top or bottom of the layer. |
| `.twitch-poll__title` | Poll or prediction question text. |
| `.twitch-poll__choices` | Vertical stack of all options. |
#### Options
| Class | Description |
| ----------------------------- | ---------------------------------------------------------------- |
| `.twitch-poll__choice` | One answer/outcome row (label + bar). |
| `.twitch-poll__choice-header` | Row with option title and vote/points count. |
| `.twitch-poll__choice-label` | Option title text. |
| `.twitch-poll__choice-metric` | Numeric value (votes for polls, channel points for predictions). |
#### State classes
| Class | When it applies |
| ------------------------------------- | --------------------------------------------------------------------------- |
| `.twitch-poll__choice--leading` | Option with the highest votes or channel points (always on the top option). |
| `.twitch-poll__choice--leading-final` | Leading option during the fade-out after the poll/prediction ends. |
| `.twitch-poll__choice--winner` | Winning option after end (winner bar color from layer settings). |
| `.twitch-poll__choice--loser` | Non-winning options after end (default: 80% opacity, scale 0.8). |
#### Progress bars
| Class | Description |
| ------------------------- | ---------------------------------------------- |
| `.twitch-poll__bar` | Bar element (track + fill). |
| `.twitch-poll__bar-track` | Full-width track behind the fill. |
| `.twitch-poll__bar-fill` | Filled portion; width reflects share of total. |
Colors, fonts, bar height, and corner radius from the layer settings are applied as **inline styles**. Use equal or higher specificity in Custom CSS (e.g. `#layer .twitch-poll__bar-fill`) to override them.
Polls and predictions use the same classes. The only difference on stream is the **metric** (vote count vs channel points) and that predictions always have **two** options.
### Example styles
#### Card with blur and border
```css theme={null}
#layer .twitch-poll__container {
background: rgba(10, 10, 20, 0.75);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 20px;
}
```
#### Title emphasis
```css theme={null}
#layer .twitch-poll__title {
font-size: 26px;
font-weight: 700;
letter-spacing: 0.02em;
margin-bottom: 4px;
}
```
#### Bars and leading option (Twitch-style purple)
```css theme={null}
#layer .twitch-poll__bar-track {
background: rgba(255, 255, 255, 0.12);
border-radius: 10px;
}
#layer .twitch-poll__bar-fill {
background: #3b82f6;
border-radius: 10px;
}
#layer .twitch-poll__choice--leading .twitch-poll__bar-fill {
background: #9146ff;
}
#layer .twitch-poll__choice--leading .twitch-poll__choice-label {
font-weight: 700;
}
#layer .twitch-poll__choice--winner .twitch-poll__bar-fill {
background: #9146ff;
}
```
#### Loser options (after poll ends)
```css theme={null}
#layer .twitch-poll__choice--loser .twitch-poll__choice-label {
opacity: 0.85;
}
#layer .twitch-poll__choice-metric {
font-variant-numeric: tabular-nums;
opacity: 0.9;
}
```
***
## Letting Your Mods Help
Grant moderators overlay edit access if they should adjust layout or colors. Only the channel owner’s Twitch connection is used for live data; mods edit the overlay design like any other layer.