how I can change the **Cos φ **
Sorry, that was the wrong part of the code.
You have to remove lines 13-16
Hey Abekis. Looks great 
How did you archive it ? I have trying custom layout card but did not 
Thank you
custom_card_welcome_scenes:
template:
- "ulm_custom_card_paddy_welcome_language_variables"
show_icon: false
show_name: false
show_label: false
styles:
grid:
- grid-template-areas: "'item1' 'item2' 'item3' 'item4'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
- row-gap: "12px"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
custom_fields:
item1:
card:
type: "markdown"
content: >
[[[
let time = states[variables.ulm_custom_card_paddy_welcome_time].state;
let welcome = '';
if (time > '18:00'){
welcome = variables.ulm_custom_card_paddy_welcome_evening;
} else if (time > '12:00'){
welcome = variables.ulm_custom_card_paddy_welcome_afternoon;
} else if (time > '05:00'){
welcome = variables.ulm_custom_card_paddy_welcome_morning;
} else {
welcome = variables.ulm_custom_card_paddy_welcome_hello;
}
return welcome + ',<br>' + user.name + '!';
]]]
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
font-size: 30px;
text-align: left;
cursor: default;
}
item2:
card:
type: "custom:button-card"
template: card_title_welcome
name: Scenes
item3:
card:
type: "custom:button-card"
template:
- card_scenes
variables:
entity_1: "scene.bad_time"
entity_2: "scene.lights_off"
entity_3: "scene.builaer"
entity_4: "scene.YOUR_SCENE"
entity_5: "scene.YOUR_SCENE"
name_1: "Sleep"
name_2: "Off"
name_3: "Builaer"
name_4: "YOUR_NAME"
name_5: "YOUR_NAME"
icon_1: "mdi:weather-night"
icon_2: "mdi:lightbulb-group-off"
icon_3: "mdi:water-boiler"
icon_4: "mdi:YOUR_ICON"
icon_5: "mdi:YOUR_ICON"
color_icon_1: "yellow"
color_icon_2: "blue"
color_icon_3: "purple"
color_icon_4: "green"
color_icon_5: "red"
color_bg_1: "yellow"
color_bg_2: "blue"
color_bg_3: "purple"
color_bg_4: "green"
color_bg_5: "red"
item4:
card:
type: 'custom:button-card'
template:
- "ulm_custom_card_paddy_welcome_language_variables"
show_icon: false
show_name: false
show_label: false
styles:
grid:
- grid-template-areas: "'item1'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
- row-gap: "12px"
card:
- border-radius: "none"
- box-shadow: "none"
- padding: "12px"
custom_fields:
item1:
card:
type: "weather-forecast"
entity: "[[[ return variables.ulm_custom_card_paddy_welcome_weather_provider; ]]]"
show_forecast: false
card_mod:
style: |
ha-card.type-weather-forecast {
border-radius: 14px;
box-shadow: none;
}
ha-card.type-weather-forecast .state {
text-align: left;
font-size: 14px;
font-weight: bolder;
}
ha-card.type-weather-forecast .name {
text-align: left;
font-size: 14px;
}
ha-card.type-weather-forecast .temp-attribute {
text-align: right;
}
ha-card.type-weather-forecast .temp {
text-align: right;
font-size: medium;
font-weight: bolder;
margin-right: 16px;
}
ha-card.type-weather-forecast .temp span {
text-align: right;
font-size: medium;
font-weight: bolder;
}
ha-card.type-weather-forecast .attribute {
text-align: right;
font-size: smaller;
}
### TITLE ###
card_title_welcome:
tap_action:
action: "none"
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: "rgba(0,0,0,0)"
- box-shadow: "none"
- height: "auto"
- width: "auto"
- margin-top: "-25px"
- margin-left: "16px"
- margin-bottom: "-20px"
grid:
- grid-template-areas: "'n' 'l'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
name:
- justify-self: "start"
- font-weight: "bold"
- font-size: "1.5rem"
label:
- justify-self: "start"
- font-weight: "bold"
- font-size: "1rem"
- opacity: "0.4"
1 Like
Thank you very much 
1 Like
I still think this “theme” should be the default and replace Lovelace!!!
I did not understand what you were talking about. 
Hey mate, first off thanks for sharing your code, hoping you might be able to point me in the right direction. I’ve tweaked your code to suit a fan controlled by a Broadlink RM Pro (RF) which doesn’t create an entity and is a script. Because of this I think, the card doesn’t automatically update on/off state for the fan, any ideas?
This screenshot is with the fans state of currently on.
Button Card Template YAML:
fan_buttons:
show_icon: false
show_name: false
show_label: false
variables:
entity: null
switch_natural: null
name: Fan
styles:
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: call-service
service: remote.send_command
service_data:
device_id: '[[[ return variables.ulm_remote_device_id ]]]'
device: '[[[ return variables.ulm_remote_device_name ]]]'
command: '[[[ return variables.ulm_remote_command_power ]]]'
template:
- icon_info_bg
type: custom:button-card
item2:
card:
template: list_items_columns_5
type: custom:button-card
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
icon: mdi:fan-speed-1
tap_action:
action: call-service
service: remote.send_command
service_data:
device_id: '[[[ return variables.ulm_remote_device_id ]]]'
device: '[[[ return variables.ulm_remote_device_name ]]]'
command: '[[[ return variables.ulm_remote_command_speed_1 ]]]'
type: custom:button-card
template: widget_icon
item2:
card:
entity: '[[[ return variables.entity ]]]'
icon: mdi:fan-speed-2
tap_action:
action: call-service
service: remote.send_command
service_data:
device_id: '[[[ return variables.ulm_remote_device_id ]]]'
device: '[[[ return variables.ulm_remote_device_name ]]]'
command: '[[[ return variables.ulm_remote_command_speed_2 ]]]'
type: custom:button-card
template:
- widget_icon
item3:
card:
icon: mdi:fan-speed-3
entity: '[[[ return variables.entity ]]]'
tap_action:
action: call-service
service: remote.send_command
service_data:
device_id: '[[[ return variables.ulm_remote_device_id ]]]'
device: '[[[ return variables.ulm_remote_device_name ]]]'
command: '[[[ return variables.ulm_remote_command_speed_3 ]]]'
type: custom:button-card
template:
- widget_icon
item4:
card:
entity: '[[[ return variables.entity ]]]'
icon: mdi:fan
tap_action:
action: call-service
service: remote.send_command
service_data:
device_id: '[[[ return variables.ulm_remote_device_id ]]]'
device: '[[[ return variables.ulm_remote_device_name ]]]'
command: '[[[ return variables.ulm_remote_command_speed_4 ]]]'
type: custom:button-card
template: widget_icon
item5:
card:
entity: '[[[ return variables.entity ]]]'
icon: mdi:fan
tap_action:
action: call-service
service: remote.send_command
service_data:
device_id: '[[[ return variables.ulm_remote_device_id ]]]'
device: '[[[ return variables.ulm_remote_device_name ]]]'
command: '[[[ return variables.ulm_remote_command_speed_5 ]]]'
type: custom:button-card
template: widget_icon
list_items_columns_5:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2 item3 item4 item5"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
Lovelace YAML:
type: custom:button-card
entity: script.toggle_living_room_fan
variables:
entity: script.toggle_living_room_fan
name: Living Room Fan
switch_natural: script.toggle_living_room_fan
ulm_remote_device_id: 3ab6ea49e2c53fdd876cfac1eca54733
ulm_remote_device_name: Living Room Fan
ulm_remote_command_power: Power
ulm_remote_command_speed_1: Speed 1
ulm_remote_command_speed_2: Speed 2
ulm_remote_command_speed_3: Speed 3
ulm_remote_command_speed_4: Speed 4
ulm_remote_command_speed_5: Speed 5
template:
- fan_buttons
For some reason i cant seem to get mdi icons to work in chips. Can somebody help me out?
label: |
[[[
var app = entity.attributes.app_name;
var mapper = { 'Home Assistant Media Player': states['input_select.radio_station'].state}
var imapper = { 'Spotify': 'mdi:spotify'}
var text = mapper[app] ? mapper[app]: app;
var icon = imapper[app] ? imapper[app]: '📻';
return icon + ' ' + text;
]]]
Only emoji’s show up correctly. They also don’t work on my phones (iPhones)
Only emoji’s show correctly because your using a text field to show your icons 
If you want to show a chip icon with text you should use the chip_mdi_icon_state template for your chip.
Here you can add a label and a mdi icon
The variables for the card are:
- ulm_chip_mdi_icon_state_entity
- ulm_chip_mdi_icon_state_icon
Example:
- type: 'custom:button-card'
template: chip_mdi_icon_state
variables:
ulm_chip_mdi_icon_state_entity: sensor.my_entity # <- change this
ulm_chip_mdi_icon_state_icon: mdi:spotify
1 Like
Yes, as soon as you wrote, everything fell into place.
Great just what I needed, but dont get it too fit:
got this now:
- type: custom:button-card
template: custom_card_vacuum
variables:
ulm_custom_card_vacuum_entity: vacuum.roborock_vacuum_a15
ulm_custom_card_vacuum_name: Berta
Haha yeah. I noticed my explanation was a bit too simple for the code you were writing but glad i could help 
You need to turn off name and label on the top card, use these
show_icon: false
show_name: false
1 Like
Haha i am finish, did you use that whit motion sensors ?
Can you please share it ? 
Thank you
I have created a custom bar card with the use of GitHub - custom-cards/bar-card: Customizable Animated Bar card for Home Assistant Lovelace to display % variables. It defaults to 0%-100% but it can be changed with a simple variable.
Most of the settings can be changed with variables
I will try to create a PR for this, but i’m new to github so this can take a bit 
If someone is interested in it, let me know! Also feedback is highly appreciated!
5 Likes
sure:No problem. If you need any help, just ask here or in the discord server
Hey guys,
I know this is more about the layout card. But I’m using this template. Happy to ask over there if its the more appropriate place
I have a vertical view with some buttons and I want to have them in columns within the vertical view. But they dont seem to be doing that.
What do I need to add to this first bit on YAML here to fix that?
Thanks guys!
- icon: phu:double-spot
type: custom:vertical-layout
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Living Room
color: purple
entity: input_select.room_lights
icon: 'phu:rooms-living'
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Bedroom
color: purple
entity: input_select.room_lights
icon: 'phu:rooms-bedroom'
type: custom:stack-in-card
mode: vertical
keep:
box_shadow: false
border_radius: false
margin: false
outer_padding: false
background: true
cards:
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: media_player.garage
state_not: 'off'
card:
type: custom:mini-media-player
card_mod: null
style: |
:host {
--mini-media-player-name-font-weight: 400;
--ha-card-border-radius: 0px;
}
entity: media_player.garage
icon: mdi:radio
name: Garage
toggle_power: false
artwork: cover
info: scroll
hide:
info: false
power_state: false
progress: true
source: false
play_stop: true
volume_level: false
controls: true
volume: false
icon: true
name: false
- type: conditional
conditions:
- entity: media_player.kuche
state_not: 'off'
card:
type: custom:mini-media-player
style: |
:host {
--mini-media-player-name-font-weight: 400;
--ha-card-border-radius: 0px;
--mini-media-player-media-cover-info-color:
}
icon: mdi:speaker-wireless
entity: media_player.kuche
name: Küche
toggle_power: false
artwork: cover
info: scroll
hide:
info: false
power_state: false
progress: true
source: false
play_stop: true
volume_level: false
controls: true
volume: false
icon: true
name: false
- type: conditional
conditions:
- entity: media_player.tv_samsung_6_series_55
state: 'on'
card:
type: custom:mini-media-player
style: |
:host {
--mini-media-player-name-font-weight: 400;
--ha-card-border-radius: 0px;
}
icon: mdi:television-classic
entity: media_player.tv_samsung_6_series_55
name: TV
artwork: cover
toggle_power: false
info: scroll
hide:
info: false
power_state: false
progress: true
source: false
play_stop: true
volume_level: false
controls: true
volume: false
icon: true
name: false
- type: conditional
conditions:
- entity: media_player.squeezelite_x
state: playing
card:
type: custom:mini-media-player
style: |
:host {
--mini-media-player-name-font-weight: 400;
--ha-card-border-radius: 0px;
--mini-media-player-media-cover-info-color:
}
icon: mdi:laptop
entity: media_player.squeezelite_x
name: Laptop
artwork: cover
toggle_power: false
info: scroll
hide:
runtime_remaining: false
runtime: false
info: false
power_state: false
progress: false
source: false
play_stop: true
volume_level: false
controls: true
volume: false
icon: true
name: false
- type: custom:button-card
styles:
grid:
- grid-template-areas: '"item1" "item2" "item3"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content
- row-gap: 15px
card:
- border-radius: 15px
- box-shadow: null
- padding: 20px
custom_fields:
item1:
card:
type: grid
cards:
- type: custom:button-card
name: Garage
icon: mdi:radio
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.chromecast_radio_speakers
option: Garage
styles:
icon:
- color: |
[[[
if (states['input_select.chromecast_radio_speakers'].state == 'Garage')
return "#000000";
return "var(--secondary-text-color)";
]]]
label:
- justify-self: center
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
name:
- color: var(--secondary-text-color)
- margin-top: 5px
- justify-self: center
- font-weight: bold
- font-size: 13px
grid:
- grid-template-areas: '''i'' ''n'' ''l'''
card:
- border-radius: 15px
- padding: 10px
img_cell:
- background-color: |
[[[
if (states['input_select.chromecast_radio_speakers'].state == 'Garage')
return "rgba(252, 214, 99, 0.6)";
return "#2e2d2d";
]]]
- border-radius: 47%
- place-self: center
- width: 42px
- height: 42px
size: 60%
- type: custom:button-card
name: Küche
icon: mdi:speaker-wireless
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.chromecast_radio_speakers
option: Küche
styles:
icon:
- color: |
[[[
if (states['input_select.chromecast_radio_speakers'].state == 'Küche')
return "#000000";
return "var(--secondary-text-color)";
]]]
label:
- justify-self: center
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
name:
- color: var(--secondary-text-color)
- margin-top: 5px
- justify-self: center
- font-weight: bold
- font-size: 13px
grid:
- grid-template-areas: '''i'' ''n'' ''l'''
card:
- border-radius: 15px
- padding: 10px
img_cell:
- background-color: |
[[[
if (states['input_select.chromecast_radio_speakers'].state == 'Küche')
return "rgba(252, 214, 99, 0.6)";
return "#2e2d2d";
]]]
- border-radius: 47%
- place-self: center
- width: 42px
- height: 42px
size: 60%
- type: custom:button-card
name: TV
icon: mdi:television-classic
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.chromecast_radio_speakers
option: TV
styles:
icon:
- color: |
[[[
if (states['input_select.chromecast_radio_speakers'].state == 'TV')
return "#000000";
return "var(--secondary-text-color)";
]]]
label:
- justify-self: center
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
name:
- color: var(--secondary-text-color)
- margin-top: 5px
- justify-self: center
- font-weight: bold
- font-size: 13px
grid:
- grid-template-areas: '''i'' ''n'' ''l'''
card:
- border-radius: 15px
- padding: 10px
img_cell:
- background-color: |
[[[
if (states['input_select.chromecast_radio_speakers'].state == 'TV')
return "rgba(252, 214, 99, 0.6)";
return "#2e2d2d";
]]]
- border-radius: 47%
- place-self: center
- width: 42px
- height: 42px
size: 20px
- type: custom:button-card
name: Laptop
icon: mdi:laptop
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.chromecast_radio_speakers
option: Laptop
styles:
icon:
- color: |
[[[
if (states['input_select.chromecast_radio_speakers'].state == 'Laptop')
return "#000000";
return "var(--secondary-text-color)";
]]]
label:
- justify-self: center
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
name:
- color: var(--secondary-text-color)
- margin-top: 5px
- justify-self: center
- font-weight: bold
- font-size: 13px
grid:
- grid-template-areas: '''i'' ''n'' ''l'''
card:
- border-radius: 15px
- padding: 10px
img_cell:
- background-color: |
[[[
if (states['input_select.chromecast_radio_speakers'].state == 'Laptop')
return "rgba(252, 214, 99, 0.6)";
return "#2e2d2d";
]]]
- border-radius: 47%
- place-self: center
- width: 42px
- height: 42px
- margin-top: px
size: 20px
square: false
columns: 4
item2:
card:
type: grid
cards:
- type: custom:button-card
name: ProFM
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.chromecast_radio_station
option: ProFM
styles:
name:
- color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'ProFM')
return "#000000";
return "var(--secondary-text-color)";
]]]
- margin-top: null
- justify-self: center
- font-weight: bold
- font-size: 11px
grid:
- grid-template-areas: '''n'''
card:
- background-color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'ProFM')
return "rgba(252, 214, 99, 0.6)";
]]]
- border-radius: 10px
- box-shadow: null
- padding: 12px
- padding: 10px 0px 8px 0px
- type: custom:button-card
name: KissFM
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.chromecast_radio_station
option: KissFM
styles:
name:
- color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'KissFM')
return "#000000";
return "var(--secondary-text-color)";
]]]
- margin-top: null
- justify-self: center
- font-weight: bold
- font-size: 11px
grid:
- grid-template-areas: '''n'''
card:
- background-color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'KissFM')
return "rgba(252, 214, 99, 0.6)";
]]]
- border-radius: 10px
- box-shadow: null
- padding: 12px
- padding: 10px 0px 8px 0px
- type: custom:button-card
name: Europa
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.chromecast_radio_station
option: EuropaFM
styles:
name:
- color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'EuropaFM')
return "#000000";
return "var(--secondary-text-color)";
]]]
- margin-top: null
- justify-self: center
- font-weight: bold
- font-size: 11px
grid:
- grid-template-areas: '''n'''
card:
- background-color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'EuropaFM')
return "rgba(252, 214, 99, 0.6)";
]]]
- border-radius: 10px
- box-shadow: null
- padding: 12px
- padding: 10px 0px 8px 0px
- type: custom:button-card
name: ZU
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.chromecast_radio_station
option: RadioZu
styles:
name:
- color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'RadioZu')
return "#000000";
return "var(--secondary-text-color)";
]]]
- margin-top: null
- justify-self: center
- font-weight: bold
- font-size: 11px
grid:
- grid-template-areas: '''n'''
card:
- background-color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'RadioZu')
return "rgba(252, 214, 99, 0.6)";
]]]
- border-radius: 10px
- box-shadow: null
- padding: 12px
- padding: 10px 0px 8px 0px
- type: custom:button-card
name: DigiFM
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.chromecast_radio_station
option: DigiFM
styles:
name:
- color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'DigiFM')
return "#000000";
return "var(--secondary-text-color)";
]]]
- margin-top: null
- justify-self: center
- font-weight: bold
- font-size: 11px
grid:
- grid-template-areas: '''n'''
card:
- background-color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'DigiFM')
return "rgba(252, 214, 99, 0.6)";
]]]
- border-radius: 10px
- box-shadow: null
- padding: 12px
- padding: 10px 0px 8px 0px
- type: custom:button-card
name: Popular
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.chromecast_radio_station
option: Popular
styles:
name:
- color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'Popular')
return "#000000";
return "var(--secondary-text-color)";
]]]
- margin-top: null
- justify-self: center
- font-weight: bold
- font-size: 11px
grid:
- grid-template-areas: '''n'''
card:
- background-color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'Popular')
return "rgba(252, 214, 99, 0.6)";
]]]
- border-radius: 10px
- box-shadow: null
- padding: 12px
- padding: 10px 0px 8px 0px
- type: custom:button-card
name: Wefunk
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.chromecast_radio_station
option: WefunkRadio
styles:
name:
- color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'WefunkRadio')
return "#000000";
return "var(--secondary-text-color)";
]]]
- margin-top: null
- justify-self: center
- font-weight: bold
- font-size: 11px
grid:
- grid-template-areas: '''n'''
card:
- background-color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'WefunkRadio')
return "rgba(252, 214, 99, 0.6)";
]]]
- border-radius: 10px
- box-shadow: null
- padding: 12px
- padding: 10px 0px 8px 0px
- type: custom:button-card
name: FunkRadio
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.chromecast_radio_station
option: FunkRadio
styles:
name:
- color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'FunkRadio')
return "#000000";
return "var(--secondary-text-color)";
]]]
- margin-top: null
- justify-self: center
- font-weight: bold
- font-size: 11px
grid:
- grid-template-areas: '''n'''
card:
- background-color: |
[[[
if (states['input_select.chromecast_radio_station'].state == 'FunkRadio')
return "rgba(252, 214, 99, 0.6)";
]]]
- border-radius: 10px
- box-shadow: null
- padding: 12px
- padding: 10px 0px 8px 0px
square: false
columns: 4
item3:
card:
type: grid
cards:
- type: custom:button-card
show_name: false
tap_action:
action: toggle
entity: switch.chromecast_radio_play
styles:
icon:
- color: rgba(252, 214, 99, 0.6)
- margin-top: null
- justify-self: center
grid:
- grid-template-areas: '''i'''
card:
- border-radius: 13px
- box-shadow: null
- padding: px 0px 0px 0px
- width: null
- height: 30px
img_cell:
- background-color: null
- border-radius: null
size: 30px
- type: custom:button-card
show_name: false
tap_action:
action: toggle
entity: switch.chromecast_radio_stop
styles:
icon:
- color: rgba(252, 214, 99, 0.6)
- margin-top: null
- justify-self: center
grid:
- grid-template-areas: '''i'''
card:
- border-radius: 13px
- box-shadow: null
- padding: px 0px 0px 0px
- width: null
- height: 30px
img_cell:
- background-color: null
- border-radius: null
size: 30px
- type: custom:button-card
show_name: false
tap_action:
action: toggle
entity: switch.chromecast_radio_vol_down
styles:
icon:
- color: rgba(252, 214, 99, 0.6)
- margin-top: null
- justify-self: center
grid:
- grid-template-areas: '''i'''
card:
- border-radius: 13px
- box-shadow: null
- padding: px 0px 0px 0px
- width: null
- height: 30px
img_cell:
- background-color: null
- border-radius: null
size: 30px
- type: custom:button-card
show_name: false
tap_action:
action: toggle
entity: switch.chromecast_radio_vol_up
styles:
icon:
- color: rgba(252, 214, 99, 0.6)
- margin-top: null
- justify-self: center
grid:
- grid-template-areas: '''i'''
card:
- border-radius: 13px
- box-shadow: null
- padding: px 0px 0px 0px
- width: null
- height: 30px
img_cell:
- background-color: null
- border-radius: null
size: 30px
square: false
columns: 4