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;
}
I think the GUI editor doesn’t like the "!include … ", too bad
correct, cant use include in UI.
I’ve been able to stumble my way through modifying the custom:mini-media-player card so far but I’m having trouble figuring out how to move these buttons up a little bit? and bonus if someone can help me put a little padding around them too that would be great!
Here’s my current card mod:
card_mod:
style: |
ha-card {
height: 200%;
position: relative;
max-width: 100%;
--mmp-unit: 1.5 !important;
--mdc-icon-size: 50px !important;
}
.entity__info__media {
font-size: 50px;
position: relative;
top: -5px;
}
.mmp-player__core {
height: 75px;
top: -75px;
}
.entity__info__name {
position: relative;
top: -20px;
}
.entity__icon {
position: relative;
top: -80px;
}
Bump, hoping someone has the right clue 
I bet it is sooooo easy… 