I guess that code is now outdated since HA changed a structure of a page.
Try the code below.
I changed a DOM path (did not touch height, width & position).
trying to change the icon of a tab is about the only thing left I like to establish in replacing my Custom Header from the old days. Please help me figuring this out.
We can change the color of a tab with:
paper-tab[aria-label='Home'] {
color: {{'red' if states('sensor.count_alerts_notifying') > '0'}};
}
but adding an icon line there wont work, inspector says the icon is inherited from ha-tabs, and shows a yellow exclamation mark.
If I try and do something like:
/* Set the color of the currently selected tab indicator. */
ha-tabs {
--paper-tabs-selection-bar-color: black !important;
--paper-tab[aria-label='Home summary'] {
ha-icon: mdi:help !important;
};
}
nothing happens, except for the tab indicator being colored black.
which overrides a background set in the regular View:
title: Solar
path: solar
icon: mdi:solar-power
background: center / cover no-repeat url('/local/images/solar_grid.png') fixed
maybe we can also override the icon like that?
answering myself: no we cant… there simp’y doesnt seem to be an item to override (set a value for in card-mod-theme) for icon?
Background may be changed by a corresponding property.
Icon may be changed by a brute force method:
card-mod-root-yaml: |
paper-tab[aria-label='zont'] 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 %}
}
Ooh nice! Going to play with that. The move to SVG icons sometime ago probably caused this brute force need…
Will test if it combines with my current colorizing settings.
no, I make them transparent depending on a template:
/* Optionally set the three-dots transparency,
to allow for a replacement template text. */
ha-button-menu {
color: {% if states('sensor.browsermod_safari') not in ['unknown','unavailable'] %}
{% if is_state('input_boolean.menu_options_template','on')%}transparent /*var(--primary-color)*/
{% endif %}
{% endif %};
}
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
