it was necessary to have that transparent (and still have the menu functional) while not shining through the template. Right now, I can click the text of the template
so it pops up the allowed menu options
In this case you cannot use flex and have to specify a position explicitly, agreed!
How to remove top toolbar:
There is an example in Cookbook to remove a toolbar.
May be useful in case of only ONE tab in dashboard.
This mod not only hides the toolbar but also moves the page higher:
card-mod-root-yaml: |
ha-app-layout $: |
div#wrapper div#contentContainer {
{% if is_state('input_boolean.test_boolean_2','on') %}
padding-top: 0px !important;
{% endif %}
}
.: |
app-header {
{% if is_state('input_boolean.test_boolean_2','on') %}
display: none;
{% endif %}
}
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 %};
}
which does exactly nothing…
Probably there is a syntax error here.
Try this:
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 %}
}
it does nothing
Marius, do you have this structure?
card-mod-root-yaml: |
xxxxxxxxxxx: |
xxxxxxxxxxxx {
...
}
xxxxxxxxxxx: |
xxxxxxxxxxxx {
...
}
xxxxxxxxxxx: |
xxxxxxxxxxxx {
...
}
.: |
xxxxxxxxxxx {
...
}
xxxxxxxxxxx {
...
}
xxxxxxxxxxx {
...
}
i.e. with first sections with 100500 DOM levels, then one-level sections.
yes, although I have nothing under the root-yaml itself currently, see
I am a fresh person here))), but I think that this structure is wrong:
It is wrong even for conventional card-mod
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?
Compare these two codes:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
color: blue;
background-color: magenta;
}
.: |
:host {
color: orange;
--label-badge-background-color: yellow;
}
and
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
color: blue;
background-color: magenta;
}
:host {
color: orange;
--label-badge-background-color: yellow;
}
The 2nd code will not work for the bottom part.
So, move your paper-tabs$: section above the .: | line.
“It works” - not a tenet.
Doctors say: there are 2 kinds of people: sick and not diagnosed yet )))
yeah, but that section is commented in my theme:
/* Hide chevrons
paper-tabs$: |
.not-visible {
display: none;
} */
so not valid anyways. And ofc, I did add the icon-changer section to above the .: | as you can see here:
my individual tab colorings start at line 119, and all work
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.
Had that happen to me as well, never did figure put why sometimes it’d work and others it would not.
I cannot get this to work too:
Classes
red-theme:
card-mod-theme: red-theme
...
card-mod-row: |
...
:host(.teal) {
background: teal;
}
:host(.purple) {
background: purple;
}
Also, I think there is a wrong indentation in the docs - the card-mod-row line has an extra indent.
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
Here is my code:
card-mod-row: |
:host(.class-row-red) {
color: red;
--paper-item-icon-color: red;
}
- type: entities
entities:
- entity: input_number.test_number
class: class-row-red
Do not forget to comment your card-mod-row-yaml code if present.
Changed the class manually in Code Inspector:
And the class works:
Now the question is - why the class was not specified to the row automatically?
Registered an issue
Update: got it working (see the next post), closed the issue
do notice Tom uses
card_mod:
class:
so I tested that too, with -yaml and without, and still no effect…
aaaaaaaaaaaaaaaaaaaaaaaa
I got it working!
- type: entities
entities:
- entity: input_number.test_number
card_mod:
class: class-row-cyan
Marius, 
1 Like
yep, me too:
1 Like