Yes I saw what you guys have made and it is really cool. Not sure if I will implement it as I am happy with my current slider (which is also interactive, as in, I can scroll between notifications manually as well, and I can press it to show a different action/card).
But really cool! Thanks!
Yep you do remember to post that if you’re ready for it… 
Yes I am currently finishing up the last pieces and some details that need attention, but after that it is time for documentation and github 
.
In short I use conditional button-cards with a transparant background within a swipe card.
Since custom header is gone… (i used it with vertical marquee)
How can i achieve this?
Can this been done with markdown? (i actually want one line of text showing states from multiple sensors)
It might be possible with a markdown card though I do not know, I think an HTML card could do this easier in your case.
I still hold on to my previous post where I just use button-cards in a swipe-card and the swipe-card automatically switches between the cards (a markdown could be used instead of the button-card though)
You can find examples of my code here (warning probably not easy to find)
another option can be a marquee in a button-card. Ive posted this a long time ago in the button-card thread but here you go:
type: custom:button-card
template: button_summary_picture
size: 75%
entity: sensor.next_alarm
hold_action:
action: navigate
navigation_path: /lovelace/alarmclock
label: >
[[[ var caption = 'Next: ';
var alarm = states['sensor.next_alarm_day_only'].state;
if (entity.state != 'Not set')
return `<div style='display: flex;
padding: 0px 5px 0px 5px;
align-items: center;
background: transparent;'>
<div>${caption}</div>
<marquee>
<span style='color: var(--primary-color);align-items: center;'>${alarm} at ${entity.state}</span>
</marquee>`;
return entity.state; ]]]
or even simpler:
type: custom:button-card
aspect_ratio: 12/1
name: >
[[[return `<div style='display: flex;
padding: 0px 5px 0px 5px;
align-items: center;
background: transparent;'>
<div>(${states['sensor.count_alerts_notifying'].state}) Ha Rpi4 alerts: </div>
<marquee>
<span style='color: var(--primary-color);align-items: center;'>
System alerts: ${states['sensor.marquee_alerts'].state} </span>
</marquee>`]]]
and have a sensor for the marquee:
sensor:
- platform: template
sensors:
marquee_alerts:
value_template: >
{%- if is_state('binary_sensor.alerts','on') -%}
{%- if is_state('binary_sensor.schimmel_alert','on') %} - Schimmel alert: {{states('sensor.schimmel_sensor')|float}}% / CO2: {{states('sensor.co2_living')}} ppm{%- endif -%}
{%- if is_state('binary_sensor.meteoalarm_brabant','on') %} - MeteoAlarm: {{state_attr('binary_sensor.meteoalarm_brabant','awareness_level').split(';')[0]}} - {{state_attr('binary_sensor.meteoalarm_brabant','awareness_level').split(' ')[2]}} - {{state_attr('binary_sensor.meteoalarm_brabant','headline').split(' ')[0]}}{%- endif -%}
{%- if is_state('binary_sensor.earthquakes_near_active','on') %} - Beware! Quakes near active: {{state_attr('sensor.earthquakes_near','list')}}{%- endif -%}
{%- if is_state('persistent_notification.updater_notification','notifying')%} - Update: {{states('sensor.ha_available_version')}} available{%- endif -%}
{%- if is_state('binary_sensor.espresso_needs_refill','on')%} - Espresso {{states('sensor.espresso')}}{%- endif -%}
{%- if is_state('binary_sensor.hubs_offline','on')-%} - {{state_attr('sensor.hubs_offline','message')}}{%- endif -%}
{%- if is_state('binary_sensor.critical_devices_offline','on')-%} - {{state_attr('sensor.critical_devices_offline','message')}}{%- endif -%}
{%- if is_state('persistent_notification.trash_notification','notifying') -%} - {{states('sensor.trash_alert')}}{%- endif -%}
{%- if is_state('binary_sensor.github_repo_has_update','on') -%} - {{state_attr('binary_sensor.github_repo_has_update','count')}} update: {{state_attr('binary_sensor.github_repo_has_update','updates')}}{%- endif -%}
{%- if is_state('binary_sensor.diskstation_security_status','on') -%} - Diskstation not secure!{%- endif -%}
{%- if is_state('binary_sensor.celebration_alerts','on') -%}
{%- if is_state('binary_sensor.birthday_she','on')%} - SHE is vandaag jarig en {{state_attr('binary_sensor.birthday_she','years')}}jaar geworden{%- endif -%}
{%- if is_state('binary_sensor.birthday_marijn','on')%} - Marijn is vandaag jarig en {%- endif -%}
{%- else -%} All clear
{%- endif -%}
showing your multiple lines of text
Hi @Mariusthvdb
Thx for the headsup
The only problem is, that i dont like the idea of having a button …
I mean visually
I prefer, just a markdown text
Not sure if that could work
as far as I know it the markdown card doesnt support the marquee, ive been experimenting with this same idea before.
But concerning the button, not sure what your issue is with the button, but you can style a button to not have it look like a button 
it’s just a card disguised as a button, if you have it look like a button.
ok , and how do i do that, to not have it look like a button…
Gonna try this marquee right away 
why dint you first try to make it, and then report back with you wishes to change it.
the options are endless… so seems most useful to begin and see what happens with the default settings
Getting an error for now
i copied your card type
and my sensor looks like
- platform: template
sensors:
marquee_alerts:
value_template: >
{%- if is_state('binary_sensor.alerts','on') -%}
{{states('sensor.afval')}}
{%- if is_state('binary_sensor.schimmel_alert','on') %} - Schimmel alert: {{states('sensor.schimmel_sensor')|float}}% / CO2: {{states('sensor.co2_living')}} ppm{%- endif -%}
{%- else -%} All clear
{%- endif -%}I get an error
ButtonCardJSTemplateError: TypeError: Cannot read property ‘state’ of undefined in 'return `<div style=‘display: flex; padding: 0px 5px 0px 5px; …’
I do hope you edited this to have some entities of your own? undefined means these are not on your system…
since this is a regular Jinja template, you can test it in the developers template editor, to be correct and useful
yeah i edited it:
- platform: template
sensors:
marquee_alerts:
value_template: >
{%- if is_state('binary_sensor.alerts','on') -%}
{{states('sensor.afval')}}
{%- if is_state('binary_sensor.det_inkom','on') %} - Detect in inkom{%- endif -%}
{%- else -%} All clear
{%- endif -%}Still the same warning
Code for my dashboard
cards:
- cards:
- content: |
<font size=6>{{ states('sensor.greeting') }}</font>
style: |
ha-card {
margin-top: 5px;
background-color: rgba(0, 0, 0, 0);
font-size: 100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-align: center;
}
h1, h3 {
font-weight: 400 !important;
}
type: markdown
- type: custom:button-card
aspect_ratio: 12/1
name: >
[[[return `<div style='display: flex;
padding: 0px 5px 0px 5px;
align-items: center;
background: transparent;'>
<div>(${states['sensor.count_alerts_notifying'].state}) Ha Rpi4 alerts: </div>
<marquee>
<span style='color: var(--primary-color);align-items: center;'>
System alerts: ${states['sensor.marquee_alerts'].state} </span>
</marquee>`]]]
layout: horizontal
max_columns: 3
max_height: 128
max_width: 350
type: 'custom:layout-card'IS the cause the “sensor.count_alerts_notifying”?
Cause i dont have that one, whats it for?
Does the marquee read notfications too?
ok got it working , kinda
This is how it looks
This is how i want it
So the button should be like “4 lampen en pc staan aan”
So without the button visual.
Button be wider…
And without the (25) System alerts text in front (gonna try this myself too )
Instead of horizontal scroll, can it be vertical?
edit: made it till this
You can see that the area where the text can scroll isnt as wide as the complete button, how do i fix this?
And how do i get rid of the button thing
Cant find it lol
I did find the notifications… but not the button with the swipe card
would like to see it in action too to see if its a better option than this one here
@skank it is a very very old video from the beginning of this year. However the notifications haven’t changed since, so the video will represent a bit of what I did with it.
Note that I actually move them manually in the video (you can just scroll through them) but they also scroll automatically every 2 seconds or so (even after you manually scrolled through it, it will just continue automatically afterwards). Maybe this will give you an idea of what I did. I can simplify the code for you like below. You will have to do this for each ‘notification’ (without the swipe card) and put it in the list. To simplify things I will recommend using either lovelace_gen or decluttering-card to create a template so that you only need to fill a name and icon.
# simplified (long) code
- type: custom:swipe-card
parameters:
allowTouchMove: true
grabCursor: true
autoplay:
disableOnInteraction: false
cards:
- type: custom:button-card
name: "The frontdoor is currently open"
icon: mdi:home
size: 100%
show_state: false
show_label: false
layout: icon_name
show_icon: true
tap_action:
action: more-info
haptic: light
hold_action:
action: none
styles:
card:
- --ha-card-background: rgba(0,0,0,0.0)
- box-shadow: none
- height: 45px
name:
- font-size: var(--subtitle-font-size)
- font-family: var(--font-family)
- color: var(--subtitle-text-color)
- justify-self: start
- font-weight: var(--subtitle-font-weight)
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 8% 1fr
- grid-template-rows: 1fr
icon:
- color: var(--subtitle-text-color)
- padding-bottom: 3px
If you use a template your code would just look like this
- type: custom:swipe-card
parameters:
allowTouchMove: true
grabCursor: true
autoplay:
disableOnInteraction: false
cards:
- type: conditional
conditions:
- entity: binary_sensor.smoke_sensor
state: "on"
card:
!include
- '../path_to_your_template/notification-template.yaml'
- icon: mdi:smoke-detector
name: Smoke detected in the kitchen
For this last example you must have a template setup and you must either learn how to use lovelace_gen or decluttering-card.
Hi cool
Thanks
I got my binary sensors already.
I want to use templates indeed.
So i installed decluttering card
i need to create a yaml decluttering_templates in the root , right?
then enter the code as
decluttering_templates:
<template_name>
default: # This is optional
- <variable_name>: <variable_value>
- <variable_name>: <variable_value>
[...]
card: # This is where you put your card config (it can be a card embedding other cards)
type: custom:my-super-cardbut how doest that fill into your part?
- type: custom:swipe-card
parameters:
allowTouchMove: true
grabCursor: true
autoplay:
disableOnInteraction: false
cards:
- type: conditional
conditions:
- entity: binary_sensor.smoke_sensor
state: "on"
card:
!include
- '../path_to_your_template/notification-template.yaml'
- icon: mdi:smoke-detector
name: Smoke detected in the kitchenOr can i just copy your template and point to that ? (without decluttering card?
I will send you a decluttering card code later on, not at home at the moment and I need to check how decluttering card works again since I haven’t used it for over a year. But it is very similar to the current template though.
Superb, thanks for your help
I’ll give you some time