Change Lovalce card background colour

wigster · March 25, 2022, 8:20am

Hi,

I have a bunch of vertical stack cards on my dashboard – lights grouped by room – and I would like each vertical stack group to have a slightly different background colour, to separate them visually. How do I achieve this?

I have seen various code snippets containing style and card commands, but I cannot find any documentation for this. In particular, I’ve tried adding the below without success. If I add it to the vertical stack card, the code editor complains. If I add it to the sub-cards – nothing seems to happen.

   style: |
      ha-card { 
          --ha-card-background: "rgba(30, 30, 30, 0.0)";
      }

browetd · March 25, 2022, 8:38am

Can you share your code ? So we can see the type of card you use and eventually the possibility to change the background color…

wigster · March 25, 2022, 10:05am

For example this is a vertical stack containing to custom light cards. I’d like either the vertical stack or the two subcards to have a changed background.

type: vertical-stack
cards:
  - shorten_cards: false
    consolidate_entities: false
    child_card: false
    hide_header: false
    header: Gabinet Biurko
    color_wheel: false
    persist_features: false
    brightness: true
    color_temp: false
    white_value: false
    color_picker: false
    smooth_color_wheel: false
    speed: false
    intensity: false
    force_features: false
    show_slider_percent: true
    full_width_sliders: false
    brightness_icon: weather-sunny
    white_icon: file-word-box
    temperature_icon: thermometer
    speed_icon: speedometer
    intensity_icon: transit-connection-horizontal
    type: custom:light-entity-card
    entity: light.group_gabinet_desk
  - shorten_cards: false
    consolidate_entities: false
    child_card: false
    hide_header: false
    header: Gabinet Łóżko
    color_wheel: false
    persist_features: false
    brightness: false
    color_temp: false
    white_value: false
    color_picker: false
    smooth_color_wheel: false
    speed: false
    intensity: false
    force_features: false
    show_slider_percent: false
    full_width_sliders: false
    brightness_icon: weather-sunny
    white_icon: file-word-box
    temperature_icon: thermometer
    speed_icon: speedometer
    intensity_icon: transit-connection-horizontal
    type: custom:light-entity-card
    entity: light.gabinet_bed

dexstar · March 25, 2022, 11:03am

Try like this my friend.

type: vertical-stack
cards:
  - shorten_cards: false
    consolidate_entities: false
    child_card: false
    hide_header: false
    header: Gabinet Biurko
    color_wheel: false
    persist_features: false
    brightness: true
    color_temp: false
    white_value: false
    color_picker: false
    smooth_color_wheel: false
    speed: false
    intensity: false
    force_features: false
    show_slider_percent: true
    full_width_sliders: false
    brightness_icon: weather-sunny
    white_icon: file-word-box
    temperature_icon: thermometer
    speed_icon: speedometer
    intensity_icon: transit-connection-horizontal
    type: custom:light-entity-card
    entity: light.group_gabinet_desk
    card_mod:
      style: |
        ha-card {
          background: orange;
          box-shadow: none;
        }
  - shorten_cards: false
    consolidate_entities: false
    child_card: false
    hide_header: false
    header: Gabinet Łóżko
    color_wheel: false
    persist_features: false
    brightness: false
    color_temp: false
    white_value: false
    color_picker: false
    smooth_color_wheel: false
    speed: false
    intensity: false
    force_features: false
    show_slider_percent: false
    full_width_sliders: false
    brightness_icon: weather-sunny
    white_icon: file-word-box
    temperature_icon: thermometer
    speed_icon: speedometer
    intensity_icon: transit-connection-horizontal
    type: custom:light-entity-card
    entity: light.gabinet_bed
    card_mod:
      style: |
        ha-card {
          background: green;
          box-shadow: none;
        }

Result looks like this.

You need lovelace-card-mod installed.

Let me know how you go with it

Holdestmade · March 25, 2022, 12:42pm

I never knew this was possible, I’ve used a template for the colour to change it to red when motion in a room. Thanks

wigster · March 25, 2022, 1:29pm

Fantastisk! Thanks you!

p1977_3 · April 5, 2023, 7:17pm

Question, does card-mod also work with custom:atomic-calendar-revive, I would like to have a png file as background of my calendar.

bearli97 · October 21, 2023, 8:28am

Is there an easy way to change the background color depending on the state of a door sensor?

Holdestmade · October 22, 2023, 1:20pm

This is what I use

card_mod:
  style: |
    ha-card {
      background: {% if states('binary_sensor.door') == 'on' %} red {% endif %}
    }

goldiwro · January 8, 2024, 12:25pm

Can anyone tell me why the background image doesn’t want to show?

type: vertical-stack
cards:
  - type: entities
    entities:
      - sensor.date
      - sensor.date_time
      - sensor.date_time_utc
    card_mod:
      style: |
        ha-card  {
          background-color: black;
          background-image: url('/media/IMG_0854.jpeg');
          background-size: 100%;
          background-position: center;
          filter:  opacity(0.5);
          background-repeat: no-repeat;
          
        }

The image exists of course:

It works if I use HTTP link like:

background-image: url('https://media.architecturaldigest.com/photos/64f71af50a84399fbdce2f6a/16:9/w_2240,c_limit/Living%20with%20Lolo%20Photo%20Credit_%20Life%20Created%204.jpg');```

bobtech · April 21, 2024, 12:05pm

Please help me to figure out what am I doing wrong. I want to have different colors for each card, but seems that last style applies to all previous cards.

LiQuid_cOOled · April 22, 2024, 5:42am

I see this was a cross post. I have two options on the other thread.