please have a look if you can find the element we need to adjust to prevent that, I am not entirely sure which it even is, is it the section below, the set of badges…
I’ve done a lot of searching and trying different things, but I haven’t been able to get card-mod to work with badges. It’s working fine for other elements on my dashboard.
Here’s the code to the top of the dashboard. Just some simple badges. I’d like to change the color and size of the name on each badge and I’d like to change the color of the border around the badges.
Thank you so much for your help! Only thing left is the font size. Do you know how to change that for both the name and the content (‘L Garage’ and ‘Closed’ in my screenshot.)?
I did some more searching and did a quick primer on CSS and figured out where to change the fonts. Now weather it’s “correct” or not, I don’t know, but it’s working.
Here’s the code in case someone else is searching.
card_mod for the mushroom template badge showing battery SoC visually (animated when charging - both the mask and background depend on SoC for consistent effect and speed)
{% set perc = states('your_battery_sensor') | float(0)
%}
.badge::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border-radius: inherit;
{% if states('your_battery_sensor') == "Charging" %}
{% set chargingcolor = '#20B2AA' %}
{% set chargingcolorlight = 'rgb(from ' + chargingcolor + ' r g b / 0.2)' %}
{% set chargingcolorverylight = 'rgb(from ' + chargingcolorlight + ' r g b / 0.05)' %}
{% set animationcolor = '#F8F8FF' %}
border: 0.5px solid {{ chargingcolor }};
background: linear-gradient(90deg,{{chargingcolorlight}} 0%,{{chargingcolorlight}} 35%,{{chargingcolorverylight}} 47%, {{ animationcolor }},{{chargingcolorverylight}} 53%, {{chargingcolorlight}} 65%,{{chargingcolorlight}} 100%);
animation: BackgroundGradient {{(2 * perc + 50) / 250 * 3}}s ease infinite;
{% else %}
{% set chargecolor = '#6495ED' %}
{% set chargecolorlight = 'rgb(from ' + chargecolor + ' r g b / 0.2)' %}
{% set opacityzero = 'rgb(from ' + chargecolor + ' r g b / 0)' %}
border: 0.25px solid {{ chargecolor }};
background: linear-gradient(to right, {{chargecolorlight}} 0%, {{chargecolorlight}} {{perc}}%, {{opacityzero}} {{perc}}%, {{opacityzero}} 100%) !important;
{% endif %}
background-size: {{2 * perc + 50}}% 100%;
mask: linear-gradient(to right, white {{perc}}%, transparent 0);
}
@keyframes BackgroundGradient {
0% {background-position: 100% ;}
100% {background-position: 0%;}
}
Are you still looking for this syntax? Not sure what exactly you were missing but this works for me. Now I plan to generalise this in an include so the alpha corrections and positions are calculated on the fly, depending on number of stops - I might have overdone it a little below - and desired easing function (in, out or in-out):
btw, I got the idea for this crazy long gradient here Easing Gradients and have to admit, even on a small badge, the difference is noticeable so now applying this trick in other places (hence the need to turn this into an include …)
{% set gradientcolor = 'var(--badge-color)' %}
{% set alpha = 0.5 %}
{% set startgradient = 0 %}
{% set endgradient = 100 %}
background: linear-gradient(90deg,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 1.000) | string + ' )'}} 0%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 1.000) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 00.0 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.925) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 09.5 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.857) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 17.7 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.781) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 24.7 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.701) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 31.0 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.620) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 36.8 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.538) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 42.3 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.455) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 47.6 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.373) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 52.9 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.291) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 58.2 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.212) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 63.7 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.138) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 69.5 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.070) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 75.8 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.019) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 91.2 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.000) | string + ' )'}} {{startgradient + (endgradient - startgradient) * 100 / 100}}%,
{{'rgb(from ' + gradientcolor + ' r g b / ' + (alpha * 0.000) | string + ' )'}} 100%
);
Gosh so frustrating, the 2024.8 update brought a shitload of “improvements” (what’s the opposite of that?) regarding the new badges. I only see downsides. Biggest ones:
Consume significantly more space
While at the same time being hardly readable (text size is so so small and not configurable!)
Color only on icon, not for text or state
No possibility to style them (colored borders, custom UoM)
Config options like show_icon etc. only work in special view types, not in the masonry default
I don’t see any option AT ALL to regain what I had before with e. g.
Spent already 1.5 hours. Thanks HA team for “streamlining” stuff forcing people to put their year long hard work to the trash bin. /angry-mode-off
UPDATE: I went the long long loooong way (with spending in total almost 6 hours of a rainy weekend day) and migrated all badges to card-mod withmushroom template badge.
So far I could achieve almost every function I had before like
colored borders
larger state font size
dynamic styling (icon, border and text colors) based on entity/attributes states
New default badges (optimized, directly after migration they were ugly as hell)
Final custom solution
3.1 Normal state
3.2 Error/outage simulation
As you can see one last part is missing: styling the whole badge background (yellow) in case of an outage. Currently I only managed to target certain parts of the badge (label and state). Is there a solution for this?
→ Edit: solved now too with --card-background-color: yellow; in .badge. Screenshot updated.
So one more custom component (Mushroom cards) instead of relying on the default which is a bit meh, but the advantages of the core default were just too big. No dynamic styling, way too small state font size, not even colored borders etc. etc. etc… Happy for now.
Just read a previous post and realised what i was doing wrong, just as you posted. Like you said this stuff can get frustrating, especially when you are me and you don’t like to read lol
Thanks for sharing, i will have a go now.
UPDATE: success but still getting red dot??
Further UPDATE: the dot has gone. It was the remnants of a failed attempt which was causing the dot.
- and desired easing function (in, out or in-out):
