Luisico
November 11, 2021, 7:26am
2291
Hi, i have css formatted several badges, it has been working until two days ago. 11.2 Core installed.
Desired look:
Since two days ago:
If i open Raw Config Editor and exit, styles are applied even without saving any changes (no one is done). I have to do that every time i open a new HA tab on web browser or open the app. Also tried with and without card_mod: label
my code is
badges:
- entity: person.luis_davalos
card_mod:
style: |
:host {
{% if is_state('person.luis', 'home') %}
--label-badge-red: green;
{% else %}
--label-badge-red: red;
{% endif %}
}
- entity: person.violeta
card_mod:
style: |
:host {
{% if is_state('person.violeta', 'home') %}
--label-badge-red: green;
{% else %}
--label-badge-red: red;
{% endif %}
}
- entity: sensor.temperatura_terraza
name: Exterior
card_mod:
style: |
@keyframes blinker { 50% { opacity: 0; } }
:host {
{% if states('sensor.temperatura_terraza') |float(0) > 40 %}
--label-badge-background-color: red;
--label-badge-text-color: white;
animation: blinker 2s linear infinite;
font-weight: bold;
text-shadow: 1px 1px #0005;
{% elif states('sensor.temperatura_terraza') |float(0) > 34 %}
--label-badge-background-color: #FF9800;
--label-badge-text-color: white;
--label-badge-red: #FF9800;
font-weight: bold;
text-shadow: 1px 1px #0005;
{% elif states('sensor.temperatura_terraza') |float(0) > 12 %}
--label-badge-background-color: green;
--label-badge-text-color: white;
--label-badge-red: green;
font-weight: bold;
text-shadow: 1px 1px #0005;
{% else %}
--label-badge-background-color: #039BE5;
--label-badge-text-color: white;
--label-badge-red: #039BE5;
font-weight: bold;
text-shadow: 1px 1px #0005;
animation: blinker 2s linear infinite;
{% endif %}
}
- entity: sensor.media_temperatura_interior
name: Interior
card_mod:
style: |
@keyframes blinker { 50% { opacity: 0; } }
:host {
{% if states('sensor.media_temperatura_interior') |float(0) > 29 %}
--label-badge-background-color: red;
--label-badge-text-color: white;
animation: blinker 2s linear infinite;
font-weight: bold;
text-shadow: 1px 1px #0005;
{% elif states('sensor.media_temperatura_interior') |float(0) > 27 %}
--label-badge-background-color: #FF9800;
--label-badge-text-color: white;
--label-badge-red: #FF9800;
font-weight: bold;
text-shadow: 1px 1px #0005;
{% elif states('sensor.media_temperatura_interior') |float(0) > 18 %}
--label-badge-background-color: green;
--label-badge-text-color: white;
--label-badge-red: green;
font-weight: bold;
text-shadow: 1px 1px #0005;
{% else %}
--label-badge-background-color: #039BE5;
--label-badge-text-color: white;
--label-badge-red: #039BE5;
font-weight: bold;
text-shadow: 1px 1px #0005;
animation: blinker 2s linear infinite;
{% endif %}
}
1 Like
DrewXT
November 11, 2021, 8:18am
2292
grrr, my 2nd HA wasnāt on 11.2 - 11.2 broke card_mod when I upgraded it
thomasloven
November 11, 2021, 9:28am
2293
Iām about to update the recommended installation method for card-mod.
Luckily, thereās a thing you can do to help.
By adding the following to your configuration.yaml (obviously adjusting the URL to where you actually have card-mod installed) and restarting, you can give card-mod a head start.
frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
You may get some errors in the browser console. They can be safely ignored, and Iām currently working on some tweaks to make this installation method work even more smoothly.
If I had started today, I would have made card-mod a custom component or integration rather than a frontend plugin. Itād be an incredibly breaking change for everyone using HACS to switch now, though. So youāll need some manual intervention unless @ludeeus can think up some magic.
1 Like
ludeeus
November 11, 2021, 9:51am
2294
Nope, sorry.
tbh, I havent met many issues during the HA changes, in fact, I can only see 1 mod not working anymore. I have meticulously read the posts above and many come close, but just not exactly:
- type: custom:template-entity-row
# https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/2182?u=mariusthvdb
entity: binary_sensor.vijverpompen
card_mod:
style:
div#wrapper: |
state-badge {
{% if is_state(config.entity,'on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: steelblue;
}
100% {
color: aquamarine;
}
}
still makes my entity icon rotate, but the colorization is goneā¦
anyone with a hint, please come forward? thanks!
DrewXT
November 11, 2021, 11:11pm
2296
Thanks Thomas, thatās worked a charm!
gonzotek
November 12, 2021, 3:48pm
2297
Thanks! I noticed a bunch of button cards I had styled with colors (representing a cheap battery powered usb lampās IR-controlled colors) were all using my default theme about half the time when reloadingā¦it was starting to drive my OCD a little crazy
at least this works:
type: entities
entities:
- type: custom:template-entity-row
entity: binary_sensor.test_value_from_input_boolean
name: name
secondary: some value
state: state
icon: mdi:fan
card_mod:
style:
div#wrapper: |
state-badge {
animation: rotation 0.5s linear infinite, resizing 1s linear infinite alternate, coloring 8s linear infinite alternate;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes resizing {
0% {
--mdc-icon-size: 10px;
}
25% {
--mdc-icon-size: 15px;
}
50% {
--mdc-icon-size: 20px;
}
75% {
--mdc-icon-size: 26px;
}
100% {
--mdc-icon-size: 32px;
}
}
@keyframes coloring {
0% {
color: red;
}
17% {
color: orange;
}
34% {
color: yellow;
}
51% {
color: green;
}
68% {
color: lightblue;
}
85% {
color: blue;
}
100% {
color: violet;
}
}
thanks Ildar. Since that is quite identical to what I am using, what do you think could be the desicive difference?
is the difference.
Ill test, thanks. It was working fine though, so youāre saying this is because changes in HA lately?
nope, doesnt work. btw, this same coloring does still work on a glance card:
card_mod:
style:
'.box div:nth-child(3)':
'div:nth-child(1)':
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
puzzling this isā¦
copying your config above shows it doesnt workā¦
maybe my card-mod-theme interferes, Ill turn that off and see what happens.
Cannot tell, I have never tested this case before.
Arakon
November 13, 2021, 8:46am
2304
Is there a means to modify the icon sizes and spacings in the thermostat card? I currently get this:
Edit: So I found that this will reduce the size of the icons, but it will not change anything about their spacing:
entity: climate.heating_sascha
card_mod:
style:
ha-icon-button:
$: |
ha-svg-icon {
height: 75% !important;
width: 75% !important;
Are you sure you are talking about Glance card?state-badge.
Faced a new issue with the HA Editor:
Create a new card via UI, copy/paste this code into Editor:
type: glance
entities:
- entity: sun.sun
- entity: sun.sun
icon: mdi:fan
card_mod:
style: |
state-badge {
color: orange;
}
The screen is:
Save the code, the screen is:
Open the Editor again, the screen is:
The card_mod code is not displayed.card_mod.
opened 06:41PM - 13 Nov 21 UTC
My Home Assistant version: 2021.11.2
My lovelace configuration method (GUI orā¦ yaml): yaml/GUI
**Steps to reproduce:**
1. Create a new card via UI, copy/paste this code into Editor:
```
type: glance
entities:
- entity: sun.sun
- entity: sun.sun
icon: mdi:fan
card_mod:
style: |
state-badge {
color: orange;
}
```
2. The screen is:
3. Save the code, the screen is:
4. Open the Editor again, the screen is:
The card_mod code is not displayed.
If you press the āSaveā button, the code will probably be saved w/o card_mod.
Error messages from the browser console:
none
---
**By putting an X in the boxes ([]) below, I indicate that I:**
- [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
- [x] Have made sure I am using the latest version of the plugin.
- [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
- [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
Curious to know if youāre using the new config advised by Thomas Loven .
User DrewXT reported that it fixed the similar issue that he had posted earlier in the thread.
I donāt use the editor myself, and havenāt really seen many of the issues that some people are reporting, apart from the occasional need for a CTRL+F5 page refresh, but the new config is working well for me.
1 Like
Cannot understand why - but it really helped:
Now the
card-mod code is visible in the Editor.
no sorry, youāre right, it is a picture-glance.
type: picture-glance
title: Vijverpompen
image: /local/images/vijver.png
state_filter:
'off': grayscale(72%)
entity: binary_sensor.vijverpompen
entities:
- switch.vijverpomp_links
- switch.vijverpomp_rechts
- input_boolean.vijverpompen_alterneren
- sensor.pond_buiten_sensor_calibrated_temperature
- binary_sensor.vijverpompen
- sensor.vijverpompen
card_mod:
style:
'.box div:nth-child(3)':
'div:nth-child(1)':
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
'div:nth-child(2)':
etc
and the colorize works perfectly. cant get the other options to work, or, rephrase, can not get the template-entity-row to colorize
another (older) card to card_mod: Waze-card.GitHub - royto/waze-card: Lovelace card for showing Waze routes data my regular header card_mod doesnāt do anything:
card_mod: &header
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
when use on:
- type: custom:waze-card
title: Rijtijden
card_mod: *header
entities:
I did change .card-header to .header, because thats what inspector indicates the header to be, but still no mod effective. what should I try next?
Iām a happy chappy again!!
thinking it was something wrong on my end.
