???
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;
}
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.
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ā¦ 
did you completely check š¹ Card-mod - Add css styles to any lovelace card - #1188 by Ildar_Gabdullin
please post a single entities card with that entity and show what you tried to do
Hey,
can someone give me a short tip how to create the icon color depending on window state. (open/close/tilt)
I found several of topics regarind that issue, but honestly IĀ“m not well know in programming and nothing works.
What IĀ“ve already done:
create template.yaml to display the correct state of the window:
- name: "Fenster KĆ¼che EG"
state: >
{% if is_state('binary_sensor.fenster_kuche_eg_offen', 'off') and is_state('binary_sensor.fenster_kuche_eg_gekippt', 'off') %}
offen
{% elif is_state('binary_sensor.fenster_kuche_eg_offen', 'on') and is_state('binary_sensor.fenster_kuche_eg_gekippt', 'off') %}
geschlossen
{% else %}
gekippt
{% endif %}
icon: >
{% if is_state('binary_sensor.fenster_kuche_eg_offen', 'off') and is_state('binary_sensor.fenster_kuche_eg_gekippt', 'off') %}
mdi:window-open-variant
{% elif is_state('binary_sensor.fenster_kuche_eg_offen', 'on') and is_state('binary_sensor.fenster_kuche_eg_gekippt', 'off') %}
mdi:window-closed-variant
{% else %}
mdi:window-open-variant
{% endif %}
this works well.
what I wuold like to get:
Icon color red: open
Icon color orange: tilt
Icon color green: closed (Hide this state in the Dash Overview)
May I add this in the template.yaml or in the tile card config?
Thanks for helping me.
for anyone that cares the answer to this its
.mmp-player__adds {
position: relative;
top: -70px; # Move the container of media control and volume buttons up
}
sure, go to the top post, check the link at the bottom, and look for entities card_mod, that is to say, if yuio want this entity in an entities card.
other than that, you should provide some info for us to be able to help you
Hey, Iām stuck on changing the text size of only the first line in the Digital-Clock card from hacs, I can make both lines of text bigger but I only want to make the first line (time) bigger
code:
type: custom:digital-clock
timeFormat: h:mm a
card_mod:
style:
digital-clock$:
$: |
span {
font-weight: 1000;
#color: #B6FC00;
font-size: 25px !important;
}
this is the code that will make both lines larger
type: custom:digital-clock
timeFormat: h:mm a
card_mod:
style: |
ha-card {
font-weight: 1000;
#color: #B6FC00;
font-size: 25px !important;
}
any help would be great. thank you
type: custom:digital-clock
timeFormat: h:mm a
card_mod:
style: |
.first-line {
font-weight: 1000;
#color: #B6FC00;
font-size: 25px !important;
}
Yes of course. And I posted everything already at š¹ Card-mod - Add css styles to any lovelace card - #6750 by e-raser.
But I found the root cause:
state_color has been true which overrides every manually applied CSSā¦ 
false fixed it immediately.
This is working now (state-badge applies):
card_mod:
style:
hui-generic-entity-row:
$: |
.text-content:not(.info) {
display: none;
}
.info.pointer {
#color: red;
font-size: 18px;
}
state-badge {
color: red;
}
Thank you! that did the trick.
(Un)popular opinion: this thread will soon be flooded by people complaining about badge and/or badge-card. Just wait for next Wednesday, August 7th