Perfect…card will look great whem you’re done!
2 Likes
Can you show the code for switch mirror with showing timer in right corrner ?
A button in a button method was used so the position of the timer will change based on the number of cards in a row as well as the icon size.
type: custom:stack-in-card
cards:
- type: custom:button-card
name: Bathroom Lutz / Hallway
card_mod:
style: |
ha-card{
border: none;
}
- entity: switch.detached_garage_lights
name: Mirror
icon: mdi:wall-sconce-flat-outline
type: custom:button-card
size: 5em
show_name: true
custom_fields:
timer:
card:
type: custom:button-card
entity: timer.sprinkler_timer
tap_action: none
show_state: true
show_name: false
show_icon: false
styles:
card:
- color: lime
- font-size: 20px
- right: '-60px'
- top: '-60px'
- border: none
- font-weight: 300
styles:
custom_fields:
timer:
- position: absolute
- left: 46%
- top: 65%
- height: 33px
- width: 60px
- z-index: 1
card_mod:
style: |
ha-card {
border: none;
}
This is code for a single button
2 Likes
Good afternoon, please tell me. How to assign two actions to one button. Navigation transition HA and script execution. Thank you.
Share your YAML and we can take a look at it.
1 Like
Thanks for this great custom card. My tablet dashboard is a work in progress but is looking great so far thanks to this awesome card and the @My_Smart_Home YouTube channel
3 Likes
@ d13g0m0nt3s
Agreed, the custom card is absolutely fantastic!
I would like to ask a favor from you… Can you please share your code for the two buttons from your posted dash board as pictured below:
Thanks in advance!
1 Like
Hi, yes no problem. Both are the same, only needs to change the entities and colours, You can add a max of 6 icons divided in two columns.
type: custom:button-card
name: Salón
icon: mdi:sofa
show_state: true
custom_fields:
temp: >
[[[ return states['sensor.termometro_humedad_govee_temperature'].state + '°C
- ' + states['sensor.termometro_humedad_govee_humidity'].state + '%']]]
hum: ''
btn2:
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: light.luzsalon
tap_action:
action: toggle
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255, 253, 203, 1)' if is_state('light.luzsalon', 'on') else 'rgba(255, 253, 203, 0.5)'}};
padding: 5px!important;
border-radius: 100px!important;
color:black;
}
- type: template
entity: camera.camara_salon_hd_stream
tap_action:
action: more-info
icon: phu:reolink-e1
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(127, 199, 217, 1)' if is_state('camera.camara_salon_hd_stream', 'on') else 'rgba(127, 199, 217, 0.5)'}};
padding: 5px!important;
border-radius: 100px!important;
color:black;
}
- type: template
entity: media_player.homepod_del_salon
tap_action:
action: more-info
icon: phu:homepod
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255, 64, 125, 1)' if is_state('media_player.homepod_del_salon', 'playing') else 'rgba(255, 64, 125, 0.5)'}};
padding: 5px!important;
border-radius: 100px!important;
color:black;
}
btn1:
card:
type: custom:mushroom-chips-card
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
img_cell:
- justify-content: start
- position: absolute
- width: 150px
- height: 150px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: rgb(241, 250, 218)
- border-radius: 500px
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
icon:
- position: relative
- width: 60px
- color: black
- opacity: '0.5'
custom_fields:
btn2:
- justify-content: end
- align-self: start
btn1:
- justify-content: end
- align-self: start
- padding-left: 6px
temp:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
- pading-top: 10px
hum:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
5 Likes
Here is my latest custom-button play around project.
2 Likes
Forgive my noddy questions, I’m just starting out with custom buttons. Is there a way to get a hold action to bring up the light dimmer screen?
This is the yaml that I’m working with:
Ignore me. Got it working. If anyone is ever as noddy as I am, here is the working code:
type: custom:button-card
styles:
grid:
- grid-template-areas: |
"light1 light1 light1"
"light2 light3 light4"
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: 5em 1fr
- grid-gap: 0
custom_fields:
light1:
card:
type: custom:button-card
entity: light.all_downstairs_lights
aspect_ratio: 5/1
show_name: true
name: Downstairs Lights
icon: mdi:ceiling-light-multiple
tap_action:
action: toggle
hold_action:
action: more-info
light2:
card:
type: custom:button-card
entity: light.kitchen_lights
show_name: true
name: Kitchen
icon: mdi:ceiling-light-multiple-outline
aspect ratio: 2/1
tap_action:
action: toggle
hold_action:
action: more-info
light3:
card:
type: custom:button-card
entity: light.dining_room_lights
show_name: true
name: Dining room
icon: mdi:ceiling-light-multiple-outline
aspect ratio: 2/1
tap_action:
action: toggle
hold_action:
action: more-info
light4:
card:
type: custom:button-card
entity: light.lounge_lights
show_name: true
name: Lounge
icon: mdi:ceiling-light-multiple-outline
aspect ratio: 2/1
tap_action:
action: toggle
hold_action:
action: more-info
1 Like
How do you get a mdi icon in the background of a custom button card. Just like how you Master Suite is configured with the fan, bulb and blinds icons in the background behind the words Low, Med, and CLS.
Thanks,
Anyone know how to wrap the name in a card so it occupies two lines instead of it truncating with a …
I believe you are looking for the - white-space: pre setting, but it is hard to know without posting your code.
@wwtomlinson, I’m using these styles on the button card for each preset button:
styles:
grid:
- display: contents
img_cell:
- display: contents
card:
- border-radius: 5px
icon:
- color: white
- position: absolute
- opacity: 0.2
Just out of curiosity (for possible future use): what
display: contents
actually does?
It’s a setting to ensure a box isn’t generated. Basically the background, border, and padding are not generated.
1 Like
Uau… tested… as you said; it’s very useful function, goot to know. Thanks for explaining.
I tried to find explanation on button’s github page, but there’s no info regarding this command. Do you know if there are all possible functions of “styles” explained anywhere?
styles is just Button cards way to manipulate CSS. Most all of the CSS commands will work so you can references sites like the link below for available options.
1 Like
Someone who can help?
Got a real simple card, it controls a entity who has a controlling entity and a state entity as _sensor.
So tapping it says toggle the unit, and the card only changes its color as soon as it got confirmation from the _sensor unit.
Now that can take a few seconds before it changes its color, so i want a step in between showing that i accually tapped the card, and that its waiting for a respons.
So like, starts gray, i tap, it turns dark yellow until the _sensor says its on, then it turns bright yellow (them beeing the variable colors).
Is this possible? it doesn’t seem so hard right?
Its either that or simply make it a 5 second animation
gray - tap; dark yellow for 5 seconds - see if its on turns yellow, or if its not on yet turn gray.
Even a flashing animation would do… just when pressed, the card flashes slowly for 2-3 seconds…
this is the cart now…
I just need something indicating that i accually tapped the card.
type: custom:button-card
show_name: true
show_icon: true
tap_action:
action: toggle
entity: switch.Light_3
icon: mdi:lightbulb
styles:
icon:
- color: |
[[[
return (states['binary_sensor.Light_3_sensor'].state === 'on') ? 'var(--state-icon-active-color)' : 'var(--disabled-color)';
]]]
Thanks in advance!
Hey all,
I’m trying to get my card below to show the slider contained and I’m struggling to do so. Any ideas?
Code:
type: custom:button-card
entity: light.living_room_light_switch
name: Main Light
show_icon: false
show_label: true
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
label: |
[[[
var bri = (Math.round(states['light.living_room_light_switch'].attributes.brightness / 2.55));
return ' ' + (bri ? bri : '0') + '%';
]]]
styles:
card:
- border-radius: 25px
- border-style: none
- box-shadow: 0px 0px 10px -9px black
- background: var(--red);
grid:
- grid-template-areas: '"icon_cells" "n" "l" "slider"'
- grid-template-rows: 32px min-content 24px min-content min-content
- grid-template-columns: 1fr // Adjusted to contain the slider
custom_fields:
icon_cells:
- justify-self: start
- margin-top: 12px
- margin-left: 15px
icon1:
- position: absolute
- width: 4.5em
- opacity: 10%
- color: black;
- transform: rotate(-20deg)
- justify-self: end
- margin-top: 25px
name:
- font-size: 90%
- font-weight: bold
- justify-self: start
- margin-top: 6px
- margin-left: 15px
- color: black;
label:
- justify-self: end
- margin-top: '-15%'
- font-size: 85%
- color: |
[[[
if (entity.state == "on") return "var(--black)";
if (entity.state == "off") return "black";
]]]
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: '[[[ return entity.entity_id ]]]'
colorMode: brightness
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 16px
- padding: 0 8px
- background: |
[[[
if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
else return "var(--contrast4)";
]]]
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: |
[[[
if (entity.state == "on") return "var(--black)";
if (entity.state == "off") return "var(--red)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: '-8px'
- height: 12px
- width: 12px
- border-radius: 10px
icon_cells: |
[[[
var state = states['light.living_room_light_switch'].state;
if(state == "on")
return `<ha-icon
icon="mdi:ceiling-light"
style="width: 25px; height: 25px; color: black;">
</ha-icon>`;
else
return `<ha-icon
icon="mdi:ceiling-light-outline"
style="width: 25px; height: 25px; color: black;">
</ha-icon>`;
]]]
icon1: |
[[[
return '<ha-icon icon="mdi:ceiling-light"></ha-icon>';
]]]
state:
- value: 'on'
styles:
card:
- background: |
[[[
var color = entity.attributes?.rgb_color;
if (entity.state != "on"){
return 'var(--contrast20)';
}
else if (color){
return 'rgba(' + color + ')'
}
else{
return 'var(--yellow)'
}
]]]
name:
- color: var(--black)
- value: 'off'
styles:
name:
- color: black
What I’m aiming to achieve is something very similar to below;
