Just add some padding to the card after line 22
styles:
card:
- border-radius: 25px
- border-style: none
- box-shadow: 0px 0px 10px -9px black
- background: var(--red);
- padding: 40px
I’m having an issue with Custom Button Card that is caused by embedding it within a Conditional card. Any ideas? The code below is MVP to reproduce, but is part of a much larger card already using a specific structure with power buttons. What I’m trying to achieve is that when the conditions mean I’m showing a power off button, it spans the whole width… but as you can see the code works with custom:button-card on its own, but not when it’s showing within a conditional card.
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:button-card
icon: mdi:power-cycle
view_layout:
grid-column: 1 / span 2
grid-row: 1
- type: conditional
conditions:
- condition: state
entity: light.bedroom
state: 'off'
card:
type: custom:button-card
icon: mdi:power-off
view_layout:
grid-column: 1 / span 2
grid-row: 2
layout:
grid-template-columns: 34% 66%
grid-template-rows: auto
How do i get 2 rows in one container? if i add a button it get six in a row i would like max of 5 in a row
Can you please post your code using the community standards found here… Post 11
1 Like
Hi peeps
Can anyone see what is wrong with this??? This used to work w a previous version and now it doesnt
type: custom:button-card
entity: input_boolean.kiosk_1080
name: AUTO on/off
tap_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.kiosk_1080
failed to call service error
This should work
type: custom:button-card
entity: input_boolean.kiosk_1080
name: AUTO on/off
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.kiosk_1080
Apologies for being new to this. I’ve spent a couple of hours reading through the first 2 years of responses in this thread but couldn’t find an answer. I don’t think I can read another 2 years at this point and hopefully I can just ask what might be obvious.
Almost every response in here has to do with defined entities - ‘sensor.this.that’. I am hoping to use a small bit of the original poster’s template on an unknown amount of sensors. There are up to ~100 different ones. I only want to display a sensor if it’s got a “off” state. My code for just one sensor is this:
type: custom:button-card
entity: sensor.docker_checkrr_state
template: alerter-dual
name: Checkrr
variables:
color_seconds: 5
I could repeat this for each sensor but that would be silly. I’d essentially like to do this:
type: custom:button-card
entity: sensor.docker_*_state
template: alerter-dual
name: Checkrr
variables:
color_seconds: 5
(note the asterisk). I would place this in a conditional card so that it’s only displayed if the entity value is ‘off’.
I’ve tried using auto-entities, but this doesn’t work with templates. What happens is that it sends all 100 entity names to the template, which of course doesn’t expect more than one. The thread discussing auto-entities recommends using the lovelace-layout-card, making note of the section titled ‘Use with entity filters’ in the readme. However, this doesn’t work either - there’s no way to tell lovelace-layout-card to use this custom:button-card. Or perhaps there is and I’m getting it wrong. I’ve tried for several hours but just get messed up.
I’ve read a bit on the ‘decluttering-card’ but I don’t think that’s what I want to do either.
At this point I think I’ve gone WAAAAY too far down the rabbit hole for what I want to do, which is a really simple thing:
- display the button using the ‘alerter-dual’ template in the OP’s original post from 2020, for any sensor with a certain value, where the sensor names all fall within the pattern ‘sensor.docker_*_state’.
There could be any number of these sensors and they’ll change over time, so I don’t want to hard code in the sensor names.
Is there a simple way to do this that doesn’t require several more hours of learning?
1 Like
Hello,
I can change the buttons in the Mushroom Alarm Panel, but not the color of the icons. What am I doing wrong - type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.lupusec_alarm
states:
- armed_home
- armed_away
card_mod:
style:
mushroom-button:nth-child(1):
$: |
.button {
–bg-color: orange;
}
ha-icon {
–card-mod-icon-color: black;
}
mushroom-button:nth-child(2):
$: |
.button {
–bg-color: green;
}
Hi! That’s awesome! Any chance to have some ideas for code?
https://community.home-assistant.io/t/mushroom-cards-card-mod-styling-config-guide/600472
Examples from here. But the example above doesn’t work for me as described
Not the right thread for Mushroom questions, but this is the code you’ll need
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.ha_alarm
states:
- armed_home
- armed_away
- armed_night
card_mod:
style:
mushroom-button:nth-child(1):
$: |
.button {
--bg-color: orange !important;
--icon-color: blue !important;
}
mushroom-button:nth-child(2):
$: |
.button {
--bg-color: red !important;
--icon-color: white !important;
}
mushroom-button:nth-child(3):
$: |
.button {
--bg-color: grey !important;
--icon-color: yellow !important;
}
Use this thread going forward…
Hi All,
I’m looking for ideas/ways to improve my custom card for my bin collections. I want to improve how it works and how it looks on both desktop and mobile.
Below is my code;
type: custom:button-card
label: Black Bin <br> will be collected on
entity: sensor.black_bin_collection
show_name: false
show_icon: false
show_label: true
show_state: false
tap_action: none
styles:
grid:
- grid-template-areas: '"l item1" "l blank"'
- grid-template-columns: 50% 40%
- column-gap: 0%
- row-gap: 3px
card:
- height: 100%
- border-radius: var(--border-radius)
- overflow: visible
- box-shadow: 0px 0px 10px -9px black
- border-radius: 25px
- background-color: grey
- justify-items: center
- justify-content: center
label:
- text-align: left
- font-size: 15px
- font-family: Montserrat
- font-weight: 800
- align-self: end
- color: var(--contrast-100)
custom_fields:
item1:
card:
type: custom:button-card
tap_action:
action: none
label: |
[[[
var state = states['sensor.black_bin_collection'].state;
if (state === 'unknown') {
return 'Coming Soon';
} else {
return state;
}
]]]
show_label: true
styles:
grid:
- grid-template-areas: '"state"'
- grid-template-columns: min-content
- grid-template-rows: min-content
label:
- margin-top: 1px
- justify-items: center
- justify-content: center
- font-size: 15px
- font-family: Montserrat
- font-weight: 500
card:
- background-color: grey
This is how it looks.
Desktop:
Mobile:
I’m looking for ideas for improvement and how to design this better 
Thanks
i trying to change the color of an svg file when the color of the rgb light is changing, but its not working, i can change the color to static color
type: custom:button-card
entity: light.yeelight_color_0x37073da
entity_picture: /local/ic/custom_icons/bulb.svg
show_state: false
show_icon: false
show_entity_picture: true
styles:
entity_picture:
- filter: |
[[[
if (entity.state === 'on') {
return 'invert(27%) sepia(99%) saturate(7489%) hue-rotate(356deg) brightness(101%) contrast(104%)';
} else {
return 'brightness(100%)';
}
]]]
but when i try something like this its not working ( i tried few diffrent ways)
type: custom:button-card
entity: light.yeelight_color_0x37073da
entity_picture: /local/ic/custom_icons/masterbedroomnopepole.svg
show_state: false
show_icon: false
show_entity_picture: true
styles:
entity_picture:
- filter: "[[[ return `hue-rotate(${states['light.yeelight_color_0x37073da'].attributes.hs_color[0]}deg) saturate(${states['light.yeelight_color_0x37073da'].attributes.hs_color[1]}%)`; ]]]"
any help how can i do it ?
Can someone help me make a templates for this?
Thank you.
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: max-content 1fr max-content
grid-template-rows: min-content
grid-template-areas: '"one . two three"'
cards:
- view_layout:
grid-area: one
type: custom:button-card
name: לפי שעה
show_state: true
show_name: false
icon: hue:plug-eu-group
entity: sensor.energy_total_next_bill_cost
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: '"i s n"'
card:
- padding: 4px
- background-color: var(--card_background_color)
- box-shadow: var(--rounded-box-shadow)
- border-radius: var(--rounded-border-raduis)
# img_cell:
# - width: 40px
# - height: 40px
# - background: white
# - border-radius: 100%
icon:
- width: 20px
- height: 20px
- color: var(--card_icon_color)
- margin-top: -3px
# name:
# - color: white
# - font-size: 14px
# - padding: 0 10px
state:
- color: var(--card_state_color)
- font-size: 16px
- font-weight: 400
- padding: 0 10px
- view_layout:
grid-area: two
type: custom:button-card
show_state: true
show_name: false
show_icon: true
name: Next Bill
icon: mdi:power-plug-outline
entity: sensor.power_cost_per_hour
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: '"i s n"'
card:
- padding: 4px
- background-color: var(--card_background_color)
- box-shadow: var(--rounded-box-shadow)
- border-radius: var(--rounded-border-raduis)
# img_cell:
# - width: 40px
# - height: 40px
# - background: white
# - border-radius: 100%
icon:
- width: 20px
- height: 20px
- color: var(--card_icon_color)
- margin-top: -3px
# name:
# - color: white
# - font-size: 14px
# - padding: 0 10px
state:
- color: var(--card_state_color)
- font-size: 16px
- font-weight: 400
- padding: 0 10px
- view_layout:
grid-area: three
type: custom:button-card
name: לפי שעה
show_state: true
show_name: false
icon: hue:socket-eu
entity: sensor.total_power
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: '"i s n"'
card:
- padding: 4px
- background-color: var(--card_background_color)
- box-shadow: var(--rounded-box-shadow)
- border-radius: var(--rounded-border-raduis)
# img_cell:
# - width: 40px
# - height: 40px
# - background: white
# - border-radius: 100%
icon:
- width: 20px
- height: 20px
- color: var(--card_icon_color)
- margin-top: -3px
# name:
# - color: white
# - font-size: 14px
# - padding: 0 10px
state:
- color: var(--card_state_color)
- font-size: 16px
- font-weight: 400
- padding: 0 10px
mine looks like this, not my own code but modified to how I wanted it.
I use mushroom for everything.
3 Likes
Hi Simon, would you mind sharing the code?
sure. uses mushroom, card_mod, stack-in-card and Google material icons.
- type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
ha-card-border-width: 0px;
}
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
primary: Bin Collection
secondary: ' {{ states(''sensor.all_waste_types'') }}'
icon: mdi:sack
icon_color: >-
{{ 'blue' if '0 days' in states('sensor.all_waste_types') else
'blue' }}
multiline_secondary: true
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-chips-card
chips:
- type: template
content: ''
icon: mdi:trash-can
icon_color: >-
{{ 'green ' if 'Rubbish' in states('sensor.all_waste_types')
else 'grey' }}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-{{ 'green' if 'Rubbish' in states('sensor.all_waste_types') else 'grey' }}), 0.2) !important;
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
ha-card:after {
content: "{{ 'done' if 'Rubbish' in states('sensor.all_waste_types') else 'close' }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-{{ 'green' if 'Rubbish' in states('sensor.all_waste_types') else 'grey' }}));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
- type: template
content: ''
icon: mdi:recycle
icon_color: >-
{{ 'indigo' if 'Recycling' in states('sensor.all_waste_types')
else 'grey' }}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-{{ 'indigo' if 'Recycling' in states('sensor.all_waste_types') else 'grey' }}), 0.2) !important;
border: none;
box-shadow: none;
}
ha-card:after {
content: "{{ 'done' if 'Recycling' in states('sensor.all_waste_types') else 'close' }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-{{ 'indigo' if 'Recycling' in states('sensor.all_waste_types') else 'grey' }}));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
- type: template
content: ''
icon: mdi:leaf
icon_color: >-
{{ 'brown' if 'Garden' in states('sensor.all_waste_types')
else 'grey' }}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-{{ 'brown' if 'Garden' in states('sensor.all_waste_types') else 'grey' }}), 0.2) !important;
border: none;
box-shadow: none;
}
ha-card:after {
content: "{{ 'done' if 'Garden' in states('sensor.all_waste_types') else 'close' }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-{{ 'brown' if 'Garden' in states('sensor.all_waste_types') else 'grey' }}));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
alignment: end
card_mod:
style: |
ha-card {
top: 10px;
right: 17px;
}
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px;
}
1 Like
You have learned a lot Frosty!!!
Thank you! I can’t take credit for the code. but understanding what your copy, pasting and modifying is important.
3 months ago I knew nothing, I’ve read through every post on mushroom especially the ones from your self helping other people. silently in the background understanding and reading the examples you so kindly provided lol.
my dashboard looks so different now as to when I started.
1 Like
The Google material icons is that a HACS integration? And is it perhaps this one?