Hi! Is there a way to insert a small button into an existing button card?
Something like this:
Thanks
Tom could you post your configs to Github? Love these cards you do… they are amazing.
Yes, please can you post the complete code of this card?
yes, you need to check out GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant
and probably especially the ‘notification’ which is used throughout the community for those
1 Like
Hi Petro,
Would you be kind to share the code (easy to read by newbie) for:
- Theme and/or dashboard background colors
- Theme and/or card background colors
- How did you align the title/room name
- How did you combine all i.e. Synology related info in one card with no separators
I am trying to achieve liquid (water & diesel) levels for 4 tanks as described here
Thanks
1 Like
Button card in button card + “entity.attribute.current_temperature” reference
I am trying to make a header card to each room, which will hold multiple functions.
If you tap on the header itself (The kitchen text) it will toggle all the kitchen lights.
This button-card has a “custom_field” called “climate”.
In this climate custom_field, there is another button-card, with a label, showing the climate entity’s attribute “current_temperature” (25°C) and an icon based of the state of the climate component.
In the label, I use Java script reference to the entity.attribute (See code below).
The issue is; it is referring to the entity of the mother button card (light.kitchen) and not to the climate.kitchen, as defined in that ´custom_field card.
label: '[[[ return entity.attributes.current_temperature + '' °C''; ]]]'
The current code for the complete header card I am trying to make:
type: custom:button-card
show_state: false
show_icon: false
show_label: false
show_name: true
name: Kitchen
entity: light.kitchen
tap_action:
action: toggle
hold_action:
action: more-info
color: yellow
styles:
card:
- padding: 1%
- background-color: rgba(43, 55, 78, 0.8)
- border-radius: 15px
grid:
- grid-template-areas: '"n climate"'
- grid-template-columns: 3fr 1fr
name:
- font-weight: 300
- font-size: 40px
- align-self: center
- justify-self: center
custom_fields:
climate:
card:
type: custom:button-card
entity: climate.kitchen
show_name: false
show_label: true
label: '[[[ return entity.attributes.current_temperature + '' °C''; ]]]'
styles:
card:
- background-color: rgba(100, 100, 100, 0.5)
- box-shadow: 0px 0px
grid:
- grid-template-areas: '"l i"'
- grid-template-columns: 1fr min-content
I know I could hard code the entity.attribute directly in every label of each custom_field button-cards, but I want to make this button-card setup to a template, and therefore hopefully only have: Type, entity, template and name in the actual card code.
My goal for the code:
type: custom:button-card
entity: light.kitchen
template: header-card
name: Kitchen
custom_fields:
climate:
card:
type: custom:button-card
entity: climate.kitchen
template: climate-card
The goal for my templates:
templates:
header-card:
show_state: false
show_icon: false
show_label: false
show_name: true
tap_action:
action: toggle
hold_action:
action: more-info
color: yellow
styles:
card:
- padding: 1%
- background-color: rgba(43, 55, 78, 0.8)
- border-radius: 15px
grid:
- grid-template-areas: '"n climate"'
- grid-template-columns: 3fr 1fr
name:
- font-weight: 300
- font-size: 40px
- align-self: center
- justify-self: center
climate-card:
show_name: false
show_label: true
label: '[[[ return entity.attributes.current_temperature + '' °C''; ]]]'
styles:
card:
- background-color: rgba(100, 100, 100, 0.5)
- box-shadow: 0px 0px
grid:
- grid-template-areas: '"l i"'
- grid-template-columns: 1fr min-content
On the top picture, it is trying to get the “current_temperature” attribute of the light.kitchen entity, which does not have that attribute.
On the second image, I have changed the entity of the mothercard to climate.kitchen, and then i get the correct reading - but now the toggle light function does not work 
I hope someone can help me along here!
Well - i tried something, and copied all the style and setups in template.
So without changing anything, besides templifying it, now it works 
So now for each header (One pr room) I can just use this code, and define light- & climate entity as well as the name of the room.
type: custom:button-card
template: header
name: Kitchen
entity: light.kitchen
custom_fields:
climate:
card:
type: custom:button-card
entity: climate.kitchen
template: climate
YAML Template to define the button-cards used
button_card_templates:
header:
show_state: false
show_icon: false
show_label: false
show_name: true
hold_action:
action: more-info
tap_action:
action: toggle
color: yellow
styles:
card:
- padding: 1%
- background-color: rgba(43, 55, 78, 0.8)
- border-radius: 15px
grid:
- grid-template-areas: '"n climate"'
- grid-template-columns: 3fr 1fr
name:
- font-weight: 300
- font-size: 40px
- align-self: center
- justify-self: center
climate:
show_name: false
show_label: true
label: '[[[ return entity.attributes.current_temperature + '' °C''; ]]]'
styles:
card:
- background-color: rgba(100, 100, 100, 0.5)
- box-shadow: 0px 0px
grid:
- grid-template-areas: '"l i"'
- grid-template-columns: 1fr min-content```
I was curious about how you did those light buttons? I like those controls all in one card or button. Could you post config for one of those?
I love these sensor examples. I tried to use the code way down on the list but I could not get it to work right. Could you share just the code for one of them?
@gdreelin
These ideas, the light and the raspi sensors, work with custom_fields. Something along the way like this:
card_light_slider:
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
custom_fields:
item1:
card:
# here comes the top card, eg. the light
item2:
card:
# here comes the bottom part of the card, like the slider
Both these items are configurable, so you can insert totally different cards here, like a light-slider or a mini-graph or whatever you want. Even another button-card (read button-card inside button-card) is possible.
1 Like
Hi guys. I was try for hour or two, but I’m not skilled with coding. Could someone help me what styles should I apply to get name and icon nice inline:
This is what I have until now, but it is not good:
- type: custom:button-card
color_type: card
entity: group.yeelight_checkboxes_true
name: Toggle Selected
show_last_changed: false
show_state: false
tap_action:
action: toggle
state:
- value: 'on'
color: green
icon: hass:toggle-switch
- value: 'off'
color: grey
icon: hass:toggle-switch-off-outline
styles:
card:
- height: 70px
- border-radius: 5px
img_cell:
- display: flex
- height: 450%
- width: 40%
- max-width: 500%
- max-height: 500%
- align-self: center
- justify-self: end
- justify-content: end
- align-items: center
- position: relative
- padding-top: 16px
- padding-right: 15px
name:
- justify-self: start
- padding-left: 20px
- font-size: 30px
- font-weight: bold
- padding-bottom: 20px
Many thanks in advance.
EDIT: No need, thanks, figured it out this way:
- type: custom:button-card
color_type: card
entity: group.yeelight_checkboxes_true
name: Toggle Selected
show_last_changed: false
show_state: false
tap_action:
action: toggle
state:
- value: 'on'
color: green
icon: hass:toggle-switch
- value: 'off'
color: grey
icon: hass:toggle-switch-off-outline
styles:
card:
- height: 70px
- border-radius: 5px
grid:
- grid-template-areas: '"n i"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
name:
- font-size: 30px
- padding-left: 40px
- font-weight: bold
icon:
- width: 180%
- height: 180%
- max-width: 200%
- max-height: 200%
- padding-left: 100px
I suppose it can be even better way (I don’t like that - padding-left: 100px at the end), but this is also working for now.
Is it possible to make the custom_fields background transparent?
custom_fields:
title:
- align-self: start
- background-color: null
- position: absolute
- filter: opacity(90%)
- left: 0%
- top: 0%
- height: 10%
- width: 100%
- line-height: 0px
- font-size: 80%
Have you tried background-color: transparent;? Would be the only thing that comes to mind with CSS and transparent, but I truly don’t know, this is just a guess.
I tried, but it didn’t work
The background of the custom_field is the same the card has. So background: transparent won’t make much sense. What should the whole card look like?
This is the card, I would like the transparent upper part (text DOMANI RACCOLTA). I just want the text without the custom_fields box
Without full code I can only assume that a box-shadow is the reason. Add
- box-shadow: none
to your custom_fields styles.
Not working 
type: grid
cards:
- type: custom:auto-entities
show_empty: true
card_param: cards
card:
type: grid
square: true
columns: 1
sort:
attribute: days
method: attribute
numeric: true
count: 1
first: 0
style:
transform: translate(0%, 0%)
bottom: 0%
left: 5%
filter:
exclude:
- entity_id: group.garbage_collection
attributes:
entity_id: []
include:
- group: group.garbage_collection
options:
type: custom:button-card
entity: this.entity_id
triggers_update: all
show_entity_picture: true
show_icon: false
show_label: false
aspect_ratio: 1/1
tap_action:
action: more-info
entity_picture: /local/hassiohelp/pkg_raccolta/bidone.png
label: |-
[[[
return entity.attributes.friendly_name;
]]]
styles:
card:
- font-size: 100%
- padding: 5%
custom_fields:
title:
- align-self: start
- background-color: transparent;
- box-shadow: none
- position: absolute
- filter: opacity(90%)
- left: 0%
- top: 0%
- height: 10%
- width: 100%
- line-height: 0px
- font-size: 80%
name:
- color: yellow
- align-self: middle
- font-weight: normal
entity_picture:
- max-width: 100%
- filter: |
[[[
return 'var(--'+ entity.attributes.friendly_name.toLowerCase().replace(' ','_') +')';
]]]
custom_fields:
title:
card:
type: markdown
content: DOMANI RACCOLTA
styles:
- box-shadow: none
extra_styles: |
#img-cell #icon {
/*
SETTINGS - Change the variables name (i.e. --bianco)
based on the friendly name of the bin
and the style (i.e. hue-rotate(00deg)) for the color of the bin
*/
--plastica: hue-rotate(20deg) brightness(1.2); /* yellow */
--umido: hue-rotate(0deg) grayscale(50%) brightness(0.7); /* brown */
--carta: hue-rotate(160deg) brightness(0.7); /* blue */
--indif: hue-rotate(0deg) grayscale(100%) brightness(0.7); /* gray */
--vetro: hue-rotate(100deg) brightness(0.7); /* dark green */
borde-radius: var(--ha-card-border-radius);
}
columns: 2