šŸ”¹ Card-mod - Add css styles to any lovelace card

if only you we could use a theme variable for entity_pictures based on state (home/not_home)…

currently I need to use a custom plugin to do:

homeassistant:

  customize_domain:

    person:
      templates:
        entity_picture: >
          var id = entity.entity_id.split('.')[1];
          return state === 'not_home'
          ? '/local/family/' + id + '_not_home.png' : '/local/family/' + id + '.jpg';

and it’s the only way to set those pictures to grayscale everywhere in the UI.

we can also set a card_mod and filter to grayscale(), but then it still wont do that in more-info’s etc.

Maybe you know of a way to PR that too ;=-) ?

So, you are asking about a possibility to set a different icon or a different filter? The latter is easier…

well, tbh, both would be great…

I am using my card mods like this:

style:
  hui-generic-entity-row:
    $: |
      state-badge {
        filter:
          {{'grayscale(1)' if is_state(config.entity,'not_home') else 'none'}};
      }

and need to adapt them based on the card_type etc. And even then, those are not applied in the more-info’s and map cards (that require yet another mod), or logbook for example.

so, the custom plugin sets it in the way custom-ui used to do: add the attribute to the entity, and template it.
With that, it is applied everywhere.

I am after that end result. the way to get there is only a means…

In the end, I guess I would hope for something along the lines of this:

state-badge-home-filter: none
state-badge-not-home-filter: grayscale(1)

Not that currently none part of frontend shows a state-dependent entity_picture. What we can do is adding a filter CSS property = some theme variable.
Cannot it do it right now, away from PC…

Ha, you are emufan?

great, it will take out 2 fixed mods in my card-mod-theming :wink:

I wonder though, given we have these variables:

ha-badge-border-radius: 24px #var(--ha-card-border-radius)
ha-badge-size: 36px

why wasnt a theme variable naming like
ha-badge-icon-size and ha-badge-font-size chosen?

the new ha-font-size-badge and ha-icon-size-badge seem so out of sync with the regular naming convention

given this is still unreleased, maybe it’s not too late to rename your new variables like that?

yes that would be a good thing, and then the user can set their own theme variable

and yes, HA frontend is not really up to speed using entity_pictures… Ive wondered since forever (and files FR’s for it) to set entity_pictures via the UI, just like we can do icons.

but somehow this gets neglected completely. Even while eg the Tile cards can pick the entity_pictures if they exist…

need some helpm identifying the correct element… I always like the border-radius of element in tile card to be 0, just like all border-radius in my themes.

I set that on an input_select eg like this under card_mod:

style:
  hui-card-features $:
    hui-card-feature $:
      hui-select-options-card-feature $:
        ha-control-select-menu$: |
          .select .select-anchor {
            border-radius: var(--ha-card-border-radius);
          }

same for most of the other features.

However, I now see the drop down is not affected by the mod.
No matter how I try to touch the mwc-list or the ul under it, the rounded corners remain.
Can anyone help me out?

  style:
    hui-card-features $:
      hui-card-feature $:
        hui-select-options-card-feature $:
          ha-control-select-menu: 
            $: |
              .select .select-anchor {
                border-radius: var(--ha-card-border-radius);
              }
              mwc-menu {
                --mdc-shape-medium: 0px !important;
              }
              
1 Like

nice, and yes, confirmed:

# tile_input_select
style:
  hui-card-features $:
    hui-card-feature $:
      hui-select-options-card-feature $:
        ha-control-select-menu $: |
          .select .select-anchor {
            border-radius: var(--ha-card-border-radius);
          }
          mwc-menu {
            --mdc-shape-medium: var(--ha-card-border-radius) !important;
          }

shows as

Ive added it to my post on modding the Tile card features here

now there is 1 extra thing that breaks my brains:
I can no longer mod the title (.card-header) of the Sankey chart card (custom one)

as you can see in the same screenshot. Energie verbruik.

It was changed some time ago, but then we (arganto and I) managed to find a reliable mod somewhere above in this thread.

But I now noticed that is lost again. Maybe you can find a way to touch the card-header once again?

I don’t use Sankey card. I don’t know what the config looks like from it, is the header the default from the card? Show me part of the config, I will download Sankey and take a look at it… :wink:

thx.

yes indeed:

type: custom:config-template-card
entities:
  - input_select.sankey_min_state
variables:
  min_state: states['input_select.sankey_min_state'].state
card:
  type: custom:sankey-chart
  title: Energie verbruik

I did take the config-template-card out to see if that causes trouble, but even then the header remains unmodded…

this is the Dom, hope you can see it:

and, when entering there, there is no problem.

I am using card_mod 3.5.5, but even with the current 3.4.4 release, it seems unreliable to mod.
(of course I did try to set the ha-card element in the 3.5.5 way too, but that didnt help, so I wont mention it further here not to confuse the thread)

note this is the custom GitHub - MindFreeze/ha-sankey-chart: A Home Assistant lovelace card to display a sankey chart. For example for power consumption card, not the current experimental built-in energy sankey card

I dont get it, as the custom card itself seems to not have changed those detail at all

try this…

card_mod:
  style:
    $: |
     h1.card-header {
      color: red !important;
      text-align: center;
     }

I will, but now notice my

      card_mod:
        style:
          $: |
              .card-header {
                   background: var(--background-color-off) !important;
                   font-weight: 400 !important;
                   font-size: 20px !important;
                   color: var(--text-color-off) !important;
                   padding: 0px 12px !important;
                   margin: 0px 0px 16px 0px !important;
                 }

on 3.4.4 does work after all.

How odd.
Let me see if it was a temporary fluke, or that I need to rethink 3.5.0 (it mostly only needs an extra ha-card before this, so should work…)

:grinning: :man_shrugging:

I will try with 3.5
@Mariusthvdb

please because I cant make it happen… Maybe DM me if you find it, so we doing disturb the crowd ?

1 Like

have another apparent change. Missed it during beta, but

# tile_person:
style:
  ha-tile-image $: |
    .image {
      filter: {{'grayscale(1)' if is_state(config.entity,'not_home') else 'none'}};
    }

  .: |
    {% set id = states[config.entity].object_id %}
    ha-card {
      border: solid {{states('sensor.'~id~'_background_color')}} 2px;
      background: var(--background-color);
      background-image: url("{{states('sensor.'~id~'_overlay_image')}}");
      background-size: 35px;
      background-position: 95% 50%;
      background-repeat: no-repeat;
    }
    .icon-container {
      border-radius: 24px;
      border: solid {{states('sensor.'~id~'_background_color')}} 2px;
    }

used to set the filter on the entity_picture (.image) and a border on the icon_container. Those 2 no longer work, while the ha-card works as before.

The filter does not get applied even when set directly, without template

Can anyone check what happened with a tile and a person entity showing the entity_picture?

edit/update

I’ve managed to do this for now:

style:
  ha-tile-icon $: |
    {% set id = states[config.entity].object_id %}
    .container {
      filter: {{'grayscale(1)' if is_state(config.entity,'not_home') else 'none'}};
      border: solid {{states('sensor.'~id~'_background_color')}} 2px;
      border-radius: 0px !important;
    }

  .: |
    {% set id = states[config.entity].object_id %}
    ha-card {
      border: solid {{states('sensor.'~id~'_background_color')}} 2px;
      background: var(--background-color);
      background-image: url("{{states('sensor.'~id~'_overlay_image')}}");
      background-size: 35px;
      background-position: 95% 50%;
      background-repeat: no-repeat;
    }

and it works alright, with the one caveat, that the filter grayscale now is also set to the border of the tile-icon (the entity_picture…)

before, I had that set separately, not sure how to get that back yet.

update

found it…

# tile_person:
style:
  ha-tile-icon $: |
    {% set id = states[config.entity].object_id %}
    .container {
      border: solid {{states('sensor.'~id~'_background_color')}} 2px;
      border-radius: 0px !important;
    }
    .container img {
      filter: {{'grayscale(1)' if is_state(config.entity,'not_home') else 'none'}};
    }

in addition to the above, this now also works again:

      - type: tile
        entity: light.alarm
        icon: mdi:alarm-light
        card_mod: &overlay
          style:
            ha-tile-icon$: |
              .container {
                border-radius: 24px;
                {% set brightness = state_attr(config.entity,'brightness')|float(0) / 2.54 %}
                background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
                conic-gradient(var(--tile-color) {{brightness}}% 0%,
                var(--card-background-color) 0% 100%);
              }

where previously we set the overlay on the

      card_mod:
        style: |
          .icon-container {
            border-radius: 24px;
            background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
            conic-gradient(var(--tile-color) {{states(config.entity)}}% 0%,
            var(--card-background-color) 0% 100%);
          }

and the latter no longer works.

I’m trying to get the slider on this mini-media-player card to match all my other sliders (light cards, etc). I’ve been banging my head on this for hours. After reading through tons of posts and trying different things, this is what I’ve got. Which has more in it than it would need for CSS specificity rules. I’m sure it can be simplified, but I’m not sure what I’m missing to make it work. Ildar’s linked post about this card seems to be outdated.

card_mod:
  style:
    div .mmp-player:
      div .mmp-player__core .flex:
        mmp-powerstrip $:
          mmp-media-controls $:
            div .mmp-media-controls__volume .flex:
              ha-slider $:
                div .container: |
                  input #end {
                    --md-sys-color-primary: red !important;
                  }

card-mod-helper gave me this (starting at the card):
mini-media-player$ha-card>div.mmp-player>div.mmp-player__core.flex>mmp-powerstrip$mmp-media-controls$div>ha-slider$#end

Here’s the element in the Firefox inspector. I can mess with this and actually change it.

card_mod:
  style:
    mmp-media-controls $: |
      ha-slider {
        --md-sys-color-primary: red !important;
      }

But in my test, I don’t have the mmp-powerstrip element. So don’t know from where you are getting it.

Awesome, thanks!

For posterity… hiding the controls gives me the extra mmp-powerstrip element. We use this TV more like a monitor, which is controlled with mouse and keyboard (not much like a media player).

type: custom:mini-media-player
entity: media_player.main_tv
card_mod:
  style:
    mmp-powerstrip $:
      mmp-media-controls $: |
        ha-slider {
          --md-sys-color-primary: var(--primary-color) !important;
        }
hide:
  controls: true