🔹 Card-mod - Add css styles to any lovelace card

I use this card because it allows me to put a frigate live camera feed as the background. so that way we can have a dashboard that tells us the temperature thermostat settings for our daughter’s bedroom. if there’s an easier way to do it this is just the only way I can find to do it using the minimalistic card

as stated above: why not give the HA card the was designed for this a try: Picture glance card - Home Assistant

I don’t see anywhere in that documentation about adding a live video feed for the background unless it’s just not documented?

NM I was searching for video not camera i see the options now… I will give this a try thank you… the title of this card is very misleading also :slight_smile: who would have thought that Picture at a glance would support video, duhhh

Are you maybe solving the wrong problem here? In other words, is this some sort of combined feed of two cameras?

to me, the main advantage is the display of the entities, that get colors according to their state, and not are the pale white color picture-glance makes them to be. (still dont get why that design decision was made btw, might be another good WTH… )
ahum: WTH Why dont entities in the picture-glance use their state-color

It is a camera that has two lenses and they are used simultaneously, (there is no way to cancel one of them) and the produced feed by default is this (again there is no way of changing that)

But the above screenshot is a more-info popup, isn’t it. So long story short, what is the card-type and card-yaml, where you want to mod and only show part of the camera feed?

Perhaps crop it with a camera proxy.

2 Likes

This only seems to show the icons and no text, I needed the text as it shows the temperature in her room not just an icon for temp that you have to click on to see the data. Is there a way to get the state value to show up not just the icon?

Isn’t it possible with “show_state: true” ?

Nice discovery. This is what I meant by a “some transformations are possible on a camera integration level”.
Otherwise it would be needed to use CSS properties like “height”, “translate()” etc, not to mention card-mod-themeing for popup.

1 Like

like this you mean?

do as Ildar says

and please give it some effort… it’s all in the docs

but, no longer card_mod related, so hop over to some other thread for specific needs on the picture-entity card

2 Likes

You da man

000051

1 Like

Sorry, you are right… apologies. I’ll give it more effort before asking simple questions.

Man, she is beautiful. All the best.

You can style this card a bit to see a temperature’s value w/o clipping.
1st post → link at the bottom titled “fantastic” → picture-glance.

1 Like

Tile + input_select:
one-line style:

With a name:

type: tile
entity: input_select.test_value
name: xxxx
hide_state: true
features:
  - type: select-options
card_mod:
  style:
    hui-card-features $: |
      .container {
        padding-top: 12px !important;
      }
    .: |
      .container {
        flex-direction: row !important;
      }

image

W/o a name:

type: tile
entity: input_select.test_value
hide_state: true
features:
  - type: select-options
card_mod:
  style:
    hui-card-features $: |
      .container {
        padding-top: 12px !important;
        padding-left: 0 !important;
      }
    .: |
      .container {
        flex-direction: row !important;
      }
      .container .content {
        padding-right: 0 !important;
      }

image

2 Likes

Thanks. I found that I had to also add name: ' ' to make the name disappear in the second case - perhaps because this is nested inside a stack-in-card? Either way it worked beautifully. Thanks very much!

I have another question that’s bugged me for a while.
Is it possible to change the color of the ‘away’ icon from red to amber on the mushroom person card? I associate red with an “alert” and I don’t consider someone being away from the home to an emergency so this red always makes me feel weird.

EDIT: been poking around the HTML (which is not a strength of mine at all) and it seems if I set the following var I should be able to get it to work but I’m unclear how I can do that.
--mush-rgb-state-person-not-home
Currently this is undefined so it falls back to some predefined danger rgb var.

I found the following suggestion how to set it elsewhere but it doesn’t work for me sadly :frowning:

card_mod:
   style: |
     :host {
       --mush-rgb-state-person-home: var(--rgb-blue);
       --mush-rgb-state-person-not-home: var(--rgb-purple);
       --mush-rgb-state-person-zone: var(--rgb-amber);
     }

EDIT2: Oh wow never mind. It DID work. It’s just that the ‘preview’ during editing the dashboard didn’t work. Once I refreshed the dashboard it’s all good. Yay :).

image

No, because your input_select entity does have some friendly name specified. In my example that entity did not have it specified, so there was nothing to show for the “name” option.

1 Like