Releases: djdevil/AlertTicker-Card
Release list
v1.3.7
AlertTicker Card — v1.3.7
🩹 Patch Fix
Test mode preview shows wrong alert when config has group: true alerts (#173)
When at least one alert had group: true, the test mode preview selected the wrong card for any alert at priority 2, 3, or 4. Priority-1 alerts appeared correct and all other priorities showed an unrelated alert.
Root cause: The test mode findIndex ran on the pre-grouping active array to find the previewed alert's position. The grouping pass then collapsed N group: true entities into 1 slide, shifting the positions of every alert that came after the grouped entries. Because _currentIndex was set from the pre-grouping index but _activeAlerts was updated to the post-grouping array, the card rendered the wrong alert.
Priority-1 alerts were unaffected only because they sort before the group: true entries and are not shifted.
Fix: The test mode index resolution now runs after the grouping pass on the final _activeAlerts array, keeping _currentIndex always consistent with what is actually displayed.
No configuration changes needed.
✨ New Features
assist action — open the HA voice assistant from any tap/hold slot (#180)
You can now set action: assist on any action slot to open the Home Assistant voice assistant dialog directly from the card.
Supported slots: tap_action, hold_action, double_tap_action, snooze_action, clear_tap_action, clear_hold_action, clear_double_tap_action, group_tap_action, group_hold_action.
YAML example:
tap_action:
action: assist
pipeline_id: "" # optional — leave empty for the HA-preferred pipeline
start_listening: true # optional — true opens the mic immediatelyParameters:
| Parameter | Type | Default | Description |
|---|---|---|---|
pipeline_id |
string | "" (preferred) |
ID of the voice pipeline to use. Leave empty to use the HA-preferred pipeline. |
start_listening |
boolean | false |
When true, the microphone opens immediately without requiring a tap on the mic button. |
Both parameters are also available in the visual editor action dropdowns for all supported action slots, with full translations in all 12 languages (it, en, fr, de, nl, vi, ru, da, cs, pt, es, tr).
{area} placeholder in alert messages (#166)
You can now use {area} in any message field to display the Home Assistant area name the entity (or its parent device) belongs to.
Example:
alerts:
- entity: binary_sensor.motion_kitchen
message: "Motion detected in {area} — {name} is {state}"Result: Motion detected in Kitchen — Motion Kitchen is on
How it resolves:
- Checks if the entity itself has an area assigned in HA
- Falls back to the parent device's area if the entity has none
- Returns an empty string if no area is assigned
Supported fields: message, secondary_text, tts_message, push_notify_title, push_notify_message, group_expanded_message — and any field that accepts placeholders. The overlay banner engine also resolves {area} correctly.
📦 Update Instructions
- Download
alert-ticker-card.jsandalert-ticker-card-editor.js - Replace both files in your
www/folder (or the path you set in Resources) - Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
HACS users: update from the HACS panel — no manual steps needed.
Full changelog: CHANGELOG.md
☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!
v1.3.6.4
AlertTicker Card — v1.3.6.4
🩹 Patch Fixes
Root cause — two separate problems:
-
WebSocket reconnect not detected: When HA restarts, the
weather/subscribe_forecastWebSocket subscription is killed server-side. The subscribe guard (entity !== forecastEntity) blocked re-subscription after reconnect since the entity name hadn't changed. Forecast data became permanently stale or blank. -
Card remount not triggering re-subscribe:
disconnectedCallbacknulled_forecastUnsubbut left_forecastEntityset, blocking re-subscription on Lovelace remounts (dashboard navigation, panel reload).
Fix: hass.connection.socket is tracked — when it becomes a new object (new WebSocket after HA reconnects), _forecastEntity is reset to force a fresh subscription. _forecastEntity is also reset in disconnectedCallback for clean remounts.
📦 Update Instructions
- Download
alert-ticker-card.jsandalert-ticker-card-editor.js - Replace both files in your
www/folder (or the path you set in Resources) - Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
HACS users: update from the HACS panel — no manual steps needed.
Full changelog: CHANGELOG.md
☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!
v1.3.6.3
AlertTicker Card — v1.3.6.3
🩹 Patch Fixes
disable_animation / clear_disable_animation — animations still playing with show_when_clear: true (#172)
Setting clear_disable_animation: true had no effect when the card was in the show_when_clear mode. All weather widget animations (sun rotation, halo float, cloud drift, shooting star, snowflakes, etc.) continued to play regardless of the flag.
Root cause: The show_when_clear render path wrapped the weather widget in a plain <div> with no at-fold-wrapper class. All animation-play-state: paused rules are scoped to .at-fold-wrapper.atc-no-anim .element — without that ancestor class the selector never matched and atc-no-anim was never effective.
Fix: The wrapper div in the show_when_clear path now carries the at-fold-wrapper class, and atc-no-anim is added to it when disable_animation or clear_disable_animation is set. The same check is also patched for the show_widget_in_cycle slide path.
No configuration changes needed.
Weather widget stops displaying after HA restart (#181)
After a Home Assistant restart, the weather forecast widget went blank and required a browser refresh to recover.
Root cause — two separate problems:
-
WebSocket reconnect not detected: When HA restarts, the
weather/subscribe_forecastWebSocket subscription is killed server-side. The subscribe guard (entity !== forecastEntity) blocked re-subscription after reconnect since the entity name hadn't changed. Forecast data became permanently stale or blank. -
Card remount not triggering re-subscribe:
disconnectedCallbacknulled_forecastUnsubbut left_forecastEntityset, blocking re-subscription on Lovelace remounts (dashboard navigation, panel reload).
Fix: hass.connection.socket is tracked — when it becomes a new object (new WebSocket after HA reconnects), _forecastEntity is reset to force a fresh subscription. _forecastEntity is also reset in disconnectedCallback for clean remounts.
No configuration changes needed.
disable_animation / clear_disable_animation — sun, halo, shooting star, and snowflakes still animating (#172)
Four weather elements were absent from the animation-play-state: paused !important rule: .sun-core (pulsing glow), .sun-halo (floating halo), .w-shooting-star (shooting star trail), .w-snowflake (falling snowflakes). All four are now included.
No configuration changes needed.
📦 Update Instructions
- Download
alert-ticker-card.jsandalert-ticker-card-editor.js - Replace both files in your
www/folder (or the path you set in Resources) - Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
HACS users: update from the HACS panel — no manual steps needed.
Full changelog: CHANGELOG.md
☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!
v1.3.6.2
AlertTicker Card — v1.3.6.2
🩹 Patch Fix
Weather widget stops displaying after HA restart (#181)
After a Home Assistant restart, the weather forecast widget went blank and required a browser refresh to recover.
Root cause — two separate problems that compound each other:
-
WebSocket reconnect not detected: When HA restarts, the
weather/subscribe_forecastWebSocket subscription is killed on the server side. The card uses a subscribe guard (entity !== forecastEntity) to avoid redundant re-subscriptions during normal operation — but this guard also blocked re-subscription after the reconnect, since the entity name hadn't changed._forecastDatabecame permanently stale and the forecast panel went blank. -
Card remount not triggering re-subscribe:
disconnectedCallbacknulled_forecastUnsubbut left_forecastEntityset. If Lovelace remounted the card (dashboard navigation, panel reload), the subscribe guard again prevented a fresh subscription.
Fix:
hass.connection.socketis tracked on everyhassupdate. When it becomes a new object (a new WebSocket is opened after HA reconnects),_forecastEntityis reset tonull, forcing a freshweather/subscribe_forecastsubscription._forecastEntityis also reset tonullindisconnectedCallbackso any remount always starts a clean subscription.
No configuration changes needed.
disable_animation / clear_disable_animation — sun, halo, shooting star, and snowflakes still animating (#172)
Four weather elements were not included in the animation-play-state: paused !important rule and continued to animate even when disable_animation or clear_disable_animation was enabled:
- Sun core glow pulse (
.sun-core—sunBreath) - Sun halo float (
.sun-halo—haloFloat) - Shooting star trail (
.w-shooting-star—shootingStar) - Falling snowflakes (
.w-snowflake—snowFall)
All four selectors are now included, completing full animation suppression for the All Clear weather widget.
No configuration changes needed.
📦 Update Instructions
- Download
alert-ticker-card.jsandalert-ticker-card-editor.js - Replace both files in your
www/folder (or the path you set in Resources) - Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
HACS users: update from the HACS panel — no manual steps needed.
Full changelog: CHANGELOG.md
☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!
v1.3.6
AlertTicker Card — v1.3.6
✨ New Feature
clear_disable_animation — disable weather widget animations independently (#172)
New card-level flag that suppresses all animations in the All Clear weather widget without affecting alert animations:
clear_disable_animation: trueFreezes: rotating sun rays, drifting clouds, twinkling stars, glowing moon, fog, rain, wind, and all other weather condition effects.
The existing disable_animation: true already covers the widget (and now works correctly — see fix below), but clear_disable_animation is the right choice when you want a static weather display while keeping emergency pulse, warning blink, and other alert effects alive.
Available as a toggle in the visual editor under the Weather badge style section (all 12 languages).
🐛 Bug Fixes
disable_animation not suppressing weather clear-widget animations (#172)
disable_animation: true was correctly pausing weather condition elements (fog bands, rain drops, wind lines, etc.) but left four atmospheric elements from _renderWeatherBg still animating:
- Rotating sun rays (
.sun-rays-wrap) - Drifting clouds (
.w-cloud) - Twinkling stars (
.w-star) - Glowing moon (
.w-moon)
Fixed by adding these four selectors to the existing animation-play-state: paused !important rule block. All weather animations in the all-clear widget are now fully suppressed when disable_animation: true is set.
No configuration changes needed.
History close button invisible on mobile / HA app (#179)
The ✕ close button in the history panel existed but was effectively invisible and untappable on mobile devices.
Root cause: The button was styled with font-size: 0.80rem, color: rgba(255,255,255,0.5), no background, no border, and only 2px 4px padding — a near-invisible label with a tiny touch target. On the HA mobile app there is no hover state, so the button never became visible. With ha_theme: true and a light card background, the white text at 50% opacity disappeared entirely.
Fix: Restyled as a visible pill button with:
- Subtle semi-transparent background and border (adapts to dark and light themes)
- Full-opacity text (
rgba(255,255,255,0.85)/ HA theme variable) min-height: 30pxandtouch-action: manipulationfor reliable mobile tapping- Active state for touch feedback
No configuration changes needed.
Test mode showing wrong card when priority ≠ 1 (#173)
When using the editor's test mode to preview a specific alert, changing that alert's priority caused the wrong card to be displayed.
Root cause: Alerts are sorted by priority before rendering. When test mode first jumped to the previewed alert, it stored the alert's sorted-array position in this._currentIndex and then skipped re-evaluation on subsequent updates (guarded by lastAppliedPreviewIndex). When priority was changed in the editor, the active array was re-sorted but this._currentIndex still pointed to the old sorted position — now occupied by a different alert.
Priority 1 appeared to work because sorting to position 0 happened to match the default currentIndex, so the correct card rendered coincidentally.
Fix: The lastAppliedPreviewIndex guard is removed. Test mode now re-resolves the target alert's position in the sorted array on every update. A secondary guard (pi !== this._currentIndex) prevents unnecessary re-renders when the position hasn't changed.
No configuration changes needed.
📦 Update Instructions
- Download
alert-ticker-card.jsandalert-ticker-card-editor.js - Replace both files in your
www/folder (or the path you set in Resources) - Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
HACS users: update from the HACS panel — no manual steps needed.
Full changelog: CHANGELOG.md
☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!
v1.3.5
AlertTicker Card — v1.3.5
🐛 Bug Fixes
Vertical layout renders at double height (#174)
With vertical: true, the card appeared at roughly twice its correct height — the alert content occupied the top half and an equal blank area appeared below it.
Root cause: The card_height centering fix in v1.3.4 (#145) made .atc-inner-clip a flex column container and gave .at-fold-wrapper flex: 1. Vertical mode independently sets height: 100% on .at-fold-wrapper. The two rules together — flex: 1 inside a flex container AND height: 100% on the same element — create a circular size dependency that browsers resolve by doubling the height.
Fix: .atc-inner-clip is reset to display: block inside .atc-vertical, exactly matching its pre-v1.3.4 behavior. The flex centering for card_height remains active for all non-vertical cases.
No configuration changes needed.
Card blank when casting to Google Home (#171)
When casting a Lovelace dashboard to a Google Home display, AlertTicker Card rendered as a completely blank card.
Root cause: The Google Cast runtime declares adoptedStyleSheets on ShadowRoot (so Lit's supportsAdoptingStyleSheets feature-detection check passes), but the setter throws "TypeError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet'" at runtime. This is a Cast runtime bug — it advertises the API but can't handle Constructable StyleSheets objects. Because Lit relies on this path to inject the card's CSS, all styling is silently lost and the card renders blank.
Fix: At load time, ShadowRoot.prototype.adoptedStyleSheets setter is patched with a try-catch wrapper. When the native setter throws (Cast environment), the fallback iterates over each CSSStyleSheet, reads its rules via cssRules, and injects them as a <style> element inside the shadow root. Normal HA browsers take the fast path (native setter succeeds) with zero overhead.
No configuration changes needed.
state list not working in overlay / filter alerts (#176)
Using a list of states to match multiple values (e.g. show when a media player is playing or paused) was partially broken: it worked in the card's render path but not in the cross-view overlay watcher or filter-alert paths.
Root cause: The card render path uses _matchesState, which already handles arrays. The overlay watcher and filter paths use a separate _matchOp helper that did not — it would coerce the array to a string ("playing,paused") and never match.
Fix: _matchOp now short-circuits on array values with the same "is one of" logic used by _matchesState.
Correct config for multiple states:
alerts:
- entity: media_player.living_room
state:
- "playing"
- "paused"
theme: info
message: "Now playing: {state}"No configuration changes needed if you were already using the array syntax — it now works consistently everywhere.
📦 Update Instructions
- Download
alert-ticker-card.jsandalert-ticker-card-editor.js - Replace both files in your
www/folder (or the path you set in Resources) - Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
HACS users: update from the HACS panel — no manual steps needed.
Full changelog: CHANGELOG.md
☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!
v1.3.4
AlertTicker Card — v1.3.4
🐛 Bug Fixes
Weather badge alignment in cinematic style (#167)
The high/low temperature, AQI and humidity row inside the weather badge was missing its base display: flex; align-items: center CSS rule. All other rows (row1, row2, row3) were explicit flex containers, but row-minmax rendered as a plain block element.
In cinematic style — where the badge arranges all rows horizontally — this caused a visible vertical misalignment of the humidity value and the elements that follow it (wind speed, condition label).
Fixed by adding the missing base flex rule to atc-cw-badge-row-minmax. No configuration changes needed.
conditions_logic: or incorrectly triggering on primary state match alone (#168)
When conditions_logic: or was set, the primary entity state check (primaryOk) was accidentally included inside the OR group alongside the conditions. This meant the alert fired if:
- the entity was in the configured state ← (alone, without any condition passing)
- OR any condition was true ← (alone, without the entity being in the configured state)
The correct behavior is:
- the entity must be in the configured state AND
- at least one condition must be true (the OR applies only among the conditions)
# Expected: shows only when door is OPEN *and* alarm is enabled or someone is home
alerts:
- entity_filter: "sensor.interlogix*"
state: "open"
conditions_logic: or
conditions:
- entity: input_boolean.alarm_enabled
state: "on"
- entity: binary_sensor.someone_home
state: "off"Fixed in both the card render path and the cross-view overlay watcher.
Editor "entities match" counter ignoring label_filter and area_filter (#170)
The entity count shown next to the device class and text filter fields in the visual editor only applied its own single filter — it did not take into account any label_filter or area_filter that was also set. This caused the count to be inflated (e.g. "120 entities match" for device_class: temperature even when label_filter: [SMART] reduced the real set to a handful).
The runtime behavior was always correct. Fixed by replicating the same combined filter logic (device_class + text filter + label + area) in both editor counter paths.
Card blank when casting to Google Home (#171)
When casting a Lovelace dashboard to a Google Home display, AlertTicker Card rendered as a completely blank card.
Root cause: The Google Cast runtime declares adoptedStyleSheets on ShadowRoot (so Lit's supportsAdoptingStyleSheets feature-detection check passes), but the setter throws "TypeError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet'" at runtime. This is a Cast runtime bug — it advertises the API but can't handle Constructable StyleSheets objects. Because Lit relies on this path to inject the card's CSS, all styling is silently lost and the card renders blank.
Fix: At load time, ShadowRoot.prototype.adoptedStyleSheets setter is patched with a try-catch wrapper. When the native setter throws (Cast environment), the fallback iterates over each CSSStyleSheet, reads its rules via cssRules, and injects them as a <style> element inside the shadow root. Normal HA browsers take the fast path (native setter succeeds) with zero overhead.
No configuration changes needed.
📦 Update Instructions
- Download
alert-ticker-card.jsandalert-ticker-card-editor.js - Replace both files in your
www/folder (or the path you set in Resources) - Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
HACS users: update from the HACS panel — no manual steps needed.
Full changelog: CHANGELOG.md
☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!
v1.3.3
AlertTicker Card — v1.3.3
✨ New Features
{entity} placeholder in conditions for entity_filter alerts (#163)
When using entity_filter (or device_class, wildcard filters) the matched entity is not known at config time, so conditions requiring a fixed entity ID couldn't reference it. Now you can use entity: "{entity}" (or entity: "this.entity_id") in any condition to dynamically reference the matched entity — enabling compound AND/OR tests on both state and attributes for every expanded entity.
# Show only entities that are both ON and have notification_control = enabled
alerts:
- entity_filter: "alert2.zigbee*"
state: "on"
conditions:
entity: "{entity}"
attribute: notification_control
operator: "="
state: enabledWorks in all condition paths: normal, on_change, and the cross-view overlay watcher.
Per-alert native HA card override (#159)
New card property on each alert. When set, the themed rendering is replaced by any native HA card type — tile, entity, button, glance, custom cards, or anything else HA supports. The card's visibility evaluation, cycling logic, snooze, history, and time windows remain completely intact — only the visual content changes.
alerts:
# Show a tile card instead of the default theme
- entity: sensor.front_door
state: "on"
card:
type: tile
entity: this.entity_id
name: Front door
icon: mdi:door-open
# Custom card
- entity: sensor.smoke
state: "on"
card:
type: custom:mushroom-entity-card
entity: this.entity_id
name: Smoke detectedthis.entity_id placeholder
Use 'this.entity_id' anywhere inside the card config to reference the alert's matched entity. This is especially useful for entity_filter alerts that expand into multiple entities — each slide automatically gets the correct entity ID substituted.
alerts:
- device_class: door
state: "on"
card:
type: tile
entity: this.entity_id # ← resolved to each matched door entityVisual editor
The card field is available as a YAML editor under each alert's settings section in the visual editor — no need to write raw YAML. Available in all 12 supported languages.
Per-alert and card-level animation disable (#157)
New disable_animation flag available at both card level and per-alert level. Suppresses all ambient looping animations without touching the theme styling:
- Emergency pulsing glow + flashing icon
- Warning/calendar blinking dot
- Neon scanning line
- Matrix cursor blink
- Door/window icon swings
- All weather widget effects (aurora, fog, rain, lightning, etc.)
Cycle transitions and ticker scrolling are not affected.
Card-level — silence all alerts at once:
type: custom:alert-ticker-card
disable_animation: truePer-alert — silence a specific noisy alert while others keep animating:
alerts:
- entity: binary_sensor.front_door
theme: door
state: "on"
disable_animation: true # icon won't swing
- entity: binary_sensor.smoke
theme: emergency
state: "on"
# ← still pulses/flashesThe per-alert flag overrides the global setting. Both are available in the visual editor — card-level in the Cycling & Animation section, per-alert in each alert's settings panel (all 12 languages).
Per-alert overlay exclusion + global priority gate (#160)
Two new controls for the cross-view overlay system:
overlay: false per alert
Set overlay: false on any individual alert to prevent it from ever triggering a cross-view overlay banner. The alert continues to appear in the ticker card as usual — only the overlay projection is suppressed.
alerts:
- entity: sensor.routine_info
state: "on"
overlay: false # shows in ticker, never overlaysoverlay_min_priority global threshold
Set a global priority ceiling so only high-priority alerts trigger overlay banners. Alerts with a priority value higher than the threshold are silently excluded from overlay. Defaults to no gate (all alerts can overlay).
overlay_min_priority: 2 # only priority 1 and 2 alerts can overlayPriority scale: 1 = critical, 2 = high, 3 = normal (default), 4 = low.
Both controls work together — overlay: false always wins regardless of priority.
Visual editor
overlay_min_priority is available in the global overlay settings section. The per-alert overlay toggle appears in each alert's settings when overlay mode is enabled. Both are available in all 12 supported languages.
🐛 Bug Fixes (also in this release)
-
card_heightnot applying to the all-clear state (#145) —card_heightonly applied to the active-alert render path, not to the "all clear" card (no active alerts). Setting it had no visible effect until an alert was simulated. Fixed by wrapping the clear card in the sameatc-inner-clipcontainer used by active alerts. Additionally, whencard_heightis larger than the natural content size, the content is now vertically centered in the available space. -
TypeError: css is not a function(#155) — crash on mount in certain HA builds whereLitElement.prototype.cssis undefined. Fixed with a standards-compliant inline fallback. -
Overlay fires outside configured
time_range(#153) — cross-view overlay banners ignoredtime_rangewindows. Fixed by adding the_evalTimeRange()guard to the overlay watcher's_evalAlert(). -
snooze_actionnot fired on swipe (#146) — swiping left withswipe_to_snooze: trueskippedsnooze_actionexecution. Fixed for full parity with the snooze button tap. -
card_background: trueignoring HA theme (#129) —var(--ha-card-background)was unresolved inside shadow DOM. Fixed viagetComputedStyle(this)on the host element.
📦 Update Instructions
- Download
alert-ticker-card.jsandalert-ticker-card-editor.js - Replace both files in your
www/folder (or the path you set in Resources) - Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
- Clear the HA frontend cache if the editor still shows the old version
HACS users: update from the HACS panel — no manual steps needed.
Full changelog: CHANGELOG.md
☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!
v1.3.2.6
AlertTicker Card — v1.3.2.6
🐛 Bug Fixes
TypeError: css is not a function (#155)
In certain HA builds or loading contexts, LitElement.prototype.css is undefined. The card crashed on mount before rendering anything.
Fixed by adding a standards-compliant fallback: if LitElement.prototype.css is not available, a css tagged-template function is constructed inline that produces the CSSResult-compatible object ({ cssText, _$cssResult$: true }) that Lit's static get styles() expects.
Overlay fires outside configured time_range (#153)
The overlay watcher's _evalAlert() helper checked _evalVisibleTo() but never _evalTimeRange(). Cross-view overlay banners appeared at any hour regardless of the configured window (e.g. time_range: { from: "21:00", to: "07:00" }).
Fixed by adding a _evalTimeRange(a) guard at the top of _evalAlert(), mirroring the check already present in the card's own _computeActiveAlerts().
snooze_action not fired when swiping to snooze (#146)
With swipe_to_snooze: true, swiping left called _snoozeAlert() directly — skipping the snooze_action execution that always runs when the snooze button is tapped. If you had a service call (e.g. toggling a boolean helper) configured as snooze_action, it silently did nothing on swipe.
Fixed by firing snooze_action in the swipe path before calling _snoozeAlert(), giving the swipe gesture full parity with the button tap.
card_background: true not picking up the HA theme background (#129)
When card_background: true, the card was setting --atc-card-bg-override to the string var(--ha-card-background, ...). Because this is a custom property stored inside a shadow-DOM element, the inner var(--ha-card-background) reference could not be resolved by the browser — it stayed literal and the background always fell back to the hardcoded rgba(0,0,0,0.55) regardless of the active HA theme.
Fixed by reading the resolved value directly from getComputedStyle(this) on the host element. The host lives in the light DOM and participates in the full HA theme cascade, so --ha-card-background resolves to the actual color at call time. That resolved value is stored as the override, and shadow DOM children just receive a plain color string — no unresolvable var() chain.
# Now correctly picks up your HA theme background
type: custom:alert-ticker-card
card_background: true
alerts:
- entity: sensor.front_door
message: "Front door open"📦 Update Instructions
- Download
alert-ticker-card.jsandalert-ticker-card-editor.js - Replace both files in your
www/folder (or the path you set in Resources) - Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
- Clear the HA frontend cache if the editor still shows the old version
HACS users: update from the HACS panel — no manual steps needed.
Full changelog: CHANGELOG.md
☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!
v1.3.2.5
AlertTicker Card — v1.3.2.5
✨ New Features
🔁 on_change + conditions now work together (#83)
Two related fixes that make on_change: true + conditions behave as expected:
1 — Primary state guard
When state and operator are defined alongside on_change: true, they now act as a current-state filter. The alert fires on any state change, but is only shown while the entity is actually in the declared state. This suppresses alerts on idle / paused / buffering transitions when only playing is meaningful.
2 — Single-object conditions accepted
conditions can now be written as a single inline object as well as a list — previously a single object was silently ignored.
# Fires on every track change, visible only while the speaker is playing
alerts:
- entity: media_player.living_room_speaker
operator: "="
state: playing
on_change: true
conditions:
entity: media_player.all_speakers
operator: "="
state: playing
auto_dismiss_after: 15
theme: music
message: "{{ state_attr('media_player.living_room_speaker','media_artist') }} – {{ state_attr('media_player.living_room_speaker','media_title') }}"🎨 Per-alert custom accent color (#143)
New color property on each alert. Overrides the card border and badge color for that specific alert, independent of its theme. Works with any CSS color value.
alerts:
- entity: sensor.front_door
theme: door
color: "#ff4500"
message: "Front door open"
- entity: sensor.smoke
theme: alarm
color: "var(--error-color)"
message: "Smoke detected"Available as a color picker + text field in the visual editor under the icon section of each alert — always visible, no toggles required. Leave empty to use the theme's default color.
🐛 Bug Fixes
Bottom border clipped on some themes (#141)
Themes that render an outer border (emergency, prism, and others) occasionally showed the bottom border clipped. The sub-pixel rounding of box-sizing: content-box borders caused the bottom edge to fall fractionally outside .atc-inner-clip's overflow: hidden boundary.
Fixed by adding transform: translateZ(0) to .atc-inner-clip, promoting it to a compositor layer with integer pixel snapping.
{state} placeholder not replaced in the ticker scrolling theme (#140)
The ticker theme was rendering a.message raw, skipping the _resolveMessage() call that all other themes use. As a result, {state}, {name}, {entity}, {device}, {timer}, and Jinja2 templates were displayed literally instead of being evaluated.
Fixed by routing the ticker item message through _resolveMessage(), consistent with all other themes.
Snooze menu and history panel appear behind adjacent cards (#142)
isolation: isolate (added in v1.3.2.4 to fix #127) created a stacking context that trapped the menu's z-index inside the card, causing it to render behind neighboring cards.
Fixed by toggling a CSS class atc-popup-open on :host while any popup is open. The class overrides isolation to auto and adds position: relative; z-index: 9999, making the card a stacking context root at z-index 9999 in the masonry/grid layout — above all sibling cards at z-index: auto. isolation: isolate is restored the moment the popup closes, so the #127 fix remains fully intact.
📦 Update Instructions
- Download
alert-ticker-card.jsandalert-ticker-card-editor.js - Replace both files in your
www/folder (or the path you set in Resources) - Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
- Clear the HA frontend cache if the editor still shows the old version
HACS users: update from the HACS panel — no manual steps needed.
Full changelog: CHANGELOG.md
☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!
