I created simple button card to notify me about washing machine status. Tricky part is that it overlaps circle icon on top of bacground image (screenshot of washing machine icon) to create washing animation:
It works perfectly as stand alone card. Vut for my target dashboard I’d like to put it on top of picture element card and for this I need to have trasparrent bvackground of the card. But if I apply some card mod CSS style, it also remove washing machine picture, leaving only rotating icon.
Hope this is the correct thread hope someone can explain whatever simple thing I am missing. This YAML is for showing wind speed and direction, the background icon changes dynamically based on wind speed- That works fine, I have a custom sensor that turns the wind direction from degrees to cardinal direction, that works fine. If the wind speed is 0 mph the background is a static image and does not display any MPH or direction data- That works fine BUT… If the MPG is above 0 I want the MPH and wind direction to appear and it does but the PROBLEM is they are overlapped on top of each other and I can not seem to find a way to seperate them!! That is what I need help with. Here is the YAML for the Dasboard button.
Hello!
Please, could someone explain to me why - only using custom_fields in my button card - very often if i refresh the page the card disappear??? If I remove the custom fields all is working well…
This is supposed to be dynamically updating the icon based on temp change but it isn’t. it displays the current temp from my local weather station then it should be pulling data from a sensor that pulls hourly temp data based on that if the next hours temp is higher or lower it should change the icon if the temp is the same it displays a"same" icon all I can get it to do is display the same icon. I have checke dto ensure the path is current for the icons and all the sensors are working and pulling data but can’t get this to work any and all help is welcomed! here is the card YAML
I’m trying to create a condition in a button card template that retrieves the name of the card itself.
I am defining the name in the dashboard for the template and am trying to access it to compare it to an Input select. I have tried this.name and config.name to no avail.
I’m trying to avoid having to define the card name in variables.
Hi all. I have a problem w dashboard with type SECTION and use card with custom:button-card
When use and use section and put my code my card with button-card , tit no working no load correct and no load all cards…
When use tile view and also use the same cards all works ok and load correct.
Problem is only on first view in dashboard. When use it with secion on second view all load ok.
I dont know where is problem… but only on view section…
anybody has solution for it ?
Button card custom_fields are not working correctly anymore
The problem is button card, not card_mod. Some styles set in the “style” option from the button_card do not work anymore.
The issue is simple: ha-card.button-card-main, has default values for “fonts” “witdh” “padding”. All the values you want te edit/set in the custom_fields do not work anymore. inside custom_fields the button_card styles always stay the default values that are in “ha-card.button-card-main”.
This means someday, the other “styles” in button_card will also not work anymore.
A “fix” is only possible because there is a card_mod. That has the power to overrule this again. Still means button_card is broken.
version 3.5 from card_mod did NOT overrule them anymore. Version 3.4.4 does overrule them again.
Example:
type: custom:button-card
....
custom_fields:
Number:
card:
type: custom:button-card
entity: sensor.hp_printer_pages_total_remaining
tap_action:
action: none
show_name: false
show_state: true
show_icon: false
show_entity_picture: false
color_type: card
color: rgba(255,255,255,0.8)
card_mod:
style: |
ha-card {
font-size: 14px !important;
border-color: #d9d9d9 !important;
box-shadow: none !important;
}
....
styles:
card:
- width: 155px > works
name:
- display: block > works
- position: absolute > works
- bottom: 21px > works
- left: 8px > works
- font-weight: bold > works
- font-size: 16px > works
- font-family: Sans-serif > works
state:
- display: block > works
- position: absolute > works
- bottom: 5px > works
- left: 12px > works
- font-color: rgba(255, 0, 0, 0.8) > works
- font-size: 14px > works
- font-family: Sans-serif > works
- text-transform: capitalize > works
icon:
- width: 110px > works
- margin: 0px 0px 1px 0px > works
custom_fields:
Number:
- width: 50px > works because not in ha-card.button-card-main
- display: block > works because not in ha-card.button-card-main
- position: absolute > works because not in ha-card.button-card-main
- top: 8px > works because not in ha-card.button-card-main
- right: 8px > works because not in ha-card.button-card-main
- font-size: 14px > does NOT work because IS in ha-card.button-card-main
- font-family: Sans-serif > does NOT work because IS in ha-card.button-card-main
- text-transform: capitalize > does NOT work because IS in ha-card.button-card-main
state:
Than we use card_mod for the values that do not work anymore in the style from button_card
card_mod:
style: |
ha-card {
font-size: 14px !important; > works in 3.4.4 not anymore in 3.5
border-color: #d9d9d9 !important; > works in 3.4.4 not anymore in 3.5
box-shadow: none !important; > works in 3.4.4 not anymore in 3.5
}
…