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
(Browet Didier)
March 25, 2022, 8:38am
3
Can you share your code ? So we can see the type of card you use and eventually the possibility to change the background color…
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
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
2 Likes
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
p1977_3
(Peter Jansen)
April 5, 2023, 7:17pm
8
Question, does card-mod also work with custom:atomic-calendar-revive, I would like to have a png file as background of my calendar.
Is there an easy way to change the background color depending on the state of a door sensor?
This is what I use
card_mod:
style: |
ha-card {
background: {% if states('binary_sensor.door') == 'on' %} red {% endif %}
}
4 Likes
goldiwro
(Goldiwro)
January 8, 2024, 12:25pm
11
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');```
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.
This is not a card-mod issue IMO.
The issue is actually the way the html-card is designed. If you stack the cards inside individual stacks, the card-mod works fine. The cards do not appear to me to be ::slotted() when in an individual stack.
type: custom:stack-in-card
cards:
- type: custom:html-card
title: HTML card
content: >
Sun state: <b>[[sun.sun]]</b>, elevation:
[[sun.sun.attributes.elevation]]</br>
card_mod:
style: |
ha-card {
backgrou…
I see this was a cross post. I have two options on the other thread.