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 
Sorry @skank, I am really busy atm since I have a new job (which is the complete opposite of my old job). I’ve looked into decluttering-card for you, which I believe was done like this. (I personally use lovelace_gen, but the usage is quite similar), well here we go!
This should do the trick I guess, put this in your templates:
decluttering_templates:
notification_template: # This is the name of a template
card:
type: custom:button-card
name: '[[name]]'
icon: '[[icon]]'
size: 100%
show_state: false
show_label: false
layout: icon_name
tap_action:
action: none
hold_action:
action: none
styles:
card:
- --ha-card-background: rgba(0,0,0,0.0)
- box-shadow: none
- height: 45px
name:
- font-size: 12px
- font-family: Helvetica
- color: var(--primary-text-color)
- justify-self: start
- font-weight: normal
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 8% 1fr
- grid-template-rows: 1fr
icon:
- color: var(--primary-text-color)
- padding-bottom: 3px
And in your view you put the following
- type: custom:swipe-card
parameters:
allowTouchMove: true
grabCursor: true
autoplay:
disableOnInteraction: false
cards:
- type: conditional
conditions:
- entity: binary_sensor.smoke_sensor
state: "on"
card:
type: custom:decluttering-card
template: notification_template
variables:
- name: Smoke detected in the kitchen
- icon: mdi:smoke-detector
- type: conditional
conditions:
- entity: binary_sensor.front_door
state: "on"
card:
type: custom:decluttering-card
template: notification_template
variables:
- name: The frontdoor is open!
- icon: mdi:door
You might need to play with the styles a bit since this was made specifically to fit inside the header that I have created (which you have probably seen in my video or on the screenshots on my repo).
Let me know if this works out for you, note that I have very little time so I can’t promise a quick answer. (joining our discord community will get you the answers you need a bit faster though). You can join our discord community here!
Superb! I love your help ! Truly amazin! Thx mate, will try asap.
Good luck with the new job too !
You are most welcome, I hope it works for you.
ok here we go
the first option you showed me, worked
The one you gave me now, doesnt show anything.
But im not sure its your code…
I made a templates.yaml file, its under my includes directory where i have stored my scenes.yaml, scripts.yaml groups.yaml lights.yaml etc etc but also my notifications.yaml file
The config is under my home dashboard…
In your code you have the variables name and icon mentioned, but those are inside my notifications yaml too
So i get a cleaner config?
Don’t i need to point to the template inside my notifications.yaml file ?
since this was about scrolling text: just found out it is very easy to add a scrollbar to a markdown card…:
card_mod:
style: |
ha-card.type-markdown {
box-shadow: none;
margin: 0px -16px -16px -16px;
overflow-y: scroll;
height: 300px;
}
and you’re set.
(the .type-markdown trick is to make sure this card_mod is only applied to the markdown card itself, and not to an enveloping entities card if you happen to embed the markdown card, like I do in my config)