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
why? has nothing to do with card-mod perse?
btw, as a heads up: we can keep using the built-in legacy badge (and also keep using the custom:badge-card to put them anywhere in the View) doing
badges:
- type: custom:hui-state-badge-element
entity: light.alarm
tap_action:
action: toggle
hold_action:
action: more-info
not an actual custom resource, itās just the way to call that core element still existing in the Frontend
current beta testing 2024.8.0b1
ofc, styling the new badge is an entirely different thingā¦
1 Like
Yeah, thatās what Iām talking about 
People who will want to customize the new badges, trying to use the (soon to be) old card-mod tutorial that can be found here.
EDIT: you can use custom:hui-state-badge-element for legacy look but the good olā fashion card-mod syntax for badge like the example bellow will not work without a bit of research
card_mod:
style: |
:host {
{% if is_state('input_boolean.stop_ipad', 'off') %}
--label-badge-background-color: rgba(0,255,0,0.1);
{% else %}
--label-badge-background-color: rgba(255,0,0,0.1);
{% endif %}
}
EDIT2: And, yes, Iām reasearching right now for both legacy look and new look, that why I donāt have a working code (yet)
1 Like
Does anyone know how to change the color of the progress bar?
card_mod:
style: |
ha-card {
# --ha-card-background: grey;
opacity: 70% ;
color: var(--primary-color);
}
This has probably already been asked a 1000 times, but I wasnāt able to get it to work with the posts I found.
Basically, I have this card (see above), I now I just like to change the icon for binary_sensor.gate_door_position_sensor, when the gate is āopenā, show icon AA, when the gate is āclosedā, show icon BB.
Thanks!
type: custom:mushroom-entity-card
fill_container: true
layout: vertical
name: Tor
secondary_info: none
entity: binary_sensor.gate_door_position_sensor
icon: ''
tap_action:
action: call-service
service: automation.trigger
target:
entity_id: automation.unifi_access_api_tor_offnen
data:
skip_condition: true
primary_info: none
card_mod:
style: |
:host {
padding-top: 15px!important;
}
@media (prefers-color-scheme: dark) {
ha-card:hover {
background-color: #222222 !important;
}
ha-card {
transition-duration: .0s !important;
}
}
@media (prefers-color-scheme: light) {
ha-card:hover {
background-color: #F6F6F6 !important;
}
ha-card {
transition-duration: .0s !important;
}
}
right, I hadnāt even started doing that ;-0
did find these variables to be functional in themes:
#badge
label-badge-background-color: brown
label-badge-text-color: green
ha-label-badge-font-size: 15px
label-badge-red: '#03a9f4'
ha-label-badge-size: 30px
ha-label-badge-border-radius: 0
#label below badge
ha-label-badge-label-color: red
ha-label-badge-label-background-color: red
#title below badge/label
ha-label-badge-title-font-size: 8px
ha-label-badge-title-font-weight: 400
ha-label-badge-title-width: 50px
dont mind the settings I set, its just for experiment. And, ofc, not yet dynamic, or s complete as I managed before
btw this is the source frontend/src/components/ha-label-badge.ts at 62d8434596535625d743efc532ebf3a34f4a7144 Ā· home-assistant/frontend Ā· GitHub
so the badge label doesnt have a border-radius variable of its own, which is a bit a pity, and reason we need to travers the Dom for thatā¦ Havent found a way to set different colors on the borders either. we could do that for the badge and the label individually before.
Badges may change its structure within next versions, look at the Tile card which had some changes.
Yes that is indeed a risk to be considered.
Still trying to work my way through the new Tile card features changes to get the border-radius backā¦
Team simply says thatās unsupported undocumented so weāre on our own thereā¦
Find that somewhat user unfriendly myself (after all why take the trouble to announce a warning on the changes, but leave the changes themselves unmentioned) but will probably work it out anyways 
Yes, it is changing in this 2024.8.0 release.
For who is using
card_mod:
style:
hui-card-features$:
There will be a new level to add, right after hui-card-features
card_mod:
style:
hui-card-features$:
hui-card-feature$:
1 Like
yes, that is itā¦
How could I have missed that, been looking at those dom paths for 2 days nowā¦ aargh, and such a useful new path it is
you really made my day here, thank you very much
I will change immediately the overview of features mods I posted above
would you happen to know if we could use those vriables directly:
# Tile features generic setting
feature-border-radius: 0
control-slider-border-radius: 0
control-button-border-radius: 0
control-select-border-radius: 0
control-select-button-border-radius: 0
control-select-menu-border-radius: 0
they are used in the cards, but I cant touch them from within my main themes, which would be just as nice as the state-colors.
Should be something like this I guess (not tested):
card_mod:
style:
hui-card-features $:
hui-card-feature $:
hui-cover-position-card-feature $: |
ha-control-slider {
--control-slider-border-radius: 10px !important;
}
The same applies for the other hui-xxx-card-feature (I hope)
EDIT: to use theme variable, it is something like
--control-slider-border-radius: var(name_of_variable_from_theme) !important;
yes, and I tried both:
first of all, just setting those variables in a theme, which would then be picked up by the cards, as their default values for these variables are the ones I posted above, var(--feature-border-radius). That doesnāt work.
Then I tried the mods as you post above:
--control-slider-border-radius: var(--control-slider-border-radius)
or with the var(--feature-border-radius) . Doesnt work either.
So, for now, we can only use either a true px number there, or the variabel we Can use from themes:
style:
hui-card-features $:
hui-card-feature $:
hui-cover-open-close-card-feature $:
ha-control-button$: |
.button {
--control-button-border-radius: var(--ha-card-border-radius);
}
hui-cover-position-card-feature $:
ha-control-slider$: |
.container {
--control-slider-border-radius: var(--ha-card-border-radius);
}
.slider .slider-track-bar {
border-radius: var(--ha-card-border-radius) !important;
}
.slider .slider-track-bar::after {
border-radius: var(--ha-card-border-radius) !important;
}
Still strikes me as odd we cant override that system variable, and maybe the future will allow us to do so.