Makis
November 26, 2021, 3:30pm
6173
Hi all
aspect_ratio: 1/0.6
name: Laundry
show_icon: false
color: steelblue
size: 45%
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: b4dcdef6_ec5cae64
title: Bath Lights
card:
type: entities
entities:
- entity: switch.bath_light_1
- entity: switch.bath_light_2
- entity: switch.wc_light
- type: divider
- entity: sensor.temperature_purifier
secondary_info: last-changed
- entity: input_number.how_water_temperature
- entity: input_number.water_heater_minutes
- entity: switch.sonoff_100099b6de
- entity: sensor.water_heater_daily_time
- entity: sensor.water_heater_time_on
secondary_info: last-changed
- type: divider
- entity: sensor.bath_temp_2
secondary_info: last-changed
show_name: true
entity: sensor.temperature_31
show_state: true
state:
- value: 20
operator: <
color: red
- value: 20
operator: '>='
color: steelblue
styles:
card:
- background-color: '#00000'
- border-radius: 10%
- font-size: 11px
- color: steelblue
type: custom:button-card
Here is what I need ideally.
benm7
November 29, 2021, 6:20am
6174
Works perfectly, thanks so much!!!
ThaNerd
November 29, 2021, 5:08pm
6175
How can I remove the name and icon from the graph part?
- type: custom:button-card
entity: sensor.ckb_value
aspect_ratio: 1/1
show_icon: false
custom_fields:
graph:
card:
type: sensor
entity: sensor.ckb_value
graph: line
style: |
ha-card {
box-shadow: none;
}
styles:
custom_fields:
graph:
- filter: opacity(50%)
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
hold_action:
action: more-info
dexstar
November 30, 2021, 12:29am
6176
Try this.
type: custom:button-card
entity: sensor.bathroom_temperature
aspect_ratio: 1/1
show_icon: false
custom_fields:
graph:
card:
type: sensor
name: ' '
icon: ' '
entity: sensor.bathroom_temperature
graph: line
style: ha-card {
box-shadow: none; }
styles:
custom_fields:
graph:
- filter: opacity(50%)
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
hold_action:
action: more-info
No name or icon.
1 Like
trying to style a button-card header with my button template:
button_default_title:
aspect_ratio: 12/1
tap_action:
action: none
styles:
card:
- background-color: var(--background-color-off)
- color: var(--text-color-off)
- font-size: 24px
# - font-weight: bold
- padding: 16px
name:
- justify-self: left
to have the same look as my regular card headers, which use:
card_mod: &header
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
(only need the button-card as header because of the fact I sometimes need to have a tap_action/hold action)
however, this is the result:
left the custom:button-card, right the regular entities card with the card-mod.
even though CSS Padding tells us padding: 16px should set it for all sides, I can not make it happen. It does change the left-side padding, but not the top and bottom. Ive also tried padding-top/padding-bottom, but that is fruitless also.
setting
name:
- padding-top: 16px
- padding-bottom: 16px
doesnt work either…
but taking out aspect_ratio is getting really close:
button_default_title:
# aspect_ratio: 12/1
tap_action:
action: none
styles:
card:
- background-color: var(--background-color-off)
- color: var(--text-color-off)
- font-size: 24px
# - font-weight: bold
- padding-left: 16px
- padding-top: 8px
- padding-bottom: 8px
name:
- justify-self: left
Anyone around to help me make it happen 100% ?
thanks for having a look!
maverik80
November 30, 2021, 12:26pm
6178
hello, I would like to create a button card that changes the background of the card to me when a template sensor varies as an attribute has an entity_picture.
type: custom:button-card
I am in my novice
Jason_hill
November 30, 2021, 7:29pm
6179
Hi All. In the button card example, how can i make the custom field icon spin and change color when state is “ON”
Cant figure out to rewrite the code correctly.
temp: >
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon><span>${entity.state}°C</span>`
]]]
``´´
potat0
December 3, 2021, 3:04am
6180
Can we use new templating with custom button?
according to docs:
Avoid using states.sensor.temperature.state, instead use states('sensor.temperature'). It is strongly advised to use the states(), is_state(), state_attr() and is_state_attr() as much as possible, to avoid errors and error message when the entity isn’t ready yet (e.g., during Home Assistant startup).
tried replacing templates from states[''].state to states('') but it always gives error
mase
December 3, 2021, 10:57pm
6181
hey guys,
somehow i just dont manage to figure out how the grid stuff works.
3 button on the bottom should call a service when it´s getting taped.
anyone has something similar working already that i could copy and modify?
svalmorri
December 3, 2021, 11:27pm
6182
Why don’t use the templates of “minimalist” straight away, which Is what you are showing?
mase
December 3, 2021, 11:41pm
6183
the only template i found is the cover template and somehow i didn‘t figure out what all i gotta change. made some small steps, might have to look into it again.
svalmorri
December 4, 2021, 6:50am
6184
It Is under UI/config/minimalist-templates
1 Like
jumper
December 6, 2021, 1:04am
6185
Don’t think so. Use javascript between [[[ and ]]]. It’s a challenge moving between yaml and javascript depending on the context. Here’s an example that works with button-card:
tap_action:
action: call-service
service: >
[[[
if ( states['alarm_control_panel.house'].attributes.arm_up_state == 'not_ready_to_arm' )
return 'script.do_nothing';
else
return 'script.append_number_to_alarm_code';
]]]
Unfortunately no, I didn’t find a solution. Does anybody have an idea?
MartinAM
December 11, 2021, 8:21pm
6189
cover.set_cover_position → Doesn’t work.
Anyone can help here?
I have this code this does not work:
type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 75
target:
entity_id: cover.master_bedroom_shutter_1
name: Master Bedroom 75 Left
entity: cover.master_bedroom_shutter_1
It gives me this error:
Failed to call service cover/set_cover_position. must contain at least one of entity_id, device_id, area_id.
Strange is if I use regular button al works fine, for example this code works:
type: button
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 75
target:
entity_id: cover.master_bedroom_shutter_1
name: Master Bedroom 75 Left
entity: cover.master_bedroom_shutter_1
As this is a custom card, I don’t think it uses the target keyword in service calls.
Does this work?
type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
entity_id: cover.master_bedroom_shutter_1
position: 75
MartinAM
December 12, 2021, 12:02pm
6191
Yes, it works.
Thanx.
liminal
December 13, 2021, 3:15am
6192
How are you guys getting great spacing?
My buttons are just sitting on top of each other?
skelso
December 15, 2021, 8:03am
6193
I’ve been pulling my hair out over this- trying to create a smaller thermostat card similar to the simple-thermostat integration.
Almost there but four small questions:
How do I make the sensor state (temperature) font larger?
How can I adjust the up/down button sizes to cover the top/bottom halves of the card?
How do I even out the spacing?
How do I get rid of the shadow behind each button? I got rid of it previously but it came back with 2021.12.1
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- padding: 8%
- shadow: 0px 0px 0px 0px
- margin: 0px 0px 0px 0px
- font-size: 24px
grid:
- grid-template-areas: '"upbutton upbutton" "mid mid" "downbutton downbutton"'
- grid-template-rows: 1fr 2fr 1fr
custom_fields:
upbutton:
- height: 20px
- align-self: middle
- justify-self: middle
- background: transparent
- box-shadow: none
- 'primary-background-color:': none
- '--ha-card-background': rgba(0, 0, 0, 0.0)
- '--ha-card-box-shadow': none
mid:
- align-self: middle
- justify-self: middle
- '--ha-card-box-shadow': none
- '--ha-card-background': rgba(0, 0, 0, 0.0)
downbutton:
- height: 20px
- align-self: end
- justify-self: middle
- '--ha-card-box-shadow': none
- '--ha-card-background': rgba(0, 0, 0, 0.0)
custom_fields:
upbutton:
card:
type: button
icon: mdi:chevron-up
tap_action:
action: call-service
service: input_number.increment
service_data:
entity_id: input_number.office_target_temp
mid:
card:
entity: input_number.office_target_temp
type: button
show_icon: false
show_name: false
show_state: true
tap_action:
action: fire-dom-event
browser_mod:
command: more_info
entity_id: climate.office_2
downbutton:
card:
type: button
icon: mdi:chevron-down
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: call-service
service: input_number.decrement
service_data:
entity_id: input_number.office_target_temp
kimus
December 15, 2021, 10:23am
6194
you do better with "custom:numberbox-card" man…
