was that an answer to my question Kendell?, cause we seem to be miscommunicationā¦ I asked where we can use the user variable in the jinja templates, like you said above. Seems not to be possible.
You can use the user template pretty much everywhere, except in the template testing part from what I could tell
that would be frontend (hence only in markdown and custom cards supporting jinja) then, not backend template maybe?
1 Like
I tried often to use the {{user}} variable as template. Doesnāt work.
Now, I use that in a markdown card which seem to be the only location, where it works.
I forgot to add it in the WTH thread as request.
I can not understand, why only in markdown.
How is this related to card-mod themeing? It works in card-mod theming and thatās all that matters right?
Please donāt advertise. If you want your feature request for the frontend to be heard, anyway it should be here:
https://github.com/home-assistant/frontend/discussions/new
sorry for that - and thanks for the link - i have just done.
Any idea how to replicate Custom Headers fit_tabs feature?
I would like the tabs to be evenly spaced and not left-justified.
My CSS skills are failing meā¦
This wonāt work because itās based on a flex layout. Try using flex properties for it.
Does anyone know how to get the titles next to the icons in the header tabs?
Used to do this with the following in custom_header:
tab_icons_and_text: true
Thanks
You can use a ::before for each one manually set.
1 Like
Requesting some help from the community. I am trying to change the color of the selected tab bar based on the status of water leak sensors or smoke detectors. Tried to do so with the following:
card-mod-theme: "my_dark_theme"
header-height: 48px
card-mod-root-yaml: |
.: |
ha-tabs {
{% if is_state(binary_sensor.all_leak_sensors_group, 'on') or +
is_state(sensor.main_garage_protect_smoke_co2_group, 'Emergency') or +
is_state(sensor.ecolink_firefighter_smoke_co2_group, 'Emergency') %}
--paper-tabs-selection-bar-color: var(--leak_detected_color) !important;
{% elif is_state(sensor.main_garage_protect_smoke_co2_group, 'Warning') %}
--paper-tabs-selection-bar-color: var(--lux_hi) !important;
{% else %}
--paper-tabs-selection-bar-color: var(--accent) !important;
{% endif %}
}
paper-tab[aria-selected=true] {
color: var(--accent) !important;
}
Selected tab icon color successfully sets to āāaccentā color but the selected tab bar stays at default white color. Is it even possible to do this?
Any inputs and/or suggestions are highly appreciated.
Are you sure you set those colors in your theme? Iām pretty sure you canāt use underscores in CSS.
Yep, the colors are set in the theme.
Same {% if ā¦ elif ā¦ else ā¦ endif %} construct and variables were being used in custom header, and working. The fact that earlier construct was in lovelace.yaml while this one is part of theme definition, could this be causing an issue? Is it ok to refer to sensor state in theme.yaml?
Thanks for your help, Kendell.
I have 2 questions to @KTibow
Is it possible to have compact header aligned to the center?
As I do not have activated Almond and the mic icon is still there 
is there any other way how to disable it?
Edit:
Already managed the mic disappeared 
Kendell, checked whether use of underscores in theme color names was causing issues. Used the following simple construct to test it, and it worked successfully. The selected tab bar color was set to --leak_detected_color.
Any suggestions to further narrow down the problem?
card-mod-theme: "my_dark_theme"
header-height: 48px
card-mod-root-yaml: |
.: |
ha-tabs {
--paper-tabs-selection-bar-color: var(--leak_detected_color) !important;
}
paper-tab[aria-selected=true] {
color: var(--accent) !important;
}
Why do you have a plus inside of your if statement? 
Also you might need to quote your entity IDs.
Icons spread out or clumped together in the middle?
To break the really long {% if %} construct over multiple lines for readability. Have tested it both ways - split this way using plus as well as all of it on one really long line.