This is what I got with your code:
Is it what you expect?
If yes - may be you do not have card-mod installed.
If no - what is wrong?
Is it what you expect?
If yes - may be you do not have card-mod installed.
If no - what is wrong?
It is working now, thanks.
The verification of the code helped me to look elsewhere.
It seemed there was issue with my hacs key for github.
Thanks for your help.
An example of using "card-mod" for "multiple-entity-row" to display a "last-changed" for items:
Same method may be used to display ANY text below items.
Even for icons:
code
- type: custom:multiple-entity-row
entity: sun.sun
show_state: false
entities:
- entity: sun.sun
icon: true
name: false
- entity: sun.sun
icon: true
name: false
- entity: sun.sun
icon: true
name: false
card_mod:
style: |
.entities-row div.entity:nth-child(1) div::after {
color: var(--secondary-text-color);
font-size: 0.7rem;
content: "\A label";
white-space: pre;
}
.entities-row div.entity:nth-child(2) div::after {
color: var(--secondary-text-color);
font-size: 0.7rem;
content: "\A {{states('sun.sun')}}";
white-space: pre;
}
.entities-row div.entity:nth-child(3) div::after {
color: var(--secondary-text-color);
font-size: 0.7rem;
content: "\A {{state_attr('sun.sun','elevation')}}";
white-space: pre;
}
People, I really need a help with this:
Can anyone help me?
I think itâs all browser related on the PC you are viewing it on and doesnât impact HA apart from querying HA for the data for that viewâŠ
1 Like
Meanwhile trying to create sticky cards (credits to @ASNNetworks).
Tested in 2024.7.1:
title: sticky
path: sticky
cards:
- type: custom:mod-card
card_mod:
style:
hui-vertical-stack-card $: |
div#root > :first-child,
div#root > :last-child {
z-index: 999;
position: sticky;
position: -webkit-sticky;
}
div#root > :first-child {
top: var(--header-height);
}
div#root > :last-child {
bottom: 0;
}
card:
type: vertical-stack
cards:
- &ref_glance_4
type: glance
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- &ref_glance
type: glance
entities:
- entity: sun.sun
- *ref_glance
- *ref_glance
- type: entities
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- *ref_glance_4
before 2024.7
Here two sticky cards - top & bottom:
type: vertical-stack
cards:
- type: glance
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
top: var(--header-height);
}
ha-card {
border-style: solid;
border-radius: 15px;
}
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- type: glance
entities:
- entity: sun.sun
- type: glance
entities:
- entity: sun.sun
- type: glance
entities:
- entity: sun.sun
- type: entities
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- type: glance
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
ha-card {
border-style: solid;
border-radius: 15px;
}
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
Note that "ha-card" styles used for the sticky card itself (borders, background etc), ":host" styles used for the subcontainer inside the main container to make it sticky (sorry if this is not true-CSS-language).
To repeat the same test - copy this code and paste it into the only card into some view.
For the top card I have to set:
top: var(--header-height);
Works on desktop (Chrome, Win10x64, 1920x1200) and on iPhone 5S as well.
6 Likes
Hi
I use card mod for change color of my icons depending it state , but I have an issue.
When I toggle state with Chrome on my PC no problem, When I do it on Safari on my mac or Safari on my iphone the color donât change until I refresh.
this is the result ( Mac, iPhone safari and HA companion for macOS):
Nice job, but I donât see any problem with my code ?
Have you code to share me with my lights ?
This is not about lights, this is about entities.
Ok but how can you suggest me with that :
- type: entities
entities:
- entity: light.plafonnier
card_mod:
style: |
:host {
--card-mod-icon-color: {% if is_state('light.plafonnier', 'on') %} yellow {% else %} white {% endif %}
}
name: Plafonnier
- entity: light.lampe_buffet
card_mod:
style: |
:host {
--card-mod-icon-color: {% if is_state('light.lampe_buffet', 'on') %} yellow {% else %} white {% endif %}
}
name: Buffet
I do not know what it is - "--card-mod-icon-color", tried to search it here , it is in your posts only.
What do you want to achieve? Is it not covered by that post?
I replied to you on facebook and you ignored me⊠You need to use --paper-item-icon-color.
I want to make cooler icon responsive compared to a entity state
E.g: if lampe_buffet is on , I want Yellow if not I want white icon color
If I use âpaper-item-icon-color , it doesnât work with conditions
Yes, and itâs because youâre copying âpaper-item-icon-color from facebook! Like I said on facebook.
Type it out instead of copy/paste.
Iâve made it like this 
- entity: light.lampe_bureau
card_mod:
style: |
:host {
--paper-item-icon-color: red
--paper-item-icon-active-color: green
}
name: Lampe bureau
Itâs Okay becaus I really donât understand
You need to terminate each line
add ; at the end.
Solutions like this may be used by a simple âcopy/pasteâ. Otherwise the thread will be flooded by explaining the same things again & again. That was my intention - accumulate solutions in dedicated posts to avoid spamâŠ