Newbie to card mod and css styles here. I’ve been playing around with some room cards using a combination of button card/mushroom. Following along with the ideas from https://www.youtube.com/watch?v=RSQwxuAm
I am having a lot of trouble adding in a background image to my card. Trialing first with the first card in the vertical stack below (Master).
Haven’t been able to get it to work under card mod or styles:. Hoping just a newbie mistake but I would appreciate if anyone has any suggestions.
type: vertical-stack
cards:
- square: false
type: grid
cards:
- type: custom:button-card
name: Master
icon: mdi:bed-king-outline
entity: none
card_mod:
style: |
ha-card > div {
padding: 0px 0px 0px!important;
}
ha-card {
padding: 10px 10px!important;
border: none;
border-radius: 10px;
background-image: url("/local/background/MasterBW.jpg")
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:lightbulb-outline
entity: light.philips_bulb_1
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_bulb_1', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:led-strip-variant
entity: light.philips_strip_1
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_strip_1', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:television
entity: media_player.bedroom_tv
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('media_player.bedroom_tv', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
styles:
grid:
- grid-template-areas: '"n btn" "s btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 10px 10px 10px 10px
- height: 132px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: light-grey
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: '1'
img_cell:
- position: absolute
- width: 60px
- height: 60px
- left: 0
- bottom: 0
- margin: 0 0 10px 10px
- background: rgba(0,0,0,0.1)
- border-radius: 10px
icon:
- width: 50px
- color: light-grey
- opacity: '1'
show_state: true
- type: custom:button-card
name: Living
icon: mdi:sofa-outline
entity: none
card_mod:
style: |
ha-card > div {
padding: 0px 0px 0px!important;
}
ha-card {
padding: 10px 10px!important;
border: none;
border-radius: 10px;
background-color: rgba(0,0,0,0.1);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:bullhorn-outline
entity: switch.neo_siren_1_alarm
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('switch.neo_siren_1_alarm', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:led-strip-variant
entity: light.philips_strip_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_strip_2', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
styles:
grid:
- grid-template-areas: '"n btn" "s btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 10px 10px 10px 10px
- height: 132px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: light-grey
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: '0.7'
img_cell:
- justify-content: start
- position: absolute
- width: 60px
- height: 60px
- left: 0
- bottom: 0
- margin: 0 0 10px 10px
- background: rgba(0,0,0,0.1)
- border-radius: 10px
icon:
- width: 40px
- color: light-grey
- opacity: '1'
- padding: 10px
show_state: true
columns: 2