šŸ”¹ Card-mod - Super-charge your themes!

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?

Remove Sidebar (and 3-Dot-Menu) for some users? Check this

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 :frowning: is there any other way how to disable it?
Edit:
Already managed the mic disappeared :slight_smile:

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? :thinking: 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.