Here is a YAML code snippet that works with card-mod if I use type custom:stack-in-card
- type: custom:stack-in-card
card_mod:
style: |
:host {
--ha-card-border-width: 0px;
}
mode: vertical
cards:
- type: thermostat
entity: climate.wifi_smart_trv_2
- type: entities
card_mod:
style: |
ha-card {
margin-top: -24px;
}
entities:
- entity: sensor.heizung_eingangsdiele_batterie
name: Batterie
type: custom:template-entity-row
card_mod:
style:
div#wrapper: |
.state {
color: {{ 'red' if states(config.entity) | int <= 10 }};
}
state: '{{ states(config.entity) }} %'
icon: >
{% set val = states(config.entity) | int %} {{
'mdi:battery-outline' if val < 5 else 'mdi:battery-10' if val
< 15 else 'mdi:battery-20' if val < 25 else 'mdi:battery-30'
if val < 35 else 'mdi:battery-40' if val < 45 else
'mdi:battery-50' if val < 55 else 'mdi:battery-60' if val < 65
else 'mdi:battery-70' if val < 75 else 'mdi:battery-80' if val
< 85 else 'mdi:battery-90' if val < 95 else 'mdi:battery' }}
secondary: >-
{% set relativeTime =
relative_time(as_datetime(states('sensor.heizung_eingangsdiele_batterie_last_updated')))
%} {% if 'second' in relativeTime %}
{% set relativeTime = 'einigen Sekunden' %}
{% endif %} Vor {{ relativeTime | replace("years", "Jahre") |
replace("days", "Tagen") | replace("hours", "Stunden") |
replace("minutes", "Minuten") | replace("year", "Jahr") |
replace("day", "Tag") | replace("hour", "Stunde") |
replace("minute", "Minute") }}
But if I change type to custom:vertical-stack-in-card it doesn’t apply this card-mod sequence
card_mod:
style: |
ha-card {
margin-top: -24px;
}
Here is a screenshot showing type stack-in-card on the left side and vertical-stack-in-card on the right side. CSS key ‘margin-top’ gets ignored if I use type vertical-stack-in-card.
Does somebody know how to modify card_mod sequence to work with vertical-stack-in-card?
Suggest to ask in the main thread instead of creating new ones.
Do you think a thread with more than 8000 posts can be searched and tracked better than this thread with a single problem?
I do think that keeping solutions in 1 place is better than have them scattered. And that a post asked in a thread with lots of subscribers has more chances to be answered.
But of course it is up to you.
I don‘t understand threads with more than a couple of dozen posts. In my opinion nobody can read more than 8000 posts to see if there is a solution for a given problem. Even if the solution might be part of the posts. So I would prefer to stay with my separate thread for this issue if you don‘t mind.
You do realize the card types are organized in a straightforward manner in the thread Ildar is referencing. Take a look here and see if your opinion changes.
If you use search in this topic with specific keywords you’ll easily find multiple examples for most inquiries. This is why, in my opinion, it makes it better to consolidate the inquires into main threads.
As for stack-in card, it was the replacement for vertical-stack-in-card and plays a little nicer with card_mod.
After looking at your code, the mod is not on the stack card, but rather the Entities card. The solution is in the Entities Card examples in the link Ildar and I provided.
Try
card_mod:
style: |
.card-content {
margin-top: -24px;
}
1 Like
It seems not to work. There is no change to key margin-top as before.
type: custom:vertical-stack-in-card
cards:
- type: thermostat
entity: climate.wifi_smart_trv_3
- type: entities
entities:
- entity: sensor.heizung_wohnzimmer_batterie
name: Batterie
type: custom:template-entity-row
card_mod:
style:
div#wrapper: |
.state {
color: {{ 'red' if states(config.entity) | int <= 10 }};
}
state: "{{ states(config.entity) }} %"
icon: >
{% set val = states(config.entity) | int %} {{ 'mdi:battery-outline'
if val < 5 else 'mdi:battery-10' if val < 15 else 'mdi:battery-20' if
val < 25 else 'mdi:battery-30' if val < 35 else 'mdi:battery-40' if
val < 45 else 'mdi:battery-50' if val < 55 else 'mdi:battery-60' if
val < 65 else 'mdi:battery-70' if val < 75 else 'mdi:battery-80' if
val < 85 else 'mdi:battery-90' if val < 95 else 'mdi:battery' }}
secondary: >-
{% set relativeTime =
relative_time(as_datetime(states('sensor.heizung_wohnzimmer_batterie_last_updated')))
%} {% if 'second' in relativeTime %}
{% set relativeTime = 'einigen Sekunden' %}
{% endif %} Vor {{ relativeTime | replace("years", "Jahre") |
replace("days", "Tagen") | replace("hours", "Stunden") |
replace("minutes", "Minuten") | replace("year", "Jahr") |
replace("day", "Tag") | replace("hour", "Stunde") | replace("minute",
"Minute") }}
card_mod:
styles: |
.card-content {
margin-top: -24px;
}
Maybe this is because I already have a card_mod sequence applied to custom:template-entity-row entity?
To Ildar’s and your suggestion: I didn‘t know the search feature in large threads. What do you think about copying solution to large card-mod thread once it is found? Or is there a feature to link this thread there with search capabilities?
No it’s because you wrote styles: vs the correct method of style:
Sorry for my typo. But even if I correct it to style: it doesn‘t change margin-top.
What card mod version are you on?
The code I have provided works. This is results with a negative 100px margin.
The code I tested
type: custom:vertical-stack-in-card
cards:
- type: thermostat
entity: climate.wifi_smart_trv_3
- type: entities
entities:
- entity: sensor.heizung_wohnzimmer_batterie
name: Batterie
type: custom:template-entity-row
card_mod:
style:
div#wrapper: |
.state {
color: {{ 'red' if states(config.entity) | int <= 10 }};
}
state: "{{ states(config.entity) }} %"
icon: >
{% set val = states(config.entity) | int %} {{ 'mdi:battery-outline'
if val < 5 else 'mdi:battery-10' if val < 15 else 'mdi:battery-20' if
val < 25 else 'mdi:battery-30' if val < 35 else 'mdi:battery-40' if
val < 45 else 'mdi:battery-50' if val < 55 else 'mdi:battery-60' if
val < 65 else 'mdi:battery-70' if val < 75 else 'mdi:battery-80' if
val < 85 else 'mdi:battery-90' if val < 95 else 'mdi:battery' }}
secondary: >-
{% set relativeTime =
relative_time(as_datetime(states('sensor.heizung_wohnzimmer_batterie_last_updated')))
%} {% if 'second' in relativeTime %}
{% set relativeTime = 'einigen Sekunden' %}
{% endif %} Vor {{ relativeTime | replace("years", "Jahre") |
replace("days", "Tagen") | replace("hours", "Stunden") |
replace("minutes", "Minuten") | replace("year", "Jahr") |
replace("day", "Tag") | replace("hour", "Stunde") | replace("minute",
"Minute") }}
card_mod:
style: |
.card-content {
margin-top: -24px;
}
1 Like
Latest card-mod version I guess.
This code worked for me:
type: custom:vertical-stack-in-card
cards:
- type: thermostat
entity: climate.wifi_smart_trv_3
- type: entities
entities:
- entity: sensor.heizung_wohnzimmer_batterie
name: Batterie
type: custom:template-entity-row
card_mod:
style:
div#wrapper: |
.undefined {
margin-top: -24px;
}
.state {
color: {{ 'red' if states(config.entity) | int <= 10 }};
}
state: "{{ states(config.entity) }} %"
icon: >
{% set val = states(config.entity) | int %} {{ 'mdi:battery-outline'
if val < 5 else 'mdi:battery-10' if val < 15 else 'mdi:battery-20' if
val < 25 else 'mdi:battery-30' if val < 35 else 'mdi:battery-40' if
val < 45 else 'mdi:battery-50' if val < 55 else 'mdi:battery-60' if
val < 65 else 'mdi:battery-70' if val < 75 else 'mdi:battery-80' if
val < 85 else 'mdi:battery-90' if val < 95 else 'mdi:battery' }}
secondary: >-
{% set relativeTime =
relative_time(as_datetime(states('sensor.heizung_wohnzimmer_batterie_last_updated')))
%} {% if 'second' in relativeTime %}
{% set relativeTime = 'einigen Sekunden' %}
{% endif %} Vor {{ relativeTime | replace("years", "Jahre") |
replace("days", "Tagen") | replace("hours", "Stunden") |
replace("minutes", "Minuten") | replace("year", "Jahr") |
replace("day", "Tag") | replace("hour", "Stunde") | replace("minute",
"Minute") }}
I think it needs to be part of div#wrapper.undefined
Version 3.5 was pulled. Install v3.4.4
What do you mean by pulled? Do you mean revoked?
Look at github
V3.5 had issues so card mod was reverted to 3.4.4. Feel free to search it in the forum but I know what I’m talking about.
All right. I will revert to 3.4.4…
Installing card-mod 3.4.4 brought the solution. What‘s better in your opinion?
card_mod:
style:
div#wrapper: |
.undefined {
margin-top: -24px;
}
or
card_mod:
style: |
.card-content {
margin-top: -24px;
}
1 Like
Either one is fine if it works out. You’re just adjusting different areas of the card.
Thank you very much for the solution. How can I merge this thread into the large card-mod thread? Copy or link?
I wouldn’t worry about it. We had a long thread and you marked it with a Solution. Please don’t be shy about starting a new topic, just begin in the main threads if possible.
Glad we figured it out for you!
