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

[victoroos (Victor Roos)]

Hi all,

As far a so understood only here are card mod questions allowed.

I’m trying to get a fully transparant background with a gradient towards the right boxing to grey ish.

card_mod:
  style: |
    ha-card {
      border-width: 0px !important;
      background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
}
    } 

But I’m missing something as on the left there is still clearly “something” nor allowing the default dark bg from HA to show

[Mariusthvdb (Marius)]

@victoroos

background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
}

like this?

works with:

card_mod:
  style: |
    ha-card {
      background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
    }

note the correct indent of the bottom }

also dont use background-image, as there is no image, only a color gradient, so use background

[MrCaspan]

How do I make my icons double the size

type: custom:minimalistic-area-card
title: Ripley's Room
area: baby_s_room
hide_unavailable: false
camera_image: camera.ripleys_room
camera_view: live
state_color: true
shadow: true
entities:
  - entity: sensor.ripleys_room_sensor_temperature
  - entity: sensor.ripleys_room_sensor_humidity
  - entity: sensor.ripleys_heater_plug_power
    icon: mdi:solid
    type: markdown

[Ildar_Gabdullin]

@MrCaspan

make my icons double the size

Not using this card, try this:

type: custom:minimalistic-area-card
title: xxxx
entities:
  - entity: sensor.xiaomi_cg_1_temperature
  - entity: sensor.xiaomi_cg_1_humidity
  - entity: sensor.xiaomi_cg_1_co2
    icon: mdi:car
card_mod:
  style: |
    ha-card {
      --mdc-icon-size: 40px;
    }

But you need to adjust other things like paddings/margins as well, so this code is merely a starting point.

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

this code is merely a starting point.

Exactly. You’d better hop over to the dedicated Minimalistic card thread . Minimalistic is rediculously huge when it comes to their yaml config and modifications and needs special details all over
They might even have their own theme variables.

So go check that out

[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.