My decluttering-card is wrapped inside stack-in-card and layout-cardā¦
Stack-in-card > Layout-card > Decluttering-card
You can see the path on the bottom of the image I sent on my first post. There is a HA-Card
Then you need to style from the layout-card if it has ha-card. Never did it myself.
But seems that layout-card does not have it.
So, your options could be style from the stack-in-card level - or revise as per my 1st post to you.
I tried. But couldnāt figure how to do it. That is why I came here.
Iām not good with this shadow root thing, and the syntax of the card-mod. I find it complicate to understand how to do it when you find what you wanna modify inside the Google Chrome inspector.
Do you think you can help me with that or guide me to find how to do itā¦
On the Picture from the Google Inspector I found what I need to modify and the path to it. Itās inside Stack-in-card (Ha-Card) but I donāt know how to translate that to card-mod.
- You will anyway need to learn. So use examples (like from 1st post ā link at the bottom), try-fail-repeat-succeed.
- I would say that styling through many levels (stack-in-card ā layout-card ā ā¦) is not worth it (complex, unstable, easy to break, ā¦). Consider other ways. Why donāt try styling in the mushroom itself? Mushroom has ha-card, probably it will be much easier.
Also, does layout-card has own native possibilities to style?
I style everything inside mushroom-card levelā¦ The thing is that the margin I need to remove comes from the decluttering-card. Thatās the only thing I need to change from the decluttering-card, all the rest I do in the mushroom-card level.
No, it comes from the outer container which is layout-card.
Place 2 Entities card in a vertical stack - you will see a similar margin.
And it is supposed to be changed on the containerās level.
So, you are right in part that it cannot be styled from a mushroom.
So:
ā check native layout-card options to style a margin;
ā if not - youāll have to go from stack-in-card levelā¦
I guess the margin comes from decluttering-card, doesnāt it?
It says the margin is inside decluttering-card in the Google Inspector.
Doesnāt this mean itās from decluttering-card?
decluttering card does not add a margin.
Right on your screenshot - āmasonry-view-card-marginā applied to ā#root > *ā. It comes from your container.
Can I change it? even though it comes from the container like you said.
alright Iāll do it. Thank you for your help my friend.
This MAY BE what you are looking for:
If so - would be great, no need to use a potentially unstable card-mod solution.
Thank you so much for taking your time and take a look at this!
It seems card_margin isnāt working when using layout_type: custom:grid-layout (which is my case).
There is an open issue on github for that
In the mean time negative value for margin will do the work for me,
Again, thank you Ilda.
1 Like
Good morning,
Iām working on a stacked card that contains a tile card. The normal āstyleā tag seems to have no effect on the card when Iām using card-mod to introduce a gradient gauge icon.
Iāve been searching but I canāt find anything specific about borders and the card mod attribute.
The YAML below is only an excerpt from a much larger, stack-in-card with conditional cards, showing different stack cards when my 3D printer is in different states. Iām only providing the section of the code in question to highlight the specific problem
card:
type: tile
entity: sensor.prusalink_progress
icon: mdi:printer-3d-nozzle
color: blue
name: Prusa MK4
card_mod:
style:
ha-tile-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--tile-color) {{ (states(config.entity) |float ) }}% 0%, var(--card-background-color) 0% 100%);
}
ha-tile-info$: |
.secondary {
visibility: hidden;
}
.secondary:before {
visibility: visible;
content: "{{ (states(config.entity) }}%";
}
ha-card$: |
border: 0px;
border: none;
Hello,
Hello, I have a template sensor with 3 possible states (off/standby/on) and I would like its icon to reflect the 3 states using 3 different colors. I came up with this syntax for card-mod which I apply to the entity of a Glance card:
- entity: sensor.t4_corredor_termoacumulador_state
name: TA WC
card_mod:
style: |
:host {
--card-mod-icon-color:
{%- set sensor = states('sensor.t4_corredor_termoacumulador_state') %}
{%- if sensor == 'on' %}var(--state-light-on-color)
{%- elif sensor == 'standby' %}var(--state-humidifier-on-color)
{%- else %}var(--state-light-off-color)
{%- endif %}
}
But it is not updating correctly: the state is now standby and yet the icon has the color of off (grey). I tried reloading the page to no aval:
But when enter edit mode and open the popup to edit the Glance card, the color is now shown correctly (blue):
But only there. When I close the popup and go back to the main screen, it is still grey.
And yet yesterday I had the opposite problem: it was (correctly) blue but when I turned it off it would still remain blue.
Can you please suggest reasons for these problems to happen?
Thanks in advance.
You dont need to enter the shadow-dom of ha-card. So no $ needed a that bit.
type: tile
entity: sensor.prusalink_progress
icon: mdi:printer-3d-nozzle
color: blue
name: Prusa MK4
card_mod:
style:
ha-tile-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--tile-color) {{ (states(config.entity) |float ) }}% 0%, var(--card-background-color) 0% 100%);
}
ha-tile-info$: |
.secondary {
visibility: hidden;
}
.secondary:before {
visibility: visible;
content: "{{ (states(config.entity) }}%";
}
.: |
ha-card {
border: 0px;
border: none;
}
Use .: | to reset back to style: |
I always suggest to open the devtools and see where it is set.
And then you ādirectlyā see, that you have to overwrite this.
Itās faster than to wait that the prepared solution is flying in.
type: entities
entities:
- entity: input_number.musikbox
card_mod:
style:
ha-slider:
$: |
input[type="range"] {
pointer-events: none;
}
Have you tried it that way and it worked for you? Because I had tried it before posting and it didnāt work for me.
It does work if you uncheck the " pointer-events" in Devtools, but the code is not applying.
Yes. Tested and working. I cannot use the slider then anymore as set to none. Please try it one to one with my code or post yours where it is not working.
Hi everyone,
trying to use some of Ildarās great glance code to modify my card but I cannot get it to work with my card.
type: custom:auto-entities
card:
type: grid
columns: 4
square: false
title: Xiaomi Battery
card_param: cards
sort:
method: friendly_name
filter:
template: |-
{% set ns = namespace(list=[]) %}
{% for item in states.sensor | selectattr('entity_id', 'search', 'xiaomi.*battery', ignorecase=True) %}
{% set ns.list = ns.list + [ item ] %}
{% endfor %}
{% for item in ns.list -%}
{{
{
"type": "glance",
"card_mod": [
{
"style":
$: |
.card-header {
color: red !important;
}
}
],
"entities": [
{
"entity": item.entity_id,
"name": (area_name(item.entity_id).split()[0][:2] + (area_name(item.entity_id).split()[1][:2]) if area_name(item.entity_id).split()|length > 1 else area_name(item.entity_id)[:4]),
}
],
"show_icon": false,
}
}},
{%- endfor %}
Would it need to go into the for loop?
How is that related to card-mod? )