What for this line is?
1 Like
I just used his code, and updated the card_mod part. and reposted. 
1 Like
Thank you!!! I would have never figured this part out. So there are multiple entities that I’d like to color code. Could I just duplicate the card-mod code for each entity I want to color and use the ha-svg-icon template code you wrote?
just duplicate for each entity remembering to change which child your targeting
div:nth-child(1):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
..........
div:nth-child(2):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
..........
1 Like
Thanks. This worked, sort of. I was able to get the color working for two icons on the card, but when I try to add it for a 3rd icon, the color seems to randomly apply to another icon I’m not trying to reference. See below (different card)
type: grid
square: false
columns: 1
cards:
- type: entities
title: Back Yard
show_header_toggle: false
state_color: true
entities:
- entity: sensor.aarlo_battery_level_newcastle_right_side
name: Arlo Right Side Fence Camera Battery
- type: custom:mod-card
card:
type: picture-glance
title: Back Yard Live Camera
camera_image: camera.back_yard_live_camera
camera_view: live
entities:
- entity: binary_sensor.backyard_entry_door
name: Rear Entry Door
- entity: lock.back_door_lock
name: Back Door Lock
- entity: sensor.back_door_lock_battery
name: Back Door Lock Battery
- entity: light.back_yard_light
name: Backyard Light
- entity: switch.back_yard_siren
name: Backyard Siren
card_mod:
style:
.box:
display: flex;
flex-direction: column;
align-items: flex-end;
position: absolute;
bottom: 10px;
right: 10px;
gap: 10px;
.box div:
display: flex;
flex-direction: column;
align-items: center;
.box div span:
font-size: 12px; /* Small font size for descriptions */
color: white; /* Adjust color as needed */
div:nth-child(1):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('binary_sensor.backyard_entry_door', 'off') %}
color: green !important;
{% else %}
color: red !important;
{% endif %}
}
div:nth-child(2) ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('lock.back_door_lock', 'locked') %}
color: green !important;
{% else %}
color: red !important;
{% endif %}
}
div:nth-child(3) ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% set battery = states('sensor.back_door_lock_battery') | int %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
card_mod:
style: |
ha-card .entities {
justify-content: flex-end !important; /* Align entities to the right */
gap: 10px !important; /* Increase spacing between icons */
padding-right: 50px !important; /* Add more padding to the right */
}
For example, if I pick (1) for the child, it colors the light instead of the backyard entry door. And no matter what child I pick, it never colors the back door lock battery. I’m also using some code here to put some text underneath the icons and space them out a bit but nothing is happening. Any ideas on either of these issues? Thanks again for your help getting me this far.
You are not separating the box divisions
for example…
card_mod:
style:
.box div:nth-child(3):
div:nth-child(1):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
color: green;
}
div:nth-child(2):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
div:nth-child(3):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
color: yellow;
}
div:nth-child(4):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
color: blue;
}
Check out this specific post in @Ildar_Gabdullin guide…
2 Likes
Thanks to @Frosty and @LiQuid_cOOled for the tips. Got it working with the .box divisions. Thank you both so much. I hate to bother you, but I have one more issue…
I read through that link that was sent with all of the tips and tricks on the css styles, but I couldn’t find any place where it showed how to correct icon spacing. Also, tried adding the state text under the icon using the examples I found in the link, to no avail. I am using the experimental “sections” view, could that have anything to do with the state text not showing up under the icons? Oddly enough, I have 2 other cards where the state text is there, but somehow not on one.
type: grid
square: false
columns: 1
cards:
- type: entities
title: Back Yard
show_header_toggle: false
state_color: true
entities:
- entity: sensor.aarlo_battery_level_newcastle_right_side
name: Arlo Right Side Fence Camera Battery
- type: custom:mod-card
card:
type: picture-glance
title: Back Yard Live Camera
camera_image: camera.back_yard_live_camera
camera_view: live
entities:
- entity: binary_sensor.backyard_entry_door
name: Rear Entry Door
show state: true
- entity: lock.back_door_lock
name: Back Door Lock
show state: true
- entity: sensor.back_door_lock_battery
name: Back Door Lock Battery
show state: true
- entity: light.back_yard_light
name: Backyard Light
- entity: switch.back_yard_siren
name: Backyard Siren
card_mod:
style:
.box div:nth-child(2):
div:nth-child(1):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('binary_sensor.backyard_entry_door', 'off') %}
color: green !important;
{% else %}
color: red !important;
{% endif %}
}
div:nth-child(2):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('lock.back_door_lock', 'locked') %}
color: green !important;
{% else %}
color: red !important;
{% endif %}
}
div:nth-child(3):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% set battery = states('sensor.back_door_lock_battery') | int %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
card_mod:
style: |
ha-card {
--mdc-icon-size: 23px;
}
.box .row: |
.wrapper .state {
color: white;
}
It’s show_state: true not show state: true You are missing the underscore.
1 Like
Thank you. Lots of little issues that just seem to evade me sometimes 
Appreciate the help! As soon as I get this icon spacing part figured out, my cards will finally be ready. Thanks again for all of your help!
Can you provide more detail on the icon spacing? Maybe a picture and the code. I should be able to assist.
1 Like
If you can see the photo, I’d like to move the siren and light icons on the right side closer to the battery %, because they’re cut off on the HA mobile app. I’d also like to reduce the size, space and position of the “Back Yard Live Camera” text as it’s taking up too much space. It would also be cool if I could put the entity name above the colored icons and control their size so it lines up with the icons as well.
Code here:
type: grid
square: false
columns: 1
cards:
- type: entities
title: Back Yard
show_header_toggle: false
state_color: true
entities:
- entity: sensor.aarlo_battery_level_newcastle_right_side
name: Arlo Right Side Fence Camera Battery
- type: custom:mod-card
card:
type: picture-glance
title: Back Yard Live Camera
camera_image: camera.back_yard_live_camera
camera_view: live
entities:
- entity: binary_sensor.backyard_entry_door
name: Rear Entry Door
show_state: true
- entity: lock.back_door_lock
name: Back Door Lock
show_state: true
- entity: sensor.back_door_lock_battery
name: Back Door Lock Battery
show_state: true
- entity: light.back_yard_light
name: Backyard Light
show_state: true
- entity: switch.back_yard_siren
name: Backyard Siren
show_state: true
card_mod:
style:
.box div:nth-child(2):
div:nth-child(1):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('binary_sensor.backyard_entry_door', 'off') %}
color: green !important;
{% else %}
color: red !important;
{% endif %}
}
div:nth-child(2):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('lock.back_door_lock', 'locked') %}
color: green !important;
{% else %}
color: red !important;
{% endif %}
}
div:nth-child(3):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% set battery = states('sensor.back_door_lock_battery') | int %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
card_mod:
style: |
ha-card {
--mdc-icon-size: 23px;
}
.box .row: |
.wrapper .state {
color: white;
}
We will have to incorporate the following code with yours to get both the icon and state to shift
.box div:nth-child(2) div:nth-child(4) {
margin-left: -10px; }
div:nth-child(5) {
margin-left: -10px; }
Where do I put that code? Into the style section at the bottom, or part of the div:nth-child code above it?
I’ll have it in a few. Rewriting the card-mod code.
1 Like
Test this
card_mod:
style: |
.box div:nth-child(2) div:nth-child(4) {
margin-left: -10px; }
.box div:nth-child(2) div:nth-child(5) {
margin-left: -10px; }
.box div:nth-child(2) div:nth-of-type(1) ha-icon-button ha-state-icon {
color: {{ 'red' if is_state('binary_sensor.backyard_entry_door', 'off') else 'green' }};}
.box div:nth-child(2) div:nth-of-type(2) ha-icon-button ha-state-icon {
color: {{ 'green' if is_state('lock.back_door_lock', 'locked') else 'red' }};}
.box div:nth-child(2) div:nth-of-type(3) ha-icon-button ha-state-icon {
{% set battery = states('sensor.back_door_lock_battery') | int(0) %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
Tried it and it didn’t do anything. One thing I noticed is that the code text outlined in blue when I got it going. Tried changing the number of pixels it shifted and no change. Do I need to remove or change any of the code above the style section?
card_mod:
style: |
ha-card {
--mdc-icon-size: 23px;
}
.box div:nth-child(2) div:nth-child(4) {
margin-left: -20px; }
.box div:nth-child(2) div:nth-child(5) {
margin-left: -20px; }
.box div:nth-child(2) div:nth-of-type(1) ha-icon-button ha-state-icon {
color: {{ 'red' if is_state('binary_sensor.backyard_entry_door', 'off') else 'green' }};}
.box div:nth-child(2) div:nth-of-type(2) ha-icon-button ha-state-icon {
color: {{ 'green' if is_state('lock.back_door_lock', 'locked') else 'red' }};}
.box div:nth-child(2) div:nth-of-type(3) ha-icon-button ha-state-icon {
{% set battery = states('sensor.back_door_lock_battery') | int(0) %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
Place the ha-card code at the bottom
card_mod:
style: >
.box div:nth-child(2) div:nth-child(4) {
margin-left: -10px; }
.box div:nth-child(2) div:nth-child(5) {
margin-left: -10px; }
.box div:nth-child(2) div:nth-of-type(1) ha-icon-button ha-state-icon
{ color: {{ 'red' if is_state('binary_sensor.backyard_entry_door',
'off') else 'green' }};}
.box div:nth-child(2) div:nth-of-type(2) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('lock.back_door_lock', 'locked') else
'red' }};}
.box div:nth-child(2) div:nth-of-type(3) ha-icon-button ha-state-icon
{ {% set battery = states('sensor.back_door_lock_battery') | int(0) %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
ha-card {
--mdc-icon-size: 23px !important;
}
I have tested the code using my own entities/icons and it works
I must be doing something wrong then. Moved it above the ha-card code, and I don’t see any change even when I set the pixel value really high or low.
type: grid
square: false
columns: 1
cards:
- type: entities
title: Back Yard
show_header_toggle: false
state_color: true
entities:
- entity: sensor.aarlo_battery_level_newcastle_right_side
name: Arlo Right Side Fence Camera Battery
- type: custom:mod-card
card:
type: picture-glance
title: Back Yard Live Camera
camera_image: camera.back_yard_live_camera
camera_view: live
entities:
- entity: binary_sensor.backyard_entry_door
name: Rear Entry Door
show_state: true
- entity: lock.back_door_lock
name: Back Door Lock
show_state: true
- entity: sensor.back_door_lock_battery
name: Back Door Lock Battery
show_state: true
- entity: light.back_yard_light
name: Backyard Light
show_state: true
- entity: switch.back_yard_siren
name: Backyard Siren
show_state: true
card_mod:
style:
.box div:nth-child(2):
div:nth-child(1):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('binary_sensor.backyard_entry_door', 'off') %}
color: green !important;
{% else %}
color: red !important;
{% endif %}
}
div:nth-child(2):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('lock.back_door_lock', 'locked') %}
color: green !important;
{% else %}
color: red !important;
{% endif %}
}
div:nth-child(3):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% set battery = states('sensor.back_door_lock_battery') | int %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
card_mod:
style: >
.box div:nth-child(2) div:nth-child(4) {
margin-left: -30px; }
.box div:nth-child(2) div:nth-child(5) {
margin-left: -30px; }
.box div:nth-child(2) div:nth-of-type(1) ha-icon-button ha-state-icon
{ color: {{ 'red' if is_state('binary_sensor.backyard_entry_door',
'off') else 'green' }};}
.box div:nth-child(2) div:nth-of-type(2) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('lock.back_door_lock', 'locked') else
'red' }};}
.box div:nth-child(2) div:nth-of-type(3) ha-icon-button ha-state-icon
{ {% set battery = states('sensor.back_door_lock_battery') | int(0) %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
ha-card {
--mdc-icon-size: 23px !important;
}
Current SS.
Edit after post: I think I need to overwrite my old code.
Yes you need to overwrite the old code
type: grid
square: false
columns: 1
cards:
- type: entities
title: Back Yard
show_header_toggle: false
state_color: true
entities:
- entity: sensor.aarlo_battery_level_newcastle_right_side
name: Arlo Right Side Fence Camera Battery
- type: custom:mod-card
card:
type: picture-glance
title: Back Yard Live Camera
camera_image: camera.back_yard_live_camera
camera_view: live
entities:
- entity: binary_sensor.backyard_entry_door
name: Rear Entry Door
show_state: true
- entity: lock.back_door_lock
name: Back Door Lock
show_state: true
- entity: sensor.back_door_lock_battery
name: Back Door Lock Battery
show_state: true
- entity: light.back_yard_light
name: Backyard Light
show_state: true
- entity: switch.back_yard_siren
name: Backyard Siren
show_state: true
card_mod:
style: |
.box div:nth-child(2) div:nth-child(4) {
margin-left: -30px; }
.box div:nth-child(2) div:nth-child(5) {
margin-left: -30px; }
.box div:nth-child(2) div:nth-of-type(1) ha-icon-button ha-state-icon
{ color: {{ 'red' if is_state('binary_sensor.backyard_entry_door',
'off') else 'green' }};}
.box div:nth-child(2) div:nth-of-type(2) ha-icon-button ha-state-icon
{ color: {{ 'green' if is_state('lock.back_door_lock', 'locked') else
'red' }};}
.box div:nth-child(2) div:nth-of-type(3) ha-icon-button ha-state-icon
{ {% set battery = states('sensor.back_door_lock_battery') | int(0) %}
{% if battery < 35 %}
color: red !important;
{% elif battery < 50 %}
color: orange !important;
{% elif battery < 70 %}
color: yellow !important;
{% else %}
color: green !important;
{% endif %}
}
ha-card {
--mdc-icon-size: 33px !important;
}
1 Like