Absolutely perfect Minken! Thank you so much.
Been struggling with that for days…
While I am here, the nest issue us trying to display the time of the next sunset on this custom button card.
I created a template sensor:
- platform: template
sensors:
sunrise:
value_template: '{% set timestamp = as_timestamp(states.sun.sun.attributes.next_rising) | timestamp_custom("%I:%M %p") %} {{ timestamp.lstrip("0") }}'
friendly_name: "Sunrise"
sunset:
value_template: '{% set timestamp = as_timestamp(states.sun.sun.attributes.next_setting) | timestamp_custom("%I:%M %p") %} {{ timestamp.lstrip("0") }}'
friendly_name: "Sunset"
Trying to figure out how to display the time where it currently says ‘below horizon’
Current card code:
type: custom:button-card
entity: sun.sun
show_name: false
show_state: true
state:
- value: above horizon
color: white
icon: mdi:white-balance-sunny
- value: below horizon
color: white
icon: mdi:star-crescent
styles:
card: null
icon:
- width: 42px
- height: 25px
- padding: 18%
- color: white
- border-radius: 50%
name:
- font-size: 14px
- font-weight: bold
state:
- font-size: 14px
- font-weight: bold
Create a template sensor and let it change the name and state depending on sun.
Made an example:
- sensor:
- unique_id: "some_name"
name: >
{% set sunset = (as_timestamp(states.sun.sun.attributes.next_setting) | timestamp_custom("%I:%M %p")).lstrip("0") %}
{% set sunrise = (as_timestamp(states.sun.sun.attributes.next_rising) | timestamp_custom("%I:%M %p")).lstrip("0") %}
{% if is_state('sun.sun', 'above_horizon') %}
Next sunset {{sunset}}
{%- else -%}
Next sunrise {{sunrise}}
{%- endif -%}
state: >
{% if is_state('sun.sun', 'above_horizon') %}
above horizon
{%- else -%}
below horizon
{%- endif -%}
then in your button card change entity, show_name and show_state
Someone who is better then me can probably do this directly in custom:button-card.
Thanks for the reply Minken
Can’t get that to work, have tried entity: sun.sun and sensor.sunset and still cannot get the actual time to display - my code is below.
type: custom:button-card
entity: binary_sensor.sunset
show_name: true
show_state: true
styles:
card: null
icon:
- width: 42px
- height: 25px
- padding: 18%
- color: white
- border-radius: 50%
name:
- font-size: 14px
- font-weight: bold
state:
- font-size: 14px
- font-weight: bold
Made it way more complicated then it needed to be.
This works for me:
Template sensor:
- sensor:
- unique_id: "sun event"
name: "next sun event"
state: >
{% set sunset = (as_timestamp(states.sun.sun.attributes.next_setting) | timestamp_custom("%I:%M %p")).lstrip("0") %}
{% set sunrise = (as_timestamp(states.sun.sun.attributes.next_rising) | timestamp_custom("%I:%M %p")).lstrip("0") %}
{% if is_state('sun.sun', 'above_horizon') %}
{{ sunset }}
{%- else -%}
{{ sunrise }}
{%- endif -%}
icon: >
{% if is_state('sun.sun', 'above_horizon') %}
mdi:white-balance-sunny
{%- else -%}
mdi:star-crescent
{%- endif -%}
custom:button-card
type: custom:button-card
entity: sensor.next_sun_event
show_name: false
show_state: false
label: |
[[[
var time = states['sensor.next_sun_event'].state;
if (states['sun.sun'].state == 'below_horizon')
return "Next Sunrise at " + time;
return "Next Sunset at " + time;
]]]
show_label: true
edit: pasted the worng code…doh…
I leave my previous comments.
But I solved this for you (and for fun for me) without any templates.
Just change this to your timezone and timestyle/hour12 to your likings
{ timeStyle: 'short', hour12: false, timeZone: 'Europe/Stockholm' });
Code below:
type: custom:button-card
entity: sun.sun
show_name: false
show_state: false
show_label: true
size: 50px
label: |
[[[
var next_event = states['sun.sun'].attributes.next_setting;
var text = "Sunset";
if (states['sun.sun'].state == 'below_horizon'){
next_event = states['sun.sun'].attributes.next_rising;
text = "Sunrise";
}
var time = new Date(next_event).toLocaleTimeString('en',
{ timeStyle: 'short', hour12: false, timeZone: 'Europe/Stockholm' });
return text + " at " + time;
]]]
state:
- value: above_horizon
color: yellow
icon: mdi:white-balance-sunny
- value: below_horizon
color: blue
icon: mdi:star-crescent
Everything goes in the custom-button-card.
The only thing you need to change in my updated code example is the timezone.
** REMOVED ORIGINAL QUESTION **
I managed to find my solution in the end :
Sensor:
sensor:
- unique_id: greet
state: template
attributes:
name: >
{% set time = now().hour %}
{% if time <= 1 %} Good night
{% elif time <= 3 %} Good night
{% elif time <= 5 %} Good night
{% elif time <= 7 %} Good morning
{% elif time <= 9 %} Good morning
{% elif time <= 10 %} Good morning
{% elif time <= 13 %} Good afternoon
{% elif time <= 15 %} Good afternoon
{% elif time <= 17 %} Good afternoon
{% elif time <= 19 %} Good evening
{% elif time <= 22 %} Good evening
{% elif time <= 23 %} Good evening
{% else %} Good evening
{% endif %}
- unique_id: alarm_state
state: Measuring
attributes:
name: >
{% set entity_id = 'alarm_control_panel.master' %}
{% if is_state(entity_id, 'disarmed') %}
Alarm system is: <font color='red'>{{ states("alarm_control_panel.master") }}</font>.
{% else %}
Alarm system is: <font color='green'>{{ states("alarm_control_panel.master") }}</font>.
{% endif %}
Button-card Template:
sidebar:
variables:
alarm_state_entity:
weather_state_entity:
show_state: false
show_icon: false
tap_action:
action: none
styles:
grid:
- grid-template-areas: |
"n"
"alarm_state"
- grid-template-rows: auto repeat(2, min-content)
- align-items: start
- will-change: transform
card:
- background: none
- border: none
- box-shadow: none
- padding: 1em
name:
- justify-self: "start"
- font-size: "3.5rem"
- font-weight: "100"
- font-family: "Merriweather"
- line-height: 10%
- white-space: "inherit"
custom_fields:
alarm_state:
- line-height: 80%
- justify-self: "start"
- font-size: "1rem"
- font-family: "Raleway"
name: >
[[[
if (entity) {
let attr = [];
for (let [k, value] of Object.entries(entity.attributes))
window.navigator.userAgent.match(/iPhone/i)
? k !== 'time' && k !== 'date' && value !== false && (attr += `<p>${k === 'greet' ? `<span class="iphone">${value}</span>` : `${value}`}</p>`)
: value !== false && (attr += `<p>${value}</p>`);
return attr;
}
]]]
custom_fields:
alarm_state: >
[[[
var ent_alarm = states[variables.alarm_state_entity].attributes.name
return ent_alarm;
]]]
The name piece came from matt8707’s sidebar
And lastly in my home.yaml:
- type: vertical-stack
view_layout:
grid-area: header
cards:
- type: custom:button-card
entity: sensor.template_greet
variables:
alarm_state_entity: sensor.template_alarm_state
template:
- sidebar
- type: custom:mod-card
card:
show_current: true
icon: none
show_forecast: false
type: weather-forecast
entity: weather.buienradar
secondary_info_attribute: temperature
- !include repeaters/menu.yaml
Which all results in…
Next up figuring out how to change the style of the weather card through the button-cards 
Hi, I am trying to develop a card to display input_datetime helper.```
I created a template to be used by many input_datetime helperS. So I am using variables
1-I am having problem with the double_tab. Entity ‘[[[ return variables.var_date ]]]’ not available
How can refer to the entity contain in the variable.
2- Also, I wish to set the label with the state of my entity ? How?
3- Finally, I would like to extract the hour and minutes HH MM of my helpers (some have DATE and TIME, other only contains TIME.
newdatetime:
type: custom:button-card
entity: '[[[ return variables.var_date ]]]'
show_name: false
show_state: false
show_icon: false
show_label: true
label: my label
double_tap_action:
action: more-info
styles:
card:
- height: 40px
- width: 160px
I’m trying to create some custom buttons to my dashboard. I would like to have the background of the button the have a blur effect. I was able to achieve this using this code in card mod. The effect works fine via web browser in Chrome on PC. The issue I’m having is that the HA app on my iPhone does not appear to have this effect. Will I need to change the backdrop-filter?
card_mod:
style: |
ha-card {
backdrop-filter: blur(5px);
background: rgb(202, 202, 202, .5);
width: 18em;
margin-left: 80px;
}I found a solution to my problem number 2
label: '[[[ return `${states[ variables.var_date ].state}` ]]]'
hello all, I am sorry but I have no idea what to do, I know what I would like but don’t know how to do it. I have spent many hours on the forums and cannot find anything.
Ideally I would like 2 buttons that turn into 1 based on the state of my alarm based on the mushroom look and feel.
I would like an Arm Home button and Arm Away button.
when either is pressed, it calls my alarm service of course but then those 2 buttons change and become one DISARM button, as at that point it’s the only option.
Then when the disarm button is pressed, without my code it will disarm and both buttons will re appear as the options.
I know this code I am pasting is SOOOOO basic but I literally have tried to finagle everything I could piecing together code from this form and just can’t find anything :0(
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Arm Stay
icon: mdi:shield-home
entity: zone.home
icon_color: orange
layout: vertical
tap_action:
action: call-service
service: alarm_control_panel.alarm_arm_home
data:
code: '1234'
target: null
entity_id: alarm_control_panel.home
- type: custom:mushroom-template-card
primary: ''
secondary: Arm Away
icon: mdi:shield-account-variant
entity: alarm_control_panel.home
icon_color: blue
layout: vertical
tap_action:
action: call-service
service: alarm_control_panel.alarm_arm_away
data:
code: '1234'
target: null
entity_id: alarm_control_panel.home
- type: custom:mushroom-template-card
primary: ''
secondary: Disarm
icon: mdi:shield-lock-open
entity: alarm_control_panel.home
icon_color: green
layout: vertical
tap_action:
action: call-service
service: alarm_control_panel.alarm_disarm
data:
code: '1234'
target: null
entity_id: alarm_control_panel.home
I came here to ask my own question but for your question it sounds like you want a conditional card, inside would be two conditions based on state of the alarm. if disarmed, display the two arm cards, if armed display the one disarm card.
My own question is whether or not it is possible to return the entity id in the below situation.
I have a custome button card with the following variable setup.
custom_fields:
slider:
card:
full_row: true
type: custom:slider-entity-row
entity: '[[[ return variables.slider_entity ]]]'
If i include the variable “slider_entity” in my dashboard it works perfectly fine. e.g
- type: custom:button-card
entity: fan.bed_1_fan
template: fan
variables:
slider_entity: fan.bed_1_fan
But for my use case the entity will always be the same as the primary entity. So i would love to not have to input the variable at all and simply have the template contain somthing like:
custom_fields:
slider:
card:
full_row: true
type: custom:slider-entity-row
entity: '[[[ return entity.id ]]]'
you are aware you could do:
{% set time = now().hour %}
{% if time <= 5 %} Good night
{% elif time <= 10 %} Good morning
{% elif time <= 17 %} Good afternoon
{% else %} Good evening
{% endif %}
using that same logic?
Hello,
maybe someone can help me here. I’m trying for days to make a custom:button look like the action buttons of the new tile card (or also mushroom cards). All I want to achieve is use the same background and text colors, both for default dark and light themes. I just can’t find a way to use the proper theme color variables in my custom button cards.
This is an example of the tile card. I want my custom buttons to have the same colors like the up, stop and down buttons.
Ah yes, there was different texts before… Somehow it didn’t struck me to just remove the doubles 🥲
This card is already build in custom:button card
See: Cover Card - UI Lovelace Minimalist
That repo is also the main inspiration of mushroom and the tile card 
The code is also for free available on the github if you are interested in making personal changes.
could you please put the Button_ row template code.
thanks in advance
Hi all, is here, in this thread, an example about how to show the number of turned on lights on a button indicating a light?