Skip to content

Instantly share code, notes, and snippets.

@mnoah66

mnoah66/button_card_template_container.yaml

Created December 12, 2022 13:26
Show Gist options
  • Save mnoah66/fb3c1ab5032ee21089b64a0ed268a310 to your computer and use it in GitHub Desktop.
Save mnoah66/fb3c1ab5032ee21089b64a0ed268a310 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
button_card_template_container.yaml
button_card_templates:
container:
styles:
card:
- padding: 1px
- background-color: rgba(0,0,0,0)
- box-shadow: 0px 0px 0px 0px
name:
- padding: 0.4em
- margin-left: 0.3em
- width: 100%
- text-align: left
- font-size: 22px
- filter: brightness(90%)
grid:
- grid-template-areas: '"i" "n" "buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- background-color: rgba(0,0,0,0)
- margin: 0
- padding: 0.3em
Raw
dashboard.yaml
type: custom:button-card
template: container
name: |
[[[
return "KIDS | " + "<span style='font-size:13px;vertical-align:middle'>" + states["sensor.bedroom_temperature"].state + "&#176;</span>" +"<span style='font-size:13px;vertical-align:middle'> | "+ states["sensor.bedroom_humidity"].state + "% Humidity</span><span style='font-size:12px;vertical-align:middle;float:right;margin:8px;'>More</span>";;
]]]
tap_action:
action: navigate
navigation_path: /lovelace/finley
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: light.finley_ceiling_fan
icon: mdi:lightbulb-group
aspect_ratio: 1/1
name: MAIN
color: goldenrod
styles:
card:
- border-radius: 10%
- padding: 5%
- color: null
- font-size: 12px
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp" "n n" "tempy tempy"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
name:
- font-weight: bold
- font-size: 13px
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- width: 80%
- margin-top: '-10%'
custom_fields:
tempy:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
custom_fields:
temp: |
[[[
if (states['binary_sensor.mancave_motion'].state == 'on')
return `<ha-icon icon="mdi:motion-sensor"></ha-icon>`;
return `<ha-icon icon="mdi:motion-sensor-off" style="width: 18x; height: 18px;color:gray"></ha-icon>`;
]]]
tempy: |
[[[
return `<span><span style="color: var(--text-color-sensor);">${states['light.finley_ceiling_fan'].state}</span></span>`
]]]
state:
- value: 'off'
styles:
card:
- filter: brightness(94%)
- type: custom:button-card
entity: light.finley_lamp
icon: mdi:lamp
aspect_ratio: 1/1
name: LAMP
color: goldenrod
hold_action:
action: call-service
confirmation:
text: Slowly turn light on?
service: script.finleylampslowturnon
styles:
card:
- border-radius: 10%
- padding: 10%
- color: null
- font-size: 12px
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp" "n n" "tempy tempy"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
name:
- font-weight: bold
- font-size: 13px
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- width: 80%
- margin-top: '-10%'
custom_fields:
tempy:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
custom_fields:
tempy: |
[[[
return `<span><span style="color: var(--text-color-sensor);">${states['light.finley_lamp'].state}</span></span>`
]]]
state:
- value: 'off'
styles:
card:
- filter: brightness(94%)
- type: custom:button-card
entity: fan.red_series_fan_light_switch_2
icon: mdi:fan
aspect_ratio: 1/1
name: FAN
color: goldenrod
styles:
card:
- border-radius: 10%
- padding: 10%
- color: null
- font-size: 12px
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp" "n n" "tempy tempy"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
name:
- font-weight: bold
- font-size: 12px
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- width: 80%
- margin-top: '-10%'
custom_fields:
tempy:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
hold_action:
action: more-info
custom_fields:
tempy: |
[[[
return `<span><span style="color: var(--text-color-sensor);">${states['fan.red_series_fan_light_switch_2'].attributes.percentage}</span></span>`
]]]
state:
- value: 'off'
styles:
card:
- filter: brightness(94%)
- value: 'on'
spin: true
- type: custom:button-card
entity: switch.tasmota_3
icon: mdi:fire-off
aspect_ratio: 1/1
name: HEATER
styles:
card:
- border-radius: 10%
- padding: 10%
- color: null
- font-size: 12px
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp" "n n" "tempy tempy"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
name:
- font-weight: bold
- font-size: 12px
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- width: 80%
- margin-top: '-10%'
custom_fields:
tempy:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
custom_fields:
tempy: |
[[[
return `<span><ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: gra;">
</ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.bedroom_temperature'].state}&#176;</span></span>`
]]]
state:
- value: 'off'
styles:
card:
- filter: brightness(94%)
- value: 'on'
icon: mdi:fire
styles:
icon:
- color: red
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment