Hi all,
It looks like a simple question but I cannot find the working answer. Could you please advise me how to change the header font size (make it smaller) in following vertical-stack and how to save some space between header and button cards?
Thank you.
type: vertical-stack
title: Scene
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.sonoff_1120a09bd4
name: Lamps
size: 40%
state:
- value: 'on'
color: rgb(223, 218, 0)
icon: mdi:lamps
styles:
card:
- background-color: ivory
- box-shadow: 0px 0px 20px 2px rgb(240, 194, 9)
- value: 'off'
icon: mdi:lamps-outline
styles:
card:
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: custom:button-card
entity: switch.sonoff_1120a09345
name: TV light
size: 40%
state:
- value: 'on'
color: rgb(223, 218, 0)
icon: mdi:television
styles:
card:
- background-color: ivory
- box-shadow: 0px 0px 20px 2px rgb(240, 194, 9)
- value: 'off'
icon: mdi:television-off
styles:
card:
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: custom:button-card
entity: switch.sonoff_1120b0389f
name: Garden lights
size: 40%
state:
- value: 'on'
color: rgb(223, 218, 0)
icon: mdi:alarm-light-outline
styles:
card:
- background-color: ivory
- box-shadow: 0px 0px 20px 2px rgb(240, 194, 9)
- value: 'off'
icon: mdi:alarm-light-off-outline
styles:
card:
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: custom:button-card
entity: switch.sonoff_11211a38ac
name: Kitchen lights
size: 40%
state:
- value: 'on'
color: rgb(223, 218, 0)
icon: mdi:track-light
styles:
card:
- background-color: ivory
- box-shadow: 0px 0px 20px 2px rgb(240, 194, 9)
- value: 'off'
icon: mdi:track-light-off
styles:
card:
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: horizontal-stack
cards:
- type: custom:button-card
name: Gate
entity: binary_sensor.gate_opening_detector
color: rgb(64, 114, 164)
size: 40%
state:
- value: 'on'
color: rgb(255, 124, 128)
icon: mdi:gate-open
styles:
card:
- background-color: lightpink
- box-shadow: 0px 0px 20px 2px rgb(255, 124, 128)
- value: 'off'
icon: mdi:gate
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.gate_open_close
styles:
card:
- '--mdc-ripple-color': green
- '--mdc-ripple-press-opacity': 0.7
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: custom:button-card
name: Gate entrance
icon: mdi:gate-arrow-right
color: rgb(64, 114, 164)
size: 40%
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.gate_entrance
styles:
card:
- '--mdc-ripple-color': green
- '--mdc-ripple-press-opacity': 0.7
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: custom:button-card
name: Garage door (W)
entity: binary_sensor.garage_door_w_opening_detector
color: rgb(64, 114, 164)
size: 40%
state:
- value: 'on'
color: rgb(255, 124, 128)
icon: mdi:garage-open-variant
styles:
card:
- background-color: lightpink
- box-shadow: 0px 0px 20px 2px rgb(255, 124, 128)
- value: 'off'
icon: mdi:garage-variant
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.open_garage_door_w
styles:
card:
- '--mdc-ripple-color': green
- '--mdc-ripple-press-opacity': 0.7
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: custom:button-card
name: Garage door (E)
entity: binary_sensor.garage_door_e_opening_detector
color: rgb(64, 114, 164)
size: 40%
state:
- value: 'on'
color: rgb(255, 124, 128)
icon: mdi:garage-open-variant
styles:
card:
- background-color: lightpink
- box-shadow: 0px 0px 20px 2px rgb(255, 124, 128)
- value: 'off'
icon: mdi:garage-variant
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.open_garage_door_e
styles:
card:
- '--mdc-ripple-color': green
- '--mdc-ripple-press-opacity': 0.7
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
