Just in case: see if you have card-mod properly installed, purge local frontend cache.
Btw, for me the iOS companion app even on a “not ancient yet” iPhone 12 is rather buggy & glitchy, so I do not consider it as a reliable client.
Hey, can you briefly show this with an example? I find the “include” solution very interesting.
Perhaps just briefly what the include file looks like, how you use it and where it is stored?
Thanks in advance
Ive already shown above where I store those and what they contain.
These are injected simply like
card_mod: !include /config/dashboard/card_mods/temp_color.yaml
On an element where you would normally use the full card_mod
2 Likes
How to hide the whole row?
Like it is done for a regular hui-generic-entity-row:
card_mod:
style: |
hui-generic-entity-row {
{% if state_attr(config.entity,'price') == None -%}
display: none;
{% else %}
{% endif %}
}
?
Using this shows empty spaces but the whole row is still visible:
card_mod:
style:
div#wrapper:
state-badge $: |
ha-state-icon {
{% if state_attr(config.entity,'departures')[0].price == None -%}
display: none;
{% else %}
{% endif %}
}
.: |
.state {
{% if state_attr(config.entity,'departures')[0].price == None -%}
display: none;
{% else %}
{% endif %}
}
.info {
{% if state_attr(config.entity,'departures')[0].price == None -%}
display: none;
{% else %}
{% endif %}
}
.info .secondary {
{% if state_attr(config.entity,'departures')[0].price == None -%}
display: none;
{% else %}
{% endif %}
}
Hey Guys,
is there a way to remove the background from the icon? (Shape)
type: tile
entity: sensor.system_monitor_processor_use
card_mod:
style:
ha-tile-icon $: |
.shape::before {
opacity: 0 !important;
}
2 Likes
this Is a challenge…
- type: conditional
conditions:
- entity: sensor.radio_players_playing
state: '0'
- entity: sensor.activated_media_players #group.media_players_active
state_not: '0'
row:
entity: script.play_radio
action_name: Speel
# card_mod:
# style: |
# hui-generic-entity-row:
# $: |
# state-badge {
# color: var(--ok-color);
# }
- type: conditional
conditions:
- entity: sensor.radio_players_playing
condition: numeric_state
above: 0
row:
entity: script.stop_radio
action_name: Stop
# card_mod:
# style: |
# :host {
# --card-mod-icon-color: var(--alert-color);
# }
using these stylings both work when the entity is displayed unconditionally. But, in the above conditional setup, the colors are only applied briefly when clicking either of the 2 scripts, and then, when the condition changes, the icons remain colorless.
Ive only been able to set those reliably now using custom-ui which I was trying to minimize pr do away with…
homeassistant:
customize:
script.play_radio:
icon_color: var(--ok-color)
script.stop_radio:
icon_color: var(--alert-color)
Thank you very much.
Do you know a Tutorial or step by step Guide to find the right variables?
I think conditional entity rows add a Shadow DOM layer above hui-generic-entity-row, which will vary according to the type of entity.
If I’m right, you should be able to see this with the DOM inspector.
1 Like
If you mean standard HA theme variables - check here.
If you are looking for a good CSS tutorial - check here.
Do you mean a conditional row inside Entities row?
They should be styled on a higher level.
As usual, 1st post → … → conditional rows
right, I did try this 🔹 Card-mod - Add css styles to any lovelace card - #1845 by Ildar_Gabdullin
- type: conditional
conditions:
- entity: sensor.radio_players_playing
state: '0'
- entity: sensor.activated_media_players #group.media_players_active
state_not: '0'
row:
entity: script.play_radio
action_name: Speel
card_mod:
style:
hui-simple-entity-row$: |
hui-generic-entity-row {
text-indent: 45px;
color: red;
}
but that does not get applied either. It’s a direct c&p accept I added card_mod:
I mean a step by step to troubleshoot via Browser Developer Mode 
???
type: entities
entities:
- input_boolean.test_boolean
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
row:
entity: script.test_script
action_name: xxxxx
card_mod:
style:
hui-script-entity-row $: |
hui-generic-entity-row {
text-indent: 45px;
color: red;
}
1 Like
have no idea is there any ready tutorial…
arghh, missed that script-entity-row… my bad:
card_mod:
style:
hui-script-entity-row $:
hui-generic-entity-row:
$: |
state-badge {
color: var(--ok-color);
}
this now works and colorizes the icon
Hi all,
I’ve spent hours trying to change the height of the modes buttons (and will do the same for fan speed buttons).
Value should be –control-select-thickness: 100px; (changed from 40px)
This is what I’ve tried with card-mod:
card_mod:
style:
hui-card-features $ hui-climate-fan-modes-card-feature $: |
ha-control-select {--control-select-thickness: 100px; }
Where do I go wrong about this??
you have different - “hvac” on s screenshot & “fan” in a code
yes, that is a terrible nuisance, having to create those mods for all individual domains cards…
I had that figured out here How to set border-radius on Tile card Features
@TheStigh maybe it helps you somewhat
edit
my bad, sorry. only noticed the card-features… not that you dont have the Tile card there… sorry
Nailed it (!!!), thanks to a post from @arganto 🔹 Card-mod - Add css styles to any lovelace card - #6493 by arganto
Damn, this was a tricky one…
Solution:
card_mod:
style:
hui-card-features:
$:
hui-climate-hvac-modes-card-feature:
$:
ha-control-select:
$: >
:host {
--control-select-thickness: 100px !important;
}
hui-climate-fan-modes-card-feature:
$:
ha-control-select:
$: >
:host {
--control-select-thickness: 100px !important;
}