nah it’s not at all significant. What browser do you use? Are you certain the js rfiles were downloaded in raw mode? What does the first few lines here…
It happens in Safari & Firefox & ios App in both ios and mac. I just go to here and click button-card.js:
Then copy that file into config/www. I can’t figure out why it’d work sometimes, but not others, and then work if I refresh the page/app, but sometimes doesn’t.
Could you please check if there are some javascript errors in the javascript console of your browser when this happens?
How do you get the timer working
if I put
if (states['timer.internet'].state == 'idle') return ' ';
return states['timer.internet'].state;
shows “Active”
if (states['timer.internet'].state == 'idle') return ' ';
return states['timer.internet'].attributes.remaining;
shows timer original duration but not updating.
Are you using the latest version of radial-menu? There were known problems with older versions running alongside button-card.
Also there are lots of errors in your javascript console related to card-modder which shouldn’t be there also.
I’d suggest you update all the cards you have, add a version behind every card declaration ?vx.y.z and try again
That’s not possible unfortunately. The remaining time of a timer is not updated in the attribute.
The only way to display the remaining time is to put the timer entity in the entity field and show_state: true
It’s not a bug, it’s by design of HA core and I can’t do anything for that.
Ok. Redownloaded every card, added in versions for everything, deleted cards I’m not currently using (including radial-menu). Still getting “Unhandled Promise Rejection: /local/plugins/card-modder.js?v=0.1” for card-modder, and “Failed to load resource: the server responded with a status of 404 (Not Found)” & “TypeError: undefined is not an object (evaluating ‘Object.keys(this._keyBindings)’)” for light-entity-card, BUT the page is showing correctly at the moment. Guess I’ll wait and see what happens.
Thanks for your help.
Thanks for your support folks! 
I’ve opened a buymeacoffee account, HOWEVER since I’m doing that for fun and because I turn Home-Assistant upside-down myself, everything that you send there will be entirely donated to the World Wildlife Fund 
I’m neither in need of coffee nor money to continue working on this 
3 Likes
everything that you send there will be entirely donated to the World Wildlife Fund
Done 
Here is some virtual 
for you
1 Like
ok, so I think i am having ’ I cant see the woods for all the god damn trees in the way moment!!!’
I have a blind that I directly control via a switch in home assistant. As the blind is a mysensors implementation it manifests as cover in home assistant for status updates - not control.
I have succesfully implemented a custom button for the switch which allows me control the blind, one thing that I wanted to change was the state message, instead of on/ off I would prefer open/ closed - I have developed a little OCD since discovering this custom card 
I couldnt find anything that would easily allow me to do this so I switched to the cover as the entity for status (which shows open/ closed) and then ‘tried’ to tie a script to the tap_action to toggle the blinds - config below-
This is my anchor:
standard_button_style2: &standardbuttonstyle2
type: "custom:button-card"
color: auto
show_label: true
show_state: true
show_name: true
styles:
card:
- border-radius: 12px
- height: 63px
- width: 63px
- margin: 8px 8px 4px 0px
label:
- font-size: 9px
- font-family: Helvetica
- padding: 0px 6px
- justify-self: start
state:
- font-size: 9px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- padding-left: 6px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
- margin-right: 25%
name:
- justify-self: start
- padding-left: 6px
- font-weight: bold
- font-family: Helvetica
- font-size: 9px
icon:
- align-self: flex-start
- height: 62%
- width: 62%
state:
- value: "closed"
styles:
card:
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
hold_action:
action: more-info
tap_action:
action: call-service
service: script.lounge_blind_toggle
This is my ‘test button’ implementation
- <<: *standardbuttonstyle2 entity: cover.vert_blind_control_3_4 icon: mdi:lightbulb name: Test Blind
Am I having a homer simpson moment - why doesnt this work? or is there an easier way to get the same result?
It’s not very clear what is not working by reading your message. Also your config is not correctly aligned in your copy paste.
However if you want to call a script I’d use:
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.lounge_blind_toggle
RomRider - thank you for the reply, and yes my question was not well asked - I was very frustrated after staring at this for several hours last night but you have it correct in your suggetion and it works perfectly now - big thank you
To ease template usage, you can now refer to the
entityassigned to the button on acall-serviceaction using theentitykeyword in theentity_idparameter:
Spent today changing my config to use yaml mode and templates in my button cards.
Tried using the above function from the release docs, but it’s not working. Works fine if I put the actual entity_id into the template. Have I done something wrong?:
Results in this error when trying to use it.
Relevant templates:
timer_numbers:
show_icon: false
show_name: true
show_state: true
tap_action:
action: more-info
dbltap_action:
action: call-service
service: input_number.set_value
service_data:
entity_id: entity
value: 0
hold_action:
action: call-service
repeat: 500
service: input_number.increment
service_data:
entity_id: entity
timer_hours:
template: timer_numbers
name: Hr
Button:
- type: 'custom:button-card'
template: timer_hours
entity: input_number.bedtime_timer_hours
Please download again the file from the release on github, there was a glitch in the first one published there (the Circle CI did something wrong), I’m very sorry for that. I corrected it 20min after the release but I guess you where faster than me 
Also clear your cache or change the ?vx.y.z at the end of your resource declaration 
1 Like
Couple of questions. @RomRider
- How do I adjust CSS for dark theme?
Following button works fine in regular theme but when UI switches to dark theme (in the evening hours) how do I adjust the color and icon to pop out?
Regular theme:
Dark theme:
- How do I pop out or make it bold, the lock overlay?
In some dark themes, it is very hard to see this lock overlay.
Btw, everything works fine with recent move to HACS.
*Edit: I forgot to add the template
button_light:
# label_template: >
# var bri = Math.round(entity.attributes.brightness / 2.55);
# return (bri ? bri : '0') + '%';
color: auto
size: 30%
show_state: true
show_label: true
styles:
card:
- border-radius: 12px
- width: 100px
- height: 100px
- --paper-card-background-color: rgb(254, 239, 179)
- padding-left: 10px
name:
- justify-self: start
- padding-left: 3px
- font-weight: bold
- font-family: Helvetica
- font-size: 12px
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- padding-left: 3px
state:
- font-size: 10px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 3px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
# first row (fr) means take rest of the space
# second and thrid row row (min) means take the area of longest word in the sentence
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
state:
- value: 'on'
# spin: true (uncomment this line for spinning icon)
styles:
name:
- color: black
state:
- color: gray
label:
- color: red
# I added this to show the icon on phone
icon:
- color: black
id: on-icon #<<----- new id to be used in the entity config
- value: 'off'
styles:
card:
- opacity: 0.6
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon #<<----- new id to be used in the entity config
- value: 'unavailable'
styles:
card:
- opacity: 0.4
- color: grey
- --paper-item-icon-color: grey
label:
- color: rgba(0, 0, 0, 0.0)
state:
- color: red
1 Like
If you set the colours using variables from the theme by using color: var(–paper-card-background-color) or one of the other variables, then it should change automatically to reflect the variable. Figure out which colours work best in each theme, and include them in your themes.yaml.
For example, in the themes I use, I added this:
# Lovelace Colours #
primary-button-colour: 'rgb(91, 237, 54)'
secondary-button-colour: 'rgb(221, 232, 6)'
low-colour: 'rgb(14, 245, 249)'
high-colour: 'rgb(211, 97, 106)'
light-bright: 'rgb(255,215,184)'
light-soft: 'rgb(255,180,115)'
light-dim: 'rgb(255,120,0)'
light-dark: 'rgb(255,16,0)'
And my button templates then reference the colours like this:
motion_sensor:
template: tap_info
state:
- color: var(--secondary-button-colour)
icon: 'mdi:run-fast'
value: 'on'
- color: var(--primary-button-colour)
icon: 'mdi:walk'
value: 'off'
1 Like
HI @RomRider
with this release I take it the <br> should be possible in the name field? What is the required code for that now? Ive tried various options but only get the exact code in the button, in stead of the line break
thanks!
I’ve tried it with this format used for the label_template:
name_template: >
return 'Corridor' + "<br>" + 'terrace'
though essentially not a template of course, so might not be the correct way of adding a line break…
You have caching issues. This should work
just to be precise, since it isn’t a template, and release notes announce support for HTML in name or name_template` , should this work:
name: Corridor + "<br>" + terrace
and, when using a template:
name_template: >
return entity.state.substr(0, entity.state.length-11) +
"<br>" + entity.last_changed
?
edit
think I found it, name doesn’t need template formatting, simply the <br>:
name: Corridor <br> terrace
nice! thanks.
since no state_template is allowed, I have to use this for the name on my overview button:
name_template: >
return 'Last motion' + "<br>" + entity.state.substr(0, entity.state.length-11)
it takes the first part of the variable discussed before, and shows that in the name field, now with a line brake to mimic the state on the button:
.
which is fine. For this sensor. When the longer named ones will trigger the Last motion, they will get eclipsed again…
Wouldn’t there be a general CSS code to auto word wrap longer names/labels etc?
Also, since this is now part of the name field, it inherits the name format. In my particular button, trying to mimic the state, that has a different format, (smaller font, grey versus black font-color). Could I set that using html coding maybe?
1 Like