getting back to the icon changer, I suspect it to be caused by the place in the config. So please let me ask, if you can adapt this working color template, to an icon changer, with the correct path:
paper-tab[aria-label='Settings dev'] {
{% if is_state('input_boolean.test','on') %} color: white
{% else %} color: green
{% endif %};
}
?
trying this currently:
paper-tab[aria-label='Settings dev'] ha-icon $ ha-svg-icon $: |path {
{% if is_state('input_boolean.test','on') %} d: path("M 20.2 5.9 L 21 5.1 C 19.6 3.7 17.8 3 16 3 C 14.2 3 12.4 3.7 11 5.1 L 11.8 5.9 C 13 4.8 14.5 4.2 16 4.2 C 17.5 4.2 19 4.8 20.2 5.9 M 19.3 6.7 C 18.4 5.8 17.2 5.3 16 5.3 C 14.8 5.3 13.6 5.8 12.7 6.7 L 13.5 7.5 C 14.2 6.8 15.1 6.5 16 6.5 C 16.9 6.5 17.8 6.8 18.5 7.5 L 19.3 6.7 M 19 13 H 17 V 9 H 15 V 13 H 5 A 2 2 0 0 0 3 15 V 19 A 2 2 0 0 0 5 21 H 19 A 2 2 0 0 0 21 19 V 15 A 2 2 0 0 0 19 13 M 8 18 H 6 V 16 H 8 V 18 M 11.5 18 H 9.5 V 16 H 11.5 V 18 M 15 18 H 13 V 16 H 15 V 18 Z") !important;
{% else %} d: path("M 12 2 A 10 10 0 0 0 2 12 A 10 10 0 0 0 12 22 A 10 10 0 0 0 22 12 A 10 10 0 0 0 12 2 M 16.2 16.2 L 11 13 V 7 H 12.5 V 12.2 L 17 14.9 L 16.2 16.2 Z") !important;
{% endif %};
}
card-mod-root-yaml: |
paper-tab[aria-label='12345'] ha-icon $ ha-svg-icon $: |
path {
{% if is_state('input_boolean.test_boolean','on') %}
d: path("M 20.2 5.9 L 21 5.1 C 19.6 3.7 17.8 3 16 3 C 14.2 3 12.4 3.7 11 5.1 L 11.8 5.9 C 13 4.8 14.5 4.2 16 4.2 C 17.5 4.2 19 4.8 20.2 5.9 M 19.3 6.7 C 18.4 5.8 17.2 5.3 16 5.3 C 14.8 5.3 13.6 5.8 12.7 6.7 L 13.5 7.5 C 14.2 6.8 15.1 6.5 16 6.5 C 16.9 6.5 17.8 6.8 18.5 7.5 L 19.3 6.7 M 19 13 H 17 V 9 H 15 V 13 H 5 A 2 2 0 0 0 3 15 V 19 A 2 2 0 0 0 5 21 H 19 A 2 2 0 0 0 21 19 V 15 A 2 2 0 0 0 19 13 M 8 18 H 6 V 16 H 8 V 18 M 11.5 18 H 9.5 V 16 H 11.5 V 18 M 15 18 H 13 V 16 H 15 V 18 Z") !important;
color: magenta !important;
{% else %}
d: path("M 12 2 A 10 10 0 0 0 2 12 A 10 10 0 0 0 12 22 A 10 10 0 0 0 22 12 A 10 10 0 0 0 12 2 M 16.2 16.2 L 11 13 V 7 H 12.5 V 12.2 L 17 14.9 L 16.2 16.2 Z") !important;
color: cyan !important;
{% endif %}
}
.: |
paper-tab[aria-label='12345'] {
{% if is_state('input_boolean.test_boolean','on') %}
color: red;
{% else %}
color: orange;
{% endif %}
}
no, really sorry, nothing happening… I think I had that exact syntax before, and thats why I tried to simplify it.
thing is, I have all my tab icon color settings under the .: | so was thinking maybe the icon change also should be set there.
even without coloring:
card-mod-root-yaml: |
paper-tab[aria-label='Settings dev'] ha-icon $ ha-svg-icon $: |
path {
{% if is_state('input_boolean.test','on') %}
d: path("M 20.2 5.9 L 21 5.1 C 19.6 3.7 17.8 3 16 3 C 14.2 3 12.4 3.7 11 5.1 L 11.8 5.9 C 13 4.8 14.5 4.2 16 4.2 C 17.5 4.2 19 4.8 20.2 5.9 M 19.3 6.7 C 18.4 5.8 17.2 5.3 16 5.3 C 14.8 5.3 13.6 5.8 12.7 6.7 L 13.5 7.5 C 14.2 6.8 15.1 6.5 16 6.5 C 16.9 6.5 17.8 6.8 18.5 7.5 L 19.3 6.7 M 19 13 H 17 V 9 H 15 V 13 H 5 A 2 2 0 0 0 3 15 V 19 A 2 2 0 0 0 5 21 H 19 A 2 2 0 0 0 21 19 V 15 A 2 2 0 0 0 19 13 M 8 18 H 6 V 16 H 8 V 18 M 11.5 18 H 9.5 V 16 H 11.5 V 18 M 15 18 H 13 V 16 H 15 V 18 Z") !important;
{% else %}
d: path("M 12 2 A 10 10 0 0 0 2 12 A 10 10 0 0 0 12 22 A 10 10 0 0 0 22 12 A 10 10 0 0 0 12 2 M 16.2 16.2 L 11 13 V 7 H 12.5 V 12.2 L 17 14.9 L 16.2 16.2 Z") !important;
{% endif %}
}
feel free to have your fresh eyes correct my theme… All I can say is everything in there currently works
but, isnt that exactly what you have found to be working?
I am the only person in the world with these “/* xxxx */” not working ?))))
I mean - I cannot use these comments inside styles, my styles stop working then.
nope, had that same experience, and put it aside for a moment… there’s not much to go on for the classes, or how they are defined. I believe there’s a nice Day/Night theme that holds some classes. Should be available in this topic above…wrong, its here: Day and Night - #29 by tom_l
I have a question regarding CPU & RAM usage.
I would like to see @thomasloven & other experts participating in this discussion.
Suppose we have some amount of Entities card, they look like this:
type: entities
entities:
- entity: xxxxxxxx
- entity: xxxxxxxx
- entity: xxxxxxxx
card_mod:
style:
... style dependently on some conditions
- entity: xxxxxxxx
- entity: xxxxxxxx
- entity: xxxxxxxx
card_mod:
style:
... style dependently on some conditions
- entity: xxxxxxxx
card_mod:
style:
... style dependently on some conditions
- entity: xxxxxxxx
- entity: xxxxxxxx
Each card contains rows w/o card-mod & rows with card-mod.
Now let’s imagine that we can cover all these cases by some kind of universal styling:
card-mod-row-yaml: |
... styles for different domains dependently on some conditions
Here we may define styles for each domain using code like if config.entity.startswith('device_tracker.')
for different states ("home", “not_home”, “on”, “off” etc) + other different conditions.
Question:
Which way needs more HW resources?
Suppose we have a row for “input_boolean” which is not styled (neither by calling card_mod nor by card-mod-row-yaml) - but even this row will have a card-mod element containing our “universal style”:
That is why I suspect that using card-mod-themes gives a flexibility (+lots other positive things) but needs more resources.
On one of my Lovelace dashboards for a tablet, I want to remove the top blue header that has the microphone and three vertical dots. Doing some searching it appears that card-mod can do this.
I installed card-mod. Verified it is installed by modifying a card with the below example, which worked.
card_mod:
style: |
ha-card {
color: red;
}
I now want to do the below code which I found in the cookbook to remove the top header. When I add it to my lovelace page, right after the title section or at the bottom, nothing happens. Is this the properly place to add it?
no-top-header:
card-mod-theme: no-top-header
Make sure you use your actual theme yaml name. Also you need to reload theme service (frontend.reload_themes) and refresh your page after you edit a theme.yaml.
