You’re already inside the shadow-root. Just do
style: |
span.title {
put-your-styling: here !important;
}
1 Like
So I’m a little stuck. I’m using the gauge card for some entities with severities enabled (red-yellow-green), but would also like to color the gauge red when the value exceeds the maximum, so the style becomes red-yellow-green-red.
The style code looks like this:
<ha-gauge style="--gauge-color:var(--label-badge-green);">
<style> (inside #shadowroot)
:host {
position: relative;
}
.dial {
fill: none;
stroke: var(--primary-background-color);
stroke-width: 15;
}
.value {
fill: none;
stroke-width: 15;
stroke: var(--gauge-color);
transform-origin: 50% 100%;
transition: all 1s ease 0s;
}
.gauge {
display: block;
}
.text {
position: absolute;
max-height: 40%;
max-width: 55%;
left: 50%;
bottom: -6%;
transform: translate(-50%, 0%);
}
.value-text {
font-size: 50px;
fill: var(--primary-text-color);
text-anchor: middle;
}
</style>
</ha-gauge>
I’ve used the following card code:
style:
ha-gauge:
$: |
.value {
stroke: {% if states(config.entity)|int > 2000 %} var(--label-badge-red) {% endif %};
}
This works fine on Firefox. <ha-gauge style="--gauge-color:var(--label-badge-green);"> doesn’t get changed, but the bar turns red due to the stroke fill. However, on Chrome and mobile devices, this does not work, so I assume I need to get <ha-gauge style="--gauge-color:var(--label-badge-green);"> styled anyway. I’ve tried various options to no avail, so I’m reaching out for help.
How would I accomplish this feat cross-browser?
Has anyone figured out how to mod the new calendar card (which is part of 115)? I want the date text to be smaller and color the view buttons. I can’t get it to work unfortunately.
The span.title part made the trick work. In my old config I used .title only
What’s the idea / thought of the .span part?
style: |
span.title {
put-your-styling: here !important;
}
Probably that if you’re more specific, then you can override styles more. I don’t remember exactly what I was thinking when I wrote this post…
Thanks,
I want to set the background-color conditionally.
But this does not work? Do you have any idea?
style:
.: |
ha-card > div.box {
background-color: {% if is_state('camera.entrance', 'recording') %} rgba(255, 0, 0, 0.6) {% else %} rgba(0, 0, 0, 0.6) {% endif %}
justify-content: center;
}
ha-card > div.box div ha-icon.state-on {
fill: var(--paper-item-icon-active-color);
}
I have the following style that makes the alarm panel badge background colour change depending on the state of the alarm:
style:
ha-label-badge.armed_away:
$: |
.label-badge {
background: rgba(255,64,64,0.1) !important;
ha-label-badge.disarmed:
$: |
.label-badge {
background: rgba(64,255,64,0.1) !important;
It works but requires a a page refresh to show up. Any idea why?
Armed (correct):
After disarming (incorrect):
Refresh (correct):
After arming (incorrect):
Refresh (correct):
1 Like
I still don’t have any idea / solution on how to fix this. 
Me too. I think debug_cardmod is broken.
Okey, I finally made it. I’m using Dwains theme.
Not sure what he is using, but I need to do some raw stuff in order to use template syntax…
- type: picture-glance
title: Entrance
camera_image: camera.entrance
camera_view: live
#debug_cardmod: true
style:
.: |
ha-card > div.box {
{% raw %}
{% if is_state('camera.entrance', 'recording') %}
background-color: rgba(255, 0, 0, 0.6);
{% endif %}
{% endraw %}
}
ha-card > div.box > div.row:nth-child(3) {
{% raw %}
{% if is_state('switch.camera_entrance_record', 'on') %}
animation: blink 2s linear infinite;
{% endif %}
{% endraw %}
}
@keyframes blink {
50% {opacity: 0;}
}
And the result:
Transparent red border with blinking record button, when I’m recording any footage. Record and stopp can be executed from the card itself.
1 Like
Hi everybody,
I try to apply CSS to image in picture-entity, but i don’t find how to call img in css 
Exemple :
- type: picture-entity
entity: sensor.59_weather_alert
name: Vent violent
attribute: Vent violent
show_name: false
show_state: false
aspect_ratio: 50x50
image: /local/meteo/vent.png
style: |
img #image {
{% if state_attr('sensor.59_weather_alert', 'Vent violent') == "Vert" %}filter: brightness(30%) grayscale(100%);
{% elif state_attr('sensor.59_weather_alert', 'Vent violent') == "Jaune" %}filter: brightness(50%);
{% elif state_attr('sensor.59_weather_alert', 'Vent violent') == "Orange" %}filter: brightness(50%);
{% elif state_attr('sensor.59_weather_alert', 'Vent violent') == "Rouge" %}filter: brightness(100%);
{% else %}filter: brightness(0%) grayscale(0%);{% endif %}}
i have try with :
- img
- #image
Any idea ?
They’re buried underneath shadow-roots.
What is declared in “shadow-roots” cannot be overloaded?
Yes they can. Thomas explained how here: 🔹 Card-mod - Add css styles to any lovelace card (read his notes in red on the picture).
If I understand correctly you have to place the $: | instead of shadowroots, except I still can’t reach the image: '(
style: |
hui-image:
$: |
#image {
{% if state_attr('sensor.59_weather_alert', 'Canicule') == "Vert" %}filter: brightness(30%) grayscale(100%);
{% elif state_attr('sensor.59_weather_alert', 'Canicule') == "Jaune" %}filter: brightness(50%);
{% elif state_attr('sensor.59_weather_alert', 'Canicule') == "Orange" %}filter: brightness(50%);
{% elif state_attr('sensor.59_weather_alert', 'Canicule') == "Rouge" %}filter: brightness(100%);
{% else %}filter: brightness(0%) grayscale(0%);{% endif %}}
An idea ?
Couple of fixes:
style: |
hui-image:
$: |
#image {
{% if state_attr('sensor.59_weather_alert', 'Canicule') == "Vert" %}filter: brightness(30%) grayscale(100%);
{% elif state_attr('sensor.59_weather_alert', 'Canicule') == "Jaune" %}filter: brightness(50%);
{% elif state_attr('sensor.59_weather_alert', 'Canicule') == "Orange" %}filter: brightness(50%);
{% elif state_attr('sensor.59_weather_alert', 'Canicule') == "Rouge" %}filter: brightness(100%);
{% else %}filter: brightness(0%) grayscale(0%);{% endif %}
}
2 Likes
My “}” was at the end of my {% else %}.
I have try with your code and same result: /
oops…
style: |
style:
1 Like
Yeah it’s work !
Very thx 