Hey there,
i did some modification to the advanced Room Card.
However, i cant figure out why the first Room Card is not in line with the room card nearby.
Can anyone tell me what i am doing wrong?
square: false
type: grid
cards:
- type: custom:button-card
name: null
icon: mdi:sofa
icon_color: '#4d4d4d'
custom_fields:
temp: >
[[[ return states['sensor.se_temperatursensor_temperature'].state + '°C'
]]]
hum: |
[[[ return states['sensor.se_temperatursensor_humidity'].state + '%' ]]]
btn1:
card:
type: custom:mushroom-light-card
entity: light.la_stehlampe
primary_info: none
secondary_info: none
tap_action:
action: toggle
icon: mdi:floor-lamp
btn2:
card:
type: custom:mushroom-light-card
entity: light.li_hintergrundschreibtisch
primary_info: none
secondary_info: none
tap_action:
action: toggle
icon: mdi:television-ambient-light
btn3:
card:
type: custom:mushroom-light-card
entity: light.li_hintergrundschreibtisch
primary_info: none
secondary_info: none
tap_action:
action: toggle
icon: mdi:television-ambient-light
styles:
grid:
- grid-template-areas: '"n n n" "temp temp temp" "hum hum hum" ". btn1 btn2 " ". btn3 btn3"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: repeat(2, min-content) repeat(2, min-content)
card:
- padding: 22px 8px 8px 22px
- height: 200px
custom_fields:
temp:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
- padding-top: 10px
hum:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
btn1:
- grid-area: btn1
- justify-content: center
- align-self: start
- padding-top: 0px
btn2:
- grid-area: btn2
- justify-content: center
- align-self: start
btn3:
- grid-area: btn3
- justify-content: center
- align-self: start
name:
- justify-self: start
- font-size: 18px
- font-weight: 500
- color: white
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: '#b5b5b5'
- border-radius: 500px
icon:
- position: relative
- width: 40px
- color: black
- opacity: '0.8'
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
- type: grid
square: false
columns: 1
cards:
- type: custom:button-card
name: null
icon: mdi:bed
icon_color: '#4d4d4d'
custom_fields:
temp: >
[[[ return
states['sensor.se_temperatursensor_temperature'].state + '°C'
]]]
hum: >
[[[ return states['sensor.se_temperatursensor_humidity'].state +
'%' ]]]
btn1:
card:
type: custom:mushroom-light-card
entity: light.schlafzimmer
primary_info: none
secondary_info: none
tap_action:
action: toggle
icon: mdi:ceiling-light
btn2:
card:
type: custom:mushroom-light-card
entity: light.st_lichterkettesz
primary_info: none
secondary_info: none
tap_action:
action: toggle
icon: mdi:string-lights
styles:
grid:
- grid-template-areas: '"n btn1 btn2" "temp btn1 btn2" "hum btn1 btn2" "i btn1 btn2"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content min-content 1fr
card:
- padding: 22px 8px 22px 22px
- height: 200px
custom_fields:
temp:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
- padding-top: 10px
hum:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
btn1:
- justify-content: end
- align-self: start
btn2:
- justify-content: end
- align-self: start
- padding-left: px
name:
- justify-self: start
- font-size: 18px
- font-weight: 500
- color: white
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: '#b5b5b5'
- border-radius: 500px
icon:
- position: relative
- width: 40px
- color: black
- opacity: '0.8'
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
- type: grid
square: false
columns: 1
cards:
- type: custom:button-card
name: null
icon: mdi:silverware-fork-knife
icon_color: '#4d4d4d'
custom_fields:
temp: >
[[[ return
states['sensor.se_temperatursensor_temperature'].state + '°C'
]]]
hum: >
[[[ return states['sensor.se_temperatursensor_humidity'].state +
'%' ]]]
btn1:
card:
type: custom:mushroom-light-card
entity: light.st_kuchenlicht
primary_info: none
secondary_info: none
tap_action:
action: toggle
icon: mdi:ceiling-light
btn2:
card:
type: custom:mushroom-light-card
entity: binary_sensor.bwm_kuche_occupancy
primary_info: none
secondary_info: none
tap_action:
action: toggle
icon: mdi:motion-sensor
styles:
grid:
- grid-template-areas: '"n btn1 btn2" "temp btn1 btn2" "hum btn1 btn2" "i btn1 btn2"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content min-content 1fr
card:
- padding: 22px 8px 22px 22px
- height: 200px
custom_fields:
temp:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
- padding-top: 10px
hum:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
btn1:
- justify-content: end
- align-self: start
btn2:
- justify-content: end
- align-self: start
- padding-left: px
name:
- justify-self: start
- font-size: 18px
- font-weight: 500
- color: white
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: '#b5b5b5'
- border-radius: 500px
icon:
- position: relative
- width: 40px
- color: black
- opacity: '0.8'
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
- type: grid
square: false
columns: 1
cards:
- type: custom:button-card
name: null
icon: mdi:paper-roll
icon_color: '#4d4d4d'
custom_fields:
temp: >
[[[ return
states['sensor.se_temperatursensor_temperature'].state + '°C'
]]]
hum: >
[[[ return states['sensor.se_temperatursensor_humidity'].state +
'%' ]]]
btn1:
card:
type: custom:mushroom-light-card
entity: light.li_bad
primary_info: none
secondary_info: none
tap_action:
action: toggle
icon: mdi:ceiling-light
btn2:
card:
type: custom:mushroom-light-card
entity: binary_sensor.bwm_bad_occupancy
primary_info: none
secondary_info: none
tap_action:
action: toggle
icon: mdi:motion-sensor
styles:
grid:
- grid-template-areas: '"n btn1 btn2" "temp btn1 btn2" "hum btn1 btn2" "i btn1 btn2"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content min-content 1fr
card:
- padding: 22px 8px 22px 22px
- height: 200px
custom_fields:
temp:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
- padding-top: 10px
hum:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
btn1:
- justify-content: end
- align-self: start
btn2:
- justify-content: end
- align-self: start
- padding-left: px
name:
- justify-self: start
- font-size: 18px
- font-weight: 500
- color: white
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: '#b5b5b5'
- border-radius: 500px
icon:
- position: relative
- width: 40px
- color: black
- opacity: '0.8'
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
- type: grid
square: false
columns: 1
cards:
- type: custom:button-card
name: null
icon: mdi:desktop-classic
icon_color: '#4d4d4d'
custom_fields:
temp: >
[[[ return
states['sensor.se_temperatursensor_temperature'].state + '°C'
]]]
hum: >
[[[ return states['sensor.se_temperatursensor_humidity'].state +
'%' ]]]
btn1:
card:
type: custom:mushroom-light-card
entity: light.li_hintergrundschreibtisch
primary_info: none
secondary_info: none
tap_action:
action: toggle
icon: mdi:television-ambient-light
btn2:
card:
type: custom:mushroom-light-card
entity: switch.desk_light
primary_info: none
secondary_info: none
tap_action:
action: toggle
icon: phu:salt-lamp
styles:
grid:
- grid-template-areas: '"n btn1 btn2" "temp btn1 btn2" "hum btn1 btn2" "i btn1 btn2"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content min-content 1fr
card:
- padding: 22px 8px 22px 22px
- height: 200px
custom_fields:
temp:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
- padding-top: 10px
hum:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
btn1:
- justify-content: end
- align-self: start
btn2:
- justify-content: end
- align-self: start
- padding-left: px
name:
- justify-self: start
- font-size: 18px
- font-weight: 500
- color: white
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: '#b5b5b5'
- border-radius: 500px
icon:
- position: relative
- width: 40px
- color: black
- opacity: '0.8'
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
- type: grid
square: false
columns: 1
cards:
- type: custom:button-card
name: null
icon: phu:3dprinter-printing
icon_color: '#4d4d4d'
custom_fields:
temp: >
[[[ return
states['sensor.se_temperatursensor_temperature'].state + '°C'
]]]
hum: >
[[[ return states['sensor.se_temperatursensor_humidity'].state +
'%' ]]]
btn1:
card:
type: custom:mushroom-light-card
entity: switch.printer
primary_info: none
secondary_info: none
tap_action:
action: toggle
icon: mdi:power-plug
btn2:
card:
type: custom:mushroom-light-card
entity: image.a1_kamera
primary_info: none
secondary_info: none
tap_action:
action: more-info
icon: mdi:video
styles:
grid:
- grid-template-areas: '"n btn1 btn2" "temp btn1 btn2" "hum btn1 btn2" "i btn1 btn2"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content min-content 1fr
card:
- padding: 22px 8px 22px 22px
- height: 200px
custom_fields:
temp:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
- padding-top: 10px
hum:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
btn1:
- justify-content: end
- align-self: start
btn2:
- justify-content: end
- align-self: start
- padding-left: px
name:
- justify-self: start
- font-size: 18px
- font-weight: 500
- color: white
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: '#b5b5b5'
- border-radius: 500px
icon:
- position: relative
- width: 40px
- color: black
- opacity: '0.8'
columns: 2