I want to add an image to the entire card, but it seems like I can’t get card_mod to work with the main box. I have an easy layout card to use the grid and while, each entity has a card mod css attached, I want the layout card to have a background image.
this is my code.
type: custom:easy-layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
primary: PC Uptime
secondary: |
{{ states(config.entity) }}
entity: sensor.nerdbox_pc_uptime
view_layout:
grid-area: header
card_mod:
style: |
ha-card {
--card-primary-font-size: 1.5rem;
--primary-text-color: white;
--secondary-text-color: green;
border: 1px;
box-shadow: none;
background: rgba(0,0,0,0);
}
- type: custom:mushroom-template-card
icon: mdi:sleep
entity: input_boolean.pc_sleep_disabler
view_layout:
grid-area: main1-1
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size:50px;
}
.: |
ha-card {
background: rgba(0,0,0,0);
}
- type: custom:mushroom-template-card
icon: mdi:wrench-clock
entity: input_boolean.maintenance_mode_toggle
view_layout:
grid-area: main2-1
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size:50px;
}
.: |
ha-card {
background: rgba(0,0,0,0);
}
- type: custom:mushroom-template-card
icon: mdi:lan-connect
entity: input_boolean.wol_disabler
view_layout:
grid-area: main3-1
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size:50px;
}
.: |
ha-card {
background: rgba(0,0,0,0);
}
- type: custom:mushroom-template-card
icon: mdi:monitor-lock
entity: input_boolean.resolution_check_disabler
view_layout:
grid-area: main4-1
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size:50px;
}
.: |
ha-card {
background: rgba(0,0,0,0);
}
- type: custom:mushroom-template-card
icon: mdi:power
entity: switch.nerdbox
view_layout:
grid-area: sensor5
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size:65px;
}
.: |
ha-card {
background: rgba(0,0,0,0);
}
layout:
grid-template-columns: min-content 1fr min-content
grid-template-rows: auto
grid-template-areas: |
"header header header"
"main1-1 main1-2 sensor1"
"main2-1 main2-2 sensor2"
"main3-1 main3-2 sensor3"
"main4-1 main4-2 sensor4"
"main5-1 main5-2 sensor5"
So basically what I want to do is attach a background to the card that defines the grid layout, and not the sub entities. Is that possible?