is what I saw, but it comes and goes… they’re stable once again 
Could it be a problem of browser?
Try using Chrome, clear cache.
Try to restart browser.
Try to restart HA.
Also (may be I will say a silly thing) try this:
:host {
{% set zones = states.zone|map(attribute='name')|list %}
{% if is_state(config.entity,'home') %}
--label-badge-red: green;
{% elif 'bij' in states(config.entity) %}
--label-badge-red: gold;
{% elif states(config.entity) in ['moving','driving'] or
states(config.entity) in zones %}
--label-badge-red: mediumslateblue;
{% else %};
--label-badge-red: dimgrey;
{% endif %}
}
The big picture is this:
Which means changing the layout of multiple cards, which of course means changing the CSS of multiple elements.
In this specific example I would like to edit the CSS style of the brightness slider of an entity. Both editing the style of the slider “knob” / drag button and the slider “rail” / path.
Individually, both of the codes work. So:
card_mod:
style:
hui-generic-entity-row:
ha-slider:
$:
paper-progress:
$: |
#progressContainer {
background: red;
}
This works and
card_mod:
style:
hui-generic-entity-row:
ha-slider:
$: |
.slider-knob-inner {
background-color: none;
}
This works. And both of them edit a different element. The knob and the rail. Only I have no idea how to combine the two in one card_mod: query so I can edit both elements of one entity. For context, this would be the full code:
type: entities
title: Lampen
entities:
- type: 'custom:slider-entity-row'
name: Tafellamp
toggle: true
hide_state: false
icon: 'mdi:table-furniture'
entity: light.tafellamp_groep
attribute: brightness
card_mod:
style:
hui-generic-entity-row:
ha-slider:
$:
paper-progress:
$: |
#progressContainer {
background: red;
}
hui-generic-entity-row:
ha-slider:
$: |
.slider-knob-inner {
background-color: none;
}
- type: 'custom:slider-entity-row'
name: Plafondlamp
toggle: true
hide_state: false
icon: 'mdi:ceiling-light'
entity: light.plafondlamp_groep
attribute: brightness
2 Likes
card_mod:
style:
hui-generic-entity-row:
ha-slider:
$:
.: |
.slider-knob-inner {
background-color: none;
}
paper-progress:
$: |
#progressContainer {
background: red;
}
Should work.
1 Like
You did not explain what you want to achieve.
You only wrote:
First part of your code - if is it for changing a color of slider’s “rail”, then the code changing a color of the right part only:
Second part - is it for changing a color of knob? Or what?
Then why it is
background-color: none; ? Shouldn’t it be “transparent”?
They did explain.
Combining = OK, but the result is unclear…
I see no changes for knob.
Yes! That’s what I wanted. Thanks a lot Kendell, this works perfectly.
@Ildar_Gabdullin, thanks as well for your time. The problem I had was indeed with combining the two. The result I wanted didn’t really matter, I used placeholder code to simplify the problem 
OK, I did not get your point.
BTW, here you can find a shorter solution:
type: entities
entities:
- entity: input_number.battery_level_check
name: Сolored slider
style:
hui-generic-entity-row: |
.flex ha-slider {
--paper-slider-active-color: orange;
--paper-slider-knob-color: green;
--paper-slider-container-color: cyan;
}
thanks, and Ive tried it all, but nothing helps. It seems to be narrowed down to the
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span{
color:
{% if is_state(config.entity,'home') %} gold;
{% else %} black;
{% endif %}
}
bit, because if I take this out, and set it to black fixed, nothing is flickering. If I take out the :host section, coloring the label badge and circle, and keep the span template, it keeps flickering.
How could we change this span template to make it stop…
Changed my code a little (made similar to yours).
Copy/paste this code please - as is.
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
color:
{% if is_state(config.entity,'home') %} gold;
{% else %} black;
{% endif %}
}
.: |
:host {
--label-badge-red:
{% set zones = states.zone|map(attribute='name')|list %}
{% if is_state(config.entity,'home') %} green;
{% elif 'bij' in states(config.entity) %} gold;
{% elif states(config.entity) in ['moving','driving'] or
states(config.entity) in zones %} mediumslateblue
{% else %} dimgrey;
{% endif %}
}
I checked the code in Chrome & FF.
while:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
color: black
}
.: |
:host {
--label-badge-red:
{% set zones = states.zone|map(attribute='name')|list %}
{% if is_state(config.entity,'home') %} green;
{% elif 'bij' in states(config.entity) %} gold;
{% elif states(config.entity) in ['moving','driving'] or
states(config.entity) in zones %} mediumslateblue
{% else %} dimgrey;
{% endif %}
}
is fixed.
Check this - the shortest version:
style: |
:host {
--ha-label-badge-label-color: black;
{% set zones = states.zone|map(attribute='name')|list %}
{% if is_state(config.entity,'home') %}
--label-badge-red: green;
--ha-label-badge-label-color: gold;
{% elif 'мки' in states(config.entity) %}
--label-badge-red: gold;
{% elif states(config.entity) in ['moving','driving'] or
states(config.entity) in zones %}
--label-badge-red: mediumslateblue
{% else %}
--label-badge-red: dimgrey;
{% endif %}
}
Seems I found a new way to style “span” - --ha-label-badge-label-color.
really sorry, but I must have expressed myself unclearly:
this is not working (it flickers):
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
color:
{% if is_state(config.entity,'home') %} gold;
{% else %} black;
{% endif %}
}
the other template works fine
I got your point. That is why I proposed another way to style “span”
oops. sorry, I see it now, you’ve interwoven the 2.
And yes, that seems to work much better!
I can still see the ‘default’ colors upon loading of the page, but then it quickly changes and remains styled. Let’s hope this is here to stay #fingerscrossed
Would be nice if we (I) could understand why this works, and the other option doesnt…
thank you very much.
A bit later I will review our old badge styling (which we discussed 1-2 months ago) with the new "--ha-label-badge-label-color" method.
Regarding your flickering - I myself facing some problems on my setup like “loosing a style” - sometimes a style is not applied, it works after refreshing a page. Cannot explain it((.
Card-mod v3.0 is not working
The following is not working for me:
type: markdown
content: '## Hello'
card_mod:
style: |
ha-card {
background: transparent;
text-align: center;
}
But the syntax from prior to card-mod v3.0 still works:
type: markdown
content: '## Hello'
style: |
ha-card {
background: transparent;
text-align: center;
}
I uninstalled and re-installed card-mod in HACS, and it still only responds to pre- v3.0 syntax. I’m at a loss.
Searching for days but can’t find a solution. Is it possible to change the icon on a state?
card:
type: horizontal-stack
cards:
- type: entity
entity: media_player.samsung_tv_remote
icon: 'mdi:monitor'
style: |
ha-card {
--state-icon-color: {% if is_state('media_player.samsung_tv_remote', 'on') %} #50A14F {% else %} #5591c2 {% endif %};
}
name: TV living```Cannot check "background" but "text-align" works:
type: vertical-stack
title: >-
card-mod 2 vs card-mod 3
cards:
- type: markdown
content: |-
text text text text text text
text text text text text text
card_mod:
style: |
ha-card {
text-align: center;
}
- type: markdown
content: <h1>Example</h1><h2>Hello</h2><h3>World</h3>
style: |
ha-card {
text-align: center;
}
