Olivier1974
(Olivier Toussaint)
December 11, 2023, 7:44pm
15
I’m not giving up but as I’m not using that specific card, I can’t test my solutions myself.
So, I think you might need someone else to help you. At least I taught you that you can re-use theme colors and conditions …
EDIT: as the author of the card redirect to the entities option for the card, you can still have a look at the card-mod for entities.
Yeah for sure. I’ve posted over in the thread you linked me to and got my hand smacked for tagging someone that I’m sure knows whether it can be done or not.
We’ll eventually get there, I just doubt it will be on my own
Thank you very much though!! I’m like you, I think it’s doable, I just don’t know how at the moment.
Olivier1974
(Olivier Toussaint)
December 11, 2023, 7:47pm
17
Tagging someone is against the rules of the community.
I found that out the hard way.
#created not happy individuals
Olivier1974
(Olivier Toussaint)
December 11, 2023, 7:52pm
19
My last attempt, using card_mod at entity level
entities:
- entity: light.all_back_patio_lights
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
color: :
{% if is_state('light.all_back_patio_lights', 'off') %}
black
{% else %}
var(--primary-text-color)
{% endif %};
}
Pay attention to indentation
Let’s see what happens.
Below is what I used:
Looks like a “no go” again on my end.
- type: custom:minimalistic-area-card
title: Back Patio
area: back_patio
shadow: true
hide_unavailable: true
state_color: true
darken: true
tap_action:
action: navigate
navigation_path: /dashboard-automatic/back-patio
entities:
- entity: light.all_back_patio_lights
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
color: :
{% if is_state('light.all_back_patio_lights', 'off') %}
black
{% else %}
var(--primary-text-color)
{% endif %};
}
- entity: switch.back_patio_fountain
- entity: switch.back_patio_speaker_power
I found the below at this link:
Thanks, lldar.
I tried what you suggested (below), but that didn’t change the garage door from purple to red (as hoped).
type: entities
entities:
- entity: cover.main_garage
type: simple-entity
card_mod:
style: |
:host {
{% if states('cover.main_garage') != 'closed' %}
--state-cover-garage_door-open-color: "#ff0000"
{% endif %}
}
state_color: true
[Screenshot 2023-09-16 at 10.15.36 AM]
So worst case I could go that direction. Kind of weird but maybe it would work. (It looks like they are changing the whole themes color in the core settings)
you can change all state colors in your themes , no need for card_mod, and 100% reliable and supported by core, always preferable to any custom solution, did you have a look at that?
just create a default-adjusted theme, (not as you did I the card_mod) and only change the state-colors in that to your desire, and leave the rest. easy as can be
default_adjusted:
state-binary_sensor-garage-on-color: var(--alert-color)
would be all it takes for the garage_door binary
Olivier1974
(Olivier Toussaint)
December 11, 2023, 8:00pm
21
Creating your own theme is overkill IMO.
Yeah, I definitely wouldn’t do that but I think there is a way to change the one code (maybe css?) for the icon color. Still not really the route I would like to go.
Not correct for lights.
Assume we have lights in Entities:
type: entities
entities:
- light.hall_ceiling
- light.koridor_ceiling
- entity: light.kitchen_ceiling
card_mod:
style:
hui-generic-entity-row $:
state-badge $: |
ha-state-icon {
{% if is_state(config.entity,'off') %}
color: red !important;
{% endif %}
}
Repeat, this is an example for Entities.
As for minimalistic card particularly - this is up to Weston to find out…
Use Code Inspector to determine a path to your element.
P.s. Do not suggest to use this notation:
color:
{% if .... %}
black
{% else %}
red
{% endif %};
Use this:
{% if .... %}
color: black;
{% else %}
color: red;
{% endif %}
did you test:
style: |
:host {
--paper-item-icon-color:
{% set state = states(config.entity) %}
{% if state == 'off' %} black
{% else %} var(--primary-text-color)
{% endif %};
}
and adapt to your liking?
short version:
style: |
:host {
--paper-item-icon-color:
{% set state = states(config.entity) %}
{{'black' if state == 'off' else 'var(--primary-text-color)'}};
}
Is there a chance this is not supported by the minimalistic card?
Olivier1974
(Olivier Toussaint)
December 11, 2023, 8:05pm
26
My bad habbit of lazy computer scientist, the less I’m writing, the best
Open Minim.card.
If you see ON lights of different colors → lights following their state (on/of) and their temperature/color/… - like in other HA places.
I see. I’m sorry, this is the first time I’ve ever done this.
…the harder people (incl. you after some time) will understand the code))
Below is what I have.
type: vertical-stack
cards:
- states:
- arm_home
- arm_away
- arm_night
type: alarm-panel
entity: alarm_control_panel.alarmo
name: Alarm
- type: grid
square: true
columns: 3
cards:
- type: custom:minimalistic-area-card
title: Back Patio
area: back_patio
shadow: true
hide_unavailable: true
state_color: true
darken: true
tap_action:
action: navigate
navigation_path: /dashboard-automatic/back-patio
entities:
- entity: light.all_back_patio_lights
- entity: switch.back_patio_fountain
- entity: switch.back_patio_speaker_power
- type: custom:minimalistic-area-card
title: Back Porch
area: back_porch
shadow: true
hide_unavailable: true
state_color: true
darken_image: true
tap_action:
action: navigate
navigation_path: /dashboard-automatic/back-porch
entities:
- entity: light.all_back_porch_lights
- entity: switch.back_porch_fountain
- entity: switch.back_porch_speaker_power
The light icons do seem to follow their actual colors in the physical world.
Means - you may use same method. But you need to find out a path to this element.
Use Code inspector, right mouse click on any bulb - an see what element is selected on the right panel. You need to define a property on a MINIMAL “depth level” - i.e. right there it is needed.