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

[Ildar_Gabdullin]

It is also possible that some custom cards called “minimalistic” are not related to that monstrous Minimalistic theme with tons of yaml settings. No idea about this particular minimalistic-area-card.
(I honestly see no benefits of this minimalistic-area-card in comparison to picture-glance or similar, but I only had a quick look at this custom card & most probably missed smth important)

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

some custom cards called “minimalistic” are not related to that monstrous Minimalistic theme with tons of yaml settings

I stand corrected. Please ignore what I wrote above about Minimalist

you are right this is GitHub - junalmeida/homeassistant-minimalistic-area-card: A minimalistic area card with sensors and buttons. and not to do with Minimalist cards / theme

I did play with this card before, and tried to use it for the exact use case you describe, replacing a picture-glance, but decided it was just not suited for my use case and went for the p-g in the end

[Hmmbob]

@Hmmbob

I’m applying the following styling to 8 cards in my dash, while the only difference between the 8 are the --icon-color: and --shape_color: directives.

How can I simply re-use the majority of the styling, while still being able to set those two color lines per card? I’ve been looking into yaml anchors, but fail to understand how to apply that in this use case?

Anyone a great idea on the above?

(The code is in the previous post)

[roydestroy]

This is the feed I get. I want to show only the lower part in the card.

[Mariusthvdb (Marius)]

you can not use anchors here.

you might be able to set variables (even per card or element) though and inject the variables into the configuration

a bit like this custom:button-card:

styles:
  custom_fields:
# create a color for the cpu element
    cpu:
      - padding-bottom: 2px
      - justify-self: start
      - --cpu-color: >
          [[[ var state = states['sensor.processor_use'].state;
              if (state < 10) return 'green';
              if (state < 25) return 'darkgreen';
              if (state < 45) return 'orange';
              if (state < 60) return 'maroon';
              return 'var(--alert-color)'; ]]]

and use that in the final makeup:

custom_fields:
  cpu: >
    [[[ return `<ha-icon icon=mdi:server style='width:12px;'> </ha-icon>
                Cpu: <span style='color: var(--cpu-color);'>
                ${helpers.localize(states['sensor.processor_use'])}</span>`; ]]]

aware this is not the same as your card, but the idea should help you check out if this can be done.

[Ildar_Gabdullin]

@roydestroy

I want to show only the lower part in the card.

Have a little experience with cameras - may be some transformations are possible on a camera integration level?

[MrCaspan]

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

[Mariusthvdb (Marius)]

@MrCaspan

this is just the only way I can find

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

[MrCaspan]

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

[MrCaspan]

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 who would have thought that Picture at a glance would support video, duhhh

[parautenbach (Pieter Rautenbach)]

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

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

most probably missed smth important

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

[roydestroy]

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)

[arganto]

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?

[parautenbach (Pieter Rautenbach)]

@roydestroy

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)

Perhaps crop it with a camera proxy.

[MrCaspan]

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?

[Ildar_Gabdullin]

@MrCaspan

Is there a way to get the state value to show up not just the icon?

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

[Ildar_Gabdullin]

@parautenbach

Perhaps crop it with a camera proxy

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.

[Mariusthvdb (Marius)]

@MrCaspan

Is there a way to get the state value to show up not just the icon?

like this you mean?

do as Ildar says

@Ildar_Gabdullin

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

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

[MrCaspan]

You da man