Could you explain what means “the new syntax”, shall we use it from now, will it work everywhere?
And to add to that: Will the old syntax stop working, or is the new syntax more like syntactic sugar?
Could you explain your question more?
If you want.
I don’t know, but in all of my uses so far it’s worked.
I think it will still work.
It does fix a problem with the old syntax that stopped you from shadow-rooting into an element inside of a shadow-root
1 Like
Please give me an example of this, I did not get the point, thank you!
This originally worked, then stopped working:
style:
element-card:
$:
another-thing:
$: |
When the new syntax came out, it worked.
Sorry being late:
I achieved it the way as bellow. See, it’s content of entities card
type: entities
title: Kitchen
entities:
- entity: light.kitchen
icon: 'mdi:dome-light'
- entity: light.kitchen_worktop
type: 'custom:multiple-entity-row'
state_header: Main
toggle: true
state_color: true
style:
ha-entity-toggle:
$: |
ha-switch {
padding: 0px;
}
I have also another example this time multi entity is embeded into restriction-card
entities:
- type: 'custom:restriction-card'
action: double_tap
style:
multiple-entity-row$:
ha-entity-toggle$: |
ha-switch {
padding-top: 0;
}
.: |
state-badge {
line-height: 20px;
height: 30px;
}
.: |
ha-icon {margin-top: 5px}
before
after
Hi, can I change state color ?
- type: picture-elements
image: /local/images/computer/synology_ds1515.png
elements:
- type: state-icon
entity: sensor.nas_drive_1_status
style:
top: 30%
left: 25%
'--paper-item-icon-color': var(--my-icon-color)
- type: state-icon
entity: sensor.nas_drive_2_status
style:
top: 30%
left: 37%
I try this code but nothing:
style: |
ha-card {
--my-icon-color: {% if is_state('sensor.nas_drive_1_status', 'normal') %} green {% else %} red {% endif %}
}
You can just use state_filter for that without card_mod.
Thanks, but state_filter not set color.
What do you mean?
thanks all the same but i solved with this code using condition
- type: picture-elements
image: /local/images/computer/synology_ds1515.png
elements:
# Synology Drive 1 Status
- type: conditional
conditions:
- entity: sensor.nas_drive_1_status
state: "normal"
elements:
- type: state-icon
entity: sensor.nas_drive_1_status
style:
top: 30%
left: 25%
"--paper-item-icon-color": greenyellow
- type: conditional
conditions:
- entity: sensor.nas_drive_1_status
state_not: "normal"
elements:
- type: state-icon
entity: sensor.nas_drive_1_status
style:
top: 30%
left: 25%
"--paper-item-icon-color": red```First post here. Having some trouble applying custom color to my icons on the simple-thermostat card using card-mod. I’m using the raw editor and I know card mod is installed correctly because I’m able to change colors on an entities card just fine. Below is what I have for the thermostat. I used inspector in Edge/Chrome to see where the color is coming from and I’m thinking it might be because it is inherited from shadow-root? I just don’t know why. I have no theme applied. I’ve tried a lot of different ways of changing the color including rgb(), typing it, or using the #hex. No matter what I do the auto color will not change from springgreen. I’m sure it’s something simple I am missing. Can anyone suggest a fix? 
- type: 'custom:simple-thermostat'
entity: climate.thermostat
sensors:
- entity: sensor.thermostat_humidity
name: Humidity
control:
hvac:
heat:
name: false
icon: 'mdi:fire'
cool:
name: false
icon: 'mdi:snowflake-variant'
heat_cool:
name: false
icon: 'mdi:cached'
style: |
ha-card.mode-item.active.off {
background: red;
}
ha-card.mode-item.active.heat_cool {
background: #efbd07;
}
I am not sure if I am getting your point.
You mentioned this code as “not working”:
style:
element-card:
$:
another-thing:
$: |
I am not sure what do you mean by “element-card”, but this code works:
type: entities
title: 'Common: color icon'
style:
hui-text-entity-row:
$:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
entities:
- entity: sun.sun
- entity: sun.sun
Try setting --heat_cool-color with !important to ha-card instead. You might need to use mod-card.
I guess the old syntax was fixed, too.
That worked! Thank you!
Well, at least using one more syntax gives us more flexibility!
just a thought, but would it all be possible have the overview posts separated into a Community Guide of sorts. No discussions there, those are done here, simply all posts like @Ildar_Gabdullin did for the various cards and stylings.
Right now, we need to go back and forth in this thread to find these (or save them locally, as I did…). I think it would be very beneficial to all of us to have them on display permanently.
With the separated/dedicated community guide, checking how to style a badge, or a font-size for Entities card would be a breeze.
4 Likes
I would appreciate guidance for suppressing the display of the entire toggle button in an Entities card.
I’ve tried enough things to confirm I don’t have a good grasp of the core concepts (i.e. seems straighforward in theory but not in practice). For example, I tried this but it doesn’t work:
type: entities
entities:
- entity: input_boolean.test
show_header_toggle: false
style:
ha-entity-toggle:
$: |
ha-switch {
display: none !important;
}
The toggle button is within a shadow-root and, based on my limitation understanding, that implies more complexity in how to define the item I wish to act on.
1 Like
The doc says:
“I recommend using HACS to install and keep track of plugins.”
But this plug-in is nowhere to be found in HACS ?
Is a custom repository needed to install it ? If so, what’s the URL ?