Can you please supply a link.
Thankyou. It works.
Replying to myself, I really hated this change, and unconformed with having a non-customized badge, I’m working on a solution, for each type of previous badge, to mimic the UI behaviour (more or less) not losing many customization options, this time using custom:button-card.
Refering the customizations that I had, I’m starting to do custom buttons for each one, and this is what I have until now:
- From This (OLD BEAUTIFUL/CUSTOMIZABLE Badges)
- To THIS (using card-mod / vertical-stack / grid cards)
In my country , we have a saying: “Who doesn’t have a dog hunts with a cat”…
(only did the first 4, with a lot of work, and still not all the functionality, but I WILL GET THERE, unless card-mod stops working… something that would not surprise me, since is not officially supported, but would definitly break my 4 year old 32000+++ lines of yaml dashboard all the way and make me simply give up on this all together). But, since “officially supported features” (old badges) get wasted in a blink of an eye without any consideration for long time users, I surelly could not complain for something “not supported”. Sorry, just venting my frustration, that has been increasing exponationlly latelly, with each “improvement”, I’m “old fashioned”, excuse me.
Sharing my present code, of my setup, just for reference, and if someone wants to help and improve on this (a lot of room), I really appreciate. Still lots of “edges” to round, and some old badges styles still missing, but if there is interest I will post my progress.
type: custom:vertical-stack-in-card
cards:
- square: true
type: grid
columns: 6
cards:
- type: custom:button-card
entity: binary_sensor.porta_principal_contact
name: Principal
show_name: false
show_icon: true
show_label: false
styles:
card:
- border-radius: >
[[[ return states['alarm_control_panel.alarme_geral'].state ===
'disarmed' ? '30%' : '15% 15% 55% 55%'; ]]]
- background-color: >
[[[ return states['binary_sensor.porta_principal_contact'].state
=== 'on' ? '#599627' : 'var(--primary-background-color)'; ]]]
- width: 62px
- height: 62px
- border: 3px solid
- box-shadow: |
[[[
const state = states['alarm_control_panel.alarme_geral'].state;
const colors = {
'armed_away': 'greenyellow',
'armed_home': 'mediumturquoise',
'armed_night': 'purple',
'armed_vacation': 'deepskyblue',
'arming': 'orange',
'disarmed': 'darkgray',
'pending': 'tomato',
'triggered': 'red'
};
return `inset 0px 0px 0px 0px ${colors[state] || 'darkgray'}`;
]]]
- color: |
[[[
const state = states['alarm_control_panel.alarme_geral'].state;
const colors = {
'armed_away': 'greenyellow',
'armed_home': 'mediumturquoise',
'armed_night': 'purple',
'armed_vacation': 'deepskyblue',
'arming': 'orange',
'disarmed': 'darkgray',
'pending': 'tomato',
'triggered': 'red'
};
return colors[state] || 'darkgray';
]]]
icon:
- color: white
- width: 35px
- type: custom:button-card
entity: binary_sensor.presenca_casa
show_name: false
show_icon: true
show_label: false
styles:
card:
- border-radius: |
[[[
return states['binary_sensor.modo_dormir'].state === 'on' ? '30%' :
states['binary_sensor.modo_cozinha'].state === 'on' ? '5% 5% 40% 40%' :
states['vacuum.roborock_q7_max'].state === 'cleaning' ? '40% 40% 5% 5%' :
states['binary_sensor.modo_refeicao'].state === 'on' ? '30%' :
states['input_boolean.duche'].state === 'on' ? '5%' :
states['input_boolean.modo_visitas'].state === 'on' ? '30%' :
states['input_boolean.modo_criancas'].state === 'on' ? '30%' :
states['input_boolean.modo_filme'].state === 'on' ? '0% 0% 15% 15%' :
states['input_boolean.modo_maquilhagem'].state === 'on' ? '30%' :
states['binary_sensor.modo_ferias'].state === 'on' ? '30%' :
states['input_boolean.modo_lareira'].state === 'on' ? '40% 40% 5% 5%' :
'30%';
]]]
- background-color: >
[[[ return states['binary_sensor.presenca_casa'].state === 'on'
? '#024f23' : '#6a3f07'; ]]]
- width: 62px
- height: 62px
- border: 3px solid
- border-top-style: >
[[[ return states['binary_sensor.modo_dormir'].state === 'on' ?
'solid' :
states['binary_sensor.modo_cozinha'].state === 'on' ? 'dotted' :
states['vacuum.roborock_q7_max'].state === 'cleaning' ? 'solid' :
'solid';
]]]
- box-shadow: |
[[[
return `inset 0px 0px 0px 0px ${
{
'on': 'purple',
'off': 'darkgray'
}[states['binary_sensor.modo_dormir'].state] || 'darkgray'
}`;
]]]
name:
- justify-self: center
- padding-top: 10px
- font-size: 14px
- color: var(--primary-text-color)
icon:
- color: white
- width: 45px
- type: custom:button-card
color_type: label-card
entity: sensor.openweathermap_temperature
show_name: false
show_icon: false
show_state: true
state_display: "[[[ return parseFloat(entity.state).toFixed(1) ]]]"
styles:
card:
- border-radius: 30%
- background-color: "#222222"
- width: 62px
- height: 62px
- border: 3px solid
- color: orange
state:
- color: white
- font-weight: bold
- margin-top: "-8px"
- font-size: 19px
grid:
- position: relative
custom_fields:
caixa:
- background-color: orange
- border-radius: 30% 30% 0% 0%
- position: absolute
- left: 26%
- top: 75%
- height: 20px
- width: 28px
- font-size: 13px
- font-weight: bold
- line-height: 19px
- color: white
custom_fields:
caixa: ºC
- type: custom:button-card
entity: sensor.openweathermap_humidity
name: Principal
show_name: false
show_icon: false
show_state: true
state_display: "[[[ return parseFloat(entity.state).toFixed(0) ]]]"
styles:
card:
- border-radius: 30%
- background-color: "#222222"
- width: 62px
- height: 62px
- border: 3px solid
- color: dodgerblue
state:
- color: white
- font-weight: bold
- margin-top: "-8px"
- font-size: 20px
grid:
- position: relative
custom_fields:
caixa:
- background-color: dodgerblue
- border-radius: 30% 30% 0% 0%
- position: absolute
- left: 26%
- top: 75%
- height: 20px
- width: 28px
- font-size: 13px
- font-weight: bold
- line-height: 19px
- color: white
custom_fields:
caixa: "%"
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: grid
columns: 6
square: false
cards:
- type: custom:button-card
entity: binary_sensor.porta_principal_contact
name: Principal
show_name: true
show_icon: false
show_state: true
styles:
card:
- border-radius: 15%
- background-color: "#333233"
- width: 62px
- height: 30px
- border: none
- color: white
state:
- color: white
- font-size: 9px
- color: yellow
name:
- color: white
- font-weight: bold
- font-size: 10px
- type: custom:button-card
entity: binary_sensor.presenca_casa
name: Presença
show_name: true
show_icon: false
show_state: true
styles:
card:
- border-radius: 15%
- background-color: "#333233"
- width: 62px
- height: 30px
- border: none
- color: white
state:
- color: white
- font-size: 9px
- color: yellow
name:
- color: white
- font-weight: bold
- font-size: 10px
- type: custom:button-card
entity: sensor.openweathermap_temperature
name: Temperatura
show_name: true
show_icon: false
show_state: false
styles:
card:
- border-radius: 15%
- background-color: orange
- width: 62px
- height: 30px
- border: none
- color: white
name:
- color: white
- font-weight: bold
- font-size: 9px
- type: custom:button-card
entity: sensor.openweathermap_humidity
name: Humidade
show_name: true
show_icon: false
show_state: false
styles:
card:
- border-radius: 15%
- background-color: dodgerblue
- width: 62px
- height: 30px
- border: none
- color: white
name:
- color: white
- font-weight: bold
- font-size: 9px
- type: custom:mushroom-template-badge
content: Consumo
- type: custom:mushroom-template-badge
content: T.Água
card_mod:
style: |
ha-card {
background: none;
border: none;
}
(removed custom actions for each BUTTON (because it’s NOT REALLY A BADGE)
If you want to make them round, just replace the ‘30%’ with ‘50%’ in every:
styles:
card:
- border-radius: 30%
Thank you, for reading this, and thank YOU also, reading this, that helps everyone that you can.
3 Likes
Open source does not mean any old garbage is accepted. The project has a management team that decide what gets accepted into the core.
You are allowed to give feedback, no one is stopping you.
Just like I am allowed to inform you of the current projects direction if I know it.
Agreed. My 1ct against a full account. One’s garbage may be someone’s treasure… It is what it is, if I don’t accept, my problem. And thank you for sharing the directions of the project. Sorry, my mistake. Post deleted.
And this can make you more happy - it restores a possibility to use card-mod for badges on a view:
1 Like
Thank you!!! Missed that, and definitely gonna check that out, because I still didn’t hed the time to do all of the badges I had!
1 Like