right, and, tbh, even the
paper-tab[aria-label='Home'] ha-icon $: |
ha-svg-icon {
display: none;
}
doesnt remove the icon in my config…
o. wait, I had to move it up, directly under the card-mod-root-yaml. now it works 
One more attempt (seems to be same, but just in case):
paper-tab[aria-label='zont'] ha-icon:
$: |
ha-svg-icon {
display: none;
}
.: |
paper-tab[aria-label='zont'] ha-icon::before {
background: url("/local/images/persons/ildar.png");
content: " --------------";
color: transparent;
background-size: 100% 100%;
}
paper-tab[aria-label='zont'] ha-icon::after {
margin-left: 10px;
content: "my tab";
}
As I said it is not stable - in my setup it works after F5
maybe we should investigate another way, just like we can do with the background:
weather-background:
card-mod-theme: weather-background
card-mod-view: |
hui-masonry-view {
background: url({{state_attr('camera.buienradar','entity_picture')}});
}
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 %}
}
Cannot say that this is a stable solution.
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.
After some thinking I may propose this more universal code since it does not depend on these top, position etc - it uses flex instead:
.: |
ha-button-menu {
display: flex;
}
ha-button-menu::before {
content: "{{ '13:34:21' }}";
color: var(--text-primary-color);
align-self: center;
outline: 1px solid var(--text-primary-color);
outline-offset: 5px;
border-radius: 2px;
}
Update 28.12.21 - added rounded outline.
I admit I have been looking for a more generic way too, however your code does this:
where my absolute code makes it along to the right edge nicely:
align-self: right does odd things: moving it upward instead of to the left…
Do you have your [:] buttons hidden?
My code is for not hidden buttons.
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 %};
}
also, I cant make the icon changer happen…
Did you set display: flex for the ha-button-menu ?
If the [:] button is transparent then my code gives this:
Surely there will be a gap between added element and the right border.
Why not setting display: none instead of color: transparent?
Then the text will be close to the right border:
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?