How are you editing your files? I go to the HA directory with VSCode and open them from there.
So just as an FYI I do have the colors changing now since your last post so it definitely has something to do with formatting.
I’m editing from the UI, as mentioned in post 19. Never from the HA directory.
THANK YOU SO MUCH, YOU HAVE BEEN VERY HELPFUL. Never edited that way before but it is so much clearer now. Missed it in post 19. THANKS AGAIN
I can get the name of badge to change but what about font_size och font color?
I have tried but can’t figure it out.
Follow the link provided by @Troon and here are some link to understand CSS
CSS font-size property (w3schools.com)
CSS color property (w3schools.com)
i got the following:
- type: state-badge
entity: switch.sonoff_10015c8b2f
style:
top: 3%
left: 25%
:host {
--label-badge-blue: {% if is_state('switch.sonoff_10015c8b2f', 'on') %} green {% else %} red {% endif %};
}
but it wont work…
whats wrong?
mod is installed
Wrong syntax.
You mixed together card-mod & a “style” option of picture-elements card.
Go to card-mod thread → 1st post → link at the bottom.
What are you trying to customize?
Because badges at the top are in the - badges:
section.
The one you are trying to customize is a state-badge in a picture-elements card, isn’t it?
The solution here is not relevant for that.
Have a look, as @Ildar_Gabdullin said, to the link https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/1396
i would like to have the floorplan of my apartment.
and then i would like to have added all my window sensors and maybe the lights.
then i would like that my window sensors are red when open and green when closed.
they are “switches” from sonoff (wifi door sensors) and it would also be cool not to have ON and OFF written on them. OPEN and CLOSE would be cool.
for that i got under dashboard a picture-elements card.
and there is my local image of the floorplan.
i dont know if that is the right way.
and it would be cool if viewed on other devices, the sensors are on the right position and not overly big.
is that possible?
EDIT: - found the way to display the icons
elements:
- type: image
entity: switch.sonoff_10015c8b2f
state_image:
'on': /local/windowopen.png
'off': /local/windowclosed.png
style:
top: 5%
left: 25.25%
now i just need to find out because of the scaling.
EDIT2: scaling seems to work for my example.
Ok, you found yourself your solution
Not related to the solution but I’m giving you an extra “tip” for picture-elements card, try this
- entity: sensor.xiaomi_temperature
style:
color: transparent
font-size: 8px
left: 64%
top: 11.5%
'--label-badge-background-color': white
'--label-badge-text-color': black
This will hide the ugly text and change the text/color of the badge. Could be usefull for what you’re doing (or not)
the solution i posted is not what i used in the end.
here is my actual code:
- type: state-icon
entity: switch.sonoff_10015c8b2f
icon: mdi:window-closed-variant
style:
top: 4%
left: 19.8%
'--paper-item-icon-color': gray
'--paper-item-icon-active-color': red
But with this its not possible to change the icon depending on the state…
- entity: light.kidsroom
hold_action:
action: more-info
image: /local/ceiling-light-on.png
state_image:
'off': /local/ceiling-light-off.png
'on': /local/ceiling-light-on.png
unavailable: /local/ceiling-light-grey.png
yes with images it works, with mdi icons not…
Solution was already provided.
the solution for changing the mdi icons?
i didnt see it, and i tried to implement, when someone said i mixed up things.
but i never saw a solution for a state-label changing mdi icons that worked
You should open your own topic.
This one is about the customization of the badges at the top of a view.
You’ll get more help, especially with self explaining title like “How to change mdi icons based on status in picture-elements”
As this one is closed with a solution, nobody is coming to read and answer your questions
Ah ok, no problem. I just wanted to avoid opening too many topics.
My answer was about customizing badges.
It is same for badges for picture-elements & “top of the page” - card-mod (link was provided). (actually, only a possibility to specify a “name” is the only difference between them)
In some limited scope customizing badges in picture-elements is possible w/o card-mod - by using only stock “styles” option.