The glance card has no entity property. The things in the glance card do, though. Try applying the styles to them instead.
Awesome - thanks Thomas. CSS is weirdâŠ
OK - I think I see what you mean - I think Iâve misunderstood the use of config.entity.
I had hoped it would allow me to set some dynamic CSS (eg set colour based on temperature) at the card level, which would be applied to each entity in turn at render time. But I think you are saying that I must do this at the entity level, which means reentering the same dynamic CSS code for each entity. A little verbose, but I guess it gets the job done.
Ah Thomas - youâre a legend and a gentleman. Thanks - node anchors work beautifully.
Hi Thomas,
Since HA 110 changes the way it handles icons, the âoldâ custom-ui way of customizing icon_color doesnt work anymore. Which is a major bummer, since custom-ui was able to customize entities globally, and every where in HA these entities are displayed with their customizations. Any card, be it custom or core, and, importantly, in the more-info.
Did file a feature request to please add a new way of customizing entities in Ha core Frontend, but that will be a long shot I fear.
So, trying my best to customize icons with whatâs available right now, and using your card-mod Style of course. But, that only styles the entities in a Lovelace card, and not their more-info, as the quote above already indicates.
Iâve managed to template the icon color in an auto-entities card and would really have that functionality used in more-info. Which, without the color, in fact will be a Less-info from Ha 110 onwardâŠ
Since your answer above was a long time ago (talking Ha development time), I was wondering if you know of a way yet to globally customize items, so the more-info on the entity is also customized?
If not, could you give me a pointer what to look for in the âoldâ custom-ui, and what has been changed in the 110 HA icon handling, so I can try to adapt that script to that? I havenât been able to find that in the GitHub.
thanks for having a look.
I would like to be able to move the card title up slightly to match my card backgrounds:
Iâve found the right element using the browser inspector but am having trouble translating this to card-mod css:
Iâve tried both inside and outside ha-card:
style: |
ha-card {
card-header {
padding-top: 8px;
padding-bottom: 36px;
};
border: solid 1px var(--primary-color);
background:
{% if is_state('input_select.select_theme', 'Night') %}
url('/local/background/card_bg_night.png');
{% else %}
url('/local/background/card_bg_day.png');
{% endif %}
}
Any hints?
have you tried a dot, period, full-stop, whatever in front of card-header?
I have now. It made no difference unfortunately.
Is this any good?
style:
.: |
ha-card {
border: solid 1px var(--primary-color);
background:
{% if is_state('input_select.select_theme', 'Night') %}
url('/local/background/card_bg_night.png');
{% else %}
url('/local/background/card_bg_day.png');
{% endif %}
}
ha-card div.card-header {
padding-top: 8px;
padding-bottom: 36px;
}
1 Like
Yep that did it. Thank you. I changed my file names to make it a little simpler as per Mariusthvdbâs advice in another topic.
style:
.: |
ha-card {
border: solid 1px var(--primary-color);
background: url("/local/background/card_bg_{{states('input_select.select_theme')}}.png");
}
ha-card div.card-header {
padding-top: 8px;
padding-bottom: 36px;
}
Now I just have to apply it to literally hundreds of cardsâŠ
Great! I think Iâm nicking your idea of changing the background like thisâŠ
1 Like
youâre not alone, I am faced with a burden alike, while things could be so much simpler. Were simpler evenâŠ
EDIT: just to keep things tidy: my issue above has been resolvedâŠ
on your repetitive job: isnât a yaml anchor an option for you?
To be honest Iâve never bothered with anchors.
VSCode multi-line find and replace is making short work of it. I just have to be careful when some cards are indented more than others due to being in a stack.
Hi
âconfig.entityâ NOT works with Entities Card, the unique that I am been able to works is using specific entity, any ideas why âconfig.entityâ is not working with my code?. I have a similar but with Glance Card and all is working fine
- type: entities
show_header_toggle: false
entities:
- entity: input_boolean.riego_frente_auto
- entity: input_boolean.riego_jardin_auto
- entity: input_boolean.riego_recordatorio_orquidea
style: |
:host {
âpaper-item-icon-color:
{% if is_state(âconfig.entityâ, âonâ) %}
red
{% else %}
blue
{% endif %}
;
}
There is no entity in the configuration of the entities card. Try adding the style to the entities instead of the card itself. Thereâs an example in the readme.
1 Like
Thanks for that information, now I can continue.
If I have the following code the bg color gets set:
entities:
- entity: sensor.upper_freezer_temp
color: blue
style: |
ha-card {
background-color: #0000ee
}
font_size: 75
line_color: var(--accent-color)
line_width: 8
type: 'custom:mini-graph-card'
If I change it to the following it doesnât work
entities:
- entity: sensor.upper_freezer_temp
color: blue
style: |
ha-card {
background-color: states('sensor.maintank_color')
}
font_size: 75
line_color: var(--accent-color)
line_width: 8
type: 'custom:mini-graph-card'
sensor.maintank_color is an mqtt sensor whose values are colors in hex format including the #. If I look at the state of sensor.maintank_color using the developer tools the state is #0000ee. Is there any reason this shouldnât work?
You need to enclose templates in â{{ }}â
background-color: "{{ states('sensor.maintank_color') }}"
Thank you. I donât know if itâs a byproduct of using the Configure UI editor, but I had to omit the ".
So it literally looks like:
background-color: {{ states('sensor.maintank_color') }}