I would like to restyle the tile card globally, so that primary and secondary text are more readable, by setting the font-width of them. I can do this with one card:
All this is well and good, but I want to change my theme, so that ALL tile cardsā text is styled this way.
However, I donāt know what to add to my theme.
This is what I tried:
I do not see this button.
What version of HA you got?
Anyway, try apply a method used to hide a āSearchā button.
How to find it: huge card-mod thread ā 1st post ā link at the bottom ā themes ā hiding āsearchā
in a search to be as efficient with global card-mods, I was looking at the examples in the card-mod documentation, especially in the card-mod-themes cookbook section.
however, what is mentioned in those docs wont work for me unfortunately. I cant make a valid class out of this
style: |
:host {
--card-mod-icon:
{% set state = states(config.entity) %}
mdi:{{'checkbox-marked-circle' if state == 'on' else 'radiobox-blank'}};
}
I have this as an include, and use it on a binary entiy like
and it works very fine. Ofc, this is per entity, and Id love to set it on lets say all binary_sensors.
canāt we do that with card_mod_theme under card-mod-row: | ?
something like:
theme-mods:
card-mod-row: |
:host {
--card-mod-icon:
{% set state = states(config.entity) %}
{% if state_attr(config.entity,'device_class') == 'running' %}
mdi:{{'checkbox-marked-circle' if state == 'on' else 'radiobox-blank'}};
{% endif %}
}
edit
heck we canā¦ this does kick in now on my ārunningā binaries (Iāve set my threshold binary sensors to use that class, but they were showing play/stop icons, which I believe is a wrong choice for the class, because my washing machine is not a radio, and thus hope to PR that.
this will settle it in the frontend for the time beingā¦
I also removed the āha-svg-iconā, added !important to everythingā¦ An opacity animation works and the item-text can use the color animation but I canāt get the icons to do the same.
As I really like what Ildarās card-mod code looks like for my entities cards, I wanted to add this to my theme as a global mod.
I failed over and over.
I will hide my inital post to make it easier to focus on the resulting question, but my journey to that conclusion is here:
Summary
Looking at this cookbook example I would have thought that I could use the per-card mod as follows.
Of course I am trying to modify entities card and not seconary-info, so the issue may well be there. But it looked like what I am looking for.
Tried yaml and non-yaml approach.
Here is the content of my themes.yaml file (I removed the non-card-mod parts)
frontend:
themes:
alex:
modes:
dark:
card-mod-theme: alex
card-mod-row: |
hui-generic-entity-row {
{% if states(config.entity) == "on" -%}
color: white;
{% elif states(config.entity) == "off" -%}
color: grey;
font-style: italic;
{% elif states(config.entity) == "unavailable" -%}
color: gray;
font-style: italic;
{% else -%}
color: yellow; #in case states(config.entity) is the problem, this should hopefully just turn everything yellow.
font-style: italic;
{% endif -%}
height: 2em;
}
:host {
}
However, it does nothing for my rows in the auto-entities-populated entities cards or manually populated entities cards.
I also tried card-mod-card, card-mod-root and even card-mod-entities as variables.
EDIT2:
If the problem is, that the states(config.entity) is only available per row, then maybe there is a way to globally define the font-style and color for all cards if the state of any entity is e.g. āoffā?
EDIT3:
I feel like in a math exam where I need to āshow my workā
So, I now also tried an example directly from the wiki
and only the one row I styled manually to test the example has a border:
I reloaded all yamls, reloaded themes, restarted HA. I am at a loss here.
I now found the problem: it is the placement in the dark mode. It works as soon as I place it in the root theme.
Does anybody then know how to make it selective for the dark mode (without creating a dedicated dard-mode theme, i.e. using the system ability to switch between auto, light and dark)?
I did take it out again, and use the identical mod in my auto-entities card, because I believe to notice that a generic mod like this in the theme-mod is very heavy for the system. Suppose it forces traffic from frontend to backend and back again on all views, and view changes for all entitiesā¦ given the generic check on all entities being a device_class of a certain type.
Taking this out again did immediately relieve the numbers. Just mentioning here, so people do check the effects of heavy āclassingā in their card-mod-themes
just a heads up:
2024.1 beta broke all of my card-mod-sidebar-yaml: | mods, and I dont yet have a lead on why. the release notes speak of a changed selector chain:
Selector chain tweaks. a $ b $ will now select the shadowRoots of allbs in the first a.
but I am no sure why his would effect the side-barā¦
