v1.3.2.3
AlertTicker Card v1.3.2.3
12 new features · 2 bug fixes
✨ What's New
🎨 8 Spectacular 3D Themes
Eight brand-new themes designed for maximum visual impact using layered CSS animations and CSS 3D transforms. Each brings a unique cinematic effect to every alert slide.
| Theme | Category | Effect |
|---|---|---|
portal |
🚨 Critical | Two counter-rotating conic-gradient discs form a crimson dimensional vortex; the icon spins and pulses with each cycle |
void |
🚨 Critical | A 3D-perspective accretion disk spins around a deep violet core — a cosmic black hole in your dashboard |
volt |
Horizontal CRT scanlines + an electric bolt that discharges every ~1.2 s; icon strobes on impact | |
nebula |
Three independently drifting gas clouds (purple · blue · teal), softly blurred with separate animation timing | |
prism |
ℹ️ Info | A skewed rainbow light sweep crosses the card; the icon cycles through full-spectrum drop-shadows |
arcade |
ℹ️ Info | Tron-style 3D perspective grid scrolling toward the viewer, monospace badge font |
diamond |
✅ OK | Crystalline facet overlay + specular shimmer that sweeps left-to-right; icon catches light with a gentle tumble |
quantum |
✅ OK | Two atomic orbital rings rotating in opposite directions in CSS 3D perspective around a pulsing nucleus |
alerts:
- entity: binary_sensor.front_door
state: "on"
theme: portal # or: void · volt · nebula · prism · arcade · diamond · quantum
message: "Motion detected"All 8 themes are fully compatible with ha_theme: true — decorative 3D layers fade to ~15–20% opacity and badge colors follow HA semantic color variables (--error-color, --warning-color, etc.).
📐 icon_size — Per-alert Icon Size Override (#128)
New per-alert option to override the default icon size with any CSS value. Useful when different icon types (e.g. mdi:battery vs a thin sensor state icon) have different visual weights at the same nominal size.
alerts:
- device_class: battery
use_ha_icon: true
icon_size: "1.2em" # shrink battery icon to match other alertsAccepts any CSS length: em, px, rem. Configurable in the visual editor under the icon section.
🖼️ HA Theme Card Variables (#129)
The card now fully respects all three standard Lovelace card CSS variables:
| Variable | Effect |
|---|---|
--ha-card-border-radius |
Card corner rounding (was already supported) |
--ha-card-box-shadow |
Applied to :host — theme-defined shadows now render correctly |
--ha-card-border-width + --ha-card-border-color |
Used as border source when card_border is not explicitly enabled |
No config changes required — any HA theme that sets these variables will automatically apply to the card.
🎨 card_background — Custom Background / Transparency (#130)
New global toggle that overrides the alert theme's background with a custom color or the HA theme variable.
card_background: true # use --ha-card-background from HA theme
card_background: "rgba(20,20,30,0.7)" # fixed semi-transparent dark background
card_background: "rgba(255,255,255,0.05)" # near-transparent glass effectWhen true, uses var(--ha-card-background) automatically so the card blends with other dashboard cards. Toggle and color picker (with opacity slider) available in the visual editor under Layout & Appearance.
🔗 Jinja2 Templates in navigation_path (#126)
tap_action.navigation_path (and hold_action, double_tap_action) now resolves {{ states('...') }} and {{ state_attr('...','...') }} templates at the moment of the tap, enabling dynamic navigation based on entity state.
tap_action:
action: navigate
navigation_path: "{{ states('sensor.room_presence') }}"The same mini-evaluator used for message fields handles the template synchronously at tap time. If the template is too complex for the local evaluator, the raw string is used as a fallback.
🐛 Bug Fixes
| Fix |
|---|
Music player cover art invisible with ha_theme: true (#119) — the blanket [class$="-bg"] { opacity: 0.25 !important } HA theme rule was matching .mu-art-bg, dropping album art to 25% opacity. Fixed with :not(.mu-art-bg) exclusion + explicit dark base color for the player container. |
Grouped alert snooze ignores snooze_default_duration — 💤 on a group slide always opened the duration menu even when snooze_default_duration was set. Fixed by applying the same fixed-duration logic to the group code path for an immediate one-tap snooze. |
📦 Installation
HACS (recommended)
Search for AlertTicker Card in HACS → Frontend, or click:
Manual
Download alert-ticker-card.js and alert-ticker-card-editor.js from this release and copy both files to /config/www/. Then hard-reload your browser (Ctrl+Shift+R).
If this card saves you time, consider buying me a coffee ☕
