Skip to content

v1.3.2.3

Choose a tag to compare

@djdevil djdevil released this 04 May 18:58
31e69dc

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 ⚠️ Warning Horizontal CRT scanlines + an electric bolt that discharges every ~1.2 s; icon strobes on impact
nebula ⚠️ Warning 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 alerts

Accepts 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 effect

When 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:

Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

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 ☕

Buy Me A Coffee