I am trying to make some changes to a Ring Camera lovelace card that incorporates other entities with color based statuses at the bottom of the preview. I’ve gotten everything to work except the colors, and I can’t figure it out for the life of me.
type: grid
square: false
columns: 1
cards:
- type: entities
title: Entryway
show_header_toggle: false
state_color: true
entities:
- entity: siren.downstairs_siren
- entity: sensor.aarlo_battery_level_newcastle_left_alley
name: Arlo Left Alleyway Camera Battery
- type: custom:mod-card
card:
type: picture-glance
title: Front Doorbell Live Camera
entities:
- entity: siren.downstairs_siren
- entity: binary_sensor.main_entrance_door
name: Front Door
- entity: lock.front_door_lock
- entity: sensor.front_door_lock_battery
card_mod:
style: |
:host {
--icon-primary-color:
{% if states('sensor.front_door_lock_battery')|int >= 50 %} green
{% elif states('sensor.front_door_lock_battery')|int >= 25 %} orange
{% else %} red
{% endif %} !important;
}
ha-icon {
--mdc-icon-size: 24px; # Adjust as necessary
color: var(--icon-primary-color) !important;
}
ha-icon {
color: var(--icon-primary-color) !important;
}
camera_image: camera.front_doorbell_live_camera
camera_view: live
show_state: true
show_name: false
aspect_ratio: 4x3
card_mod:
style: |
ha-card .entities {
justify-content: flex-end !important; # Align entities to the right
gap: 16px !important; # Increase spacing between icons
padding-right: 16px !important; # Add more padding to the right
}
I have a battery that I want to change colors along with a lock status. I’ve gone into the HTML and noticed that there is a CSS style override called --icon-primary-color that basically makes all the entities white and guessed that’s what I need to change to control the color for what I want to do. Just working on the battery color at the moment but no matter what I do, I can’t get a value written conditionally to the icon-primary-color. I can hard code a color to it, but it obviously changes all icon colors. Using the HACS version of card-mod along with the front-end installation as recommended by the card-mod documentation as well, and can get colors to change if I don’t do conditional formatting, which makes me think it’s what I’m stuck on.
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?
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.
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;
}
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!
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;
}
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?
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!
