Here is what I’m using:
type: custom:config-template-card
entities:
- sensor.energy_cost_4244_today_string
card:
type: custom:bar-card
max: 30
severity:
- color: Red
from: 21
to: 30
- color: Orange
from: 11
to: 20
- color: Green
from: 0
to: 10
entities:
- entity: sensor.energy_cost_4244_today
card_mod:
style: |
bar-card-value {
color: yellow;
}
Which renders as:
Try
- type: custom:bar-card
title: prefix
entities:
- entity: input_number.test_level_1
card_mod:
style: |
bar-card-value:before {content: "$ "}
This worked like a charm!! Thank you so much 
Btw - why do you use CTC (config-template-card) here?
style mod doesnt work 
Whats wrong?
I want to have text rotate 270°…
type: custom:bar-card
stack: horizontal
name: retence
decimal: 0
max: 173
min: 0
direction: up
height: 200px
width: 35px
animation:
state: 'on'
speed: 2
positions:
indicator: inside
icon: 'off'
style: |-
bar-card-name {
font-size: 22px;
transform-origin: 0 0;
transform: rotate(270deg);
text-shadow: 0px 0px #0008;
white-space: nowrap;
font-weight: bold !important;
}
entities:
- entity: sensor.retence_hladina
Start with fixing a card-mod syntax, you are missing a “card_mod” keyword.
Thats what I use. It looks like same to my code, but my doesnt work…
When I try to add:
card_mod:
before the line with style: |- this lines under card_mod immediately dissapear.
style: |-
bar-card-name {
font-size: 22px;
transform-origin: 0 0;
transform: rotate(270deg);
text-shadow: 0px 0px #0008;
white-space: nowrap;
font-weight: bold !important;
}
That never happed to me, only in this bar-card…
It should be
...
card_mod:
style: ....
If you observe a “card_mod code is automatically deleted in UI editor” behaviour:
yes, it happens with SOME cards in UI editor, there is an issue on card-mod github.
A humble advice: do not use a dashboard in a “storage mode” (i.e. managed in UI) as a “main” dashboard, use it ONLY for testing (i.e. use dashboards in “yaml mode” for basic ones) because all your cards (not a card-mod code only) may magically disappear.
Thanks! Whe I edit it in RAW mode it works.
But you scaring me … lost all in dashboard
I use UI because it more clear for me. Especially with new Sections view type. Really like the easy way how you can reorganize sections and cards.
But I hope when I make a backup of entire dashboard via RAW configuration editor (simply copy the full code there to any external file) than its ok and I can restore it if something happend.
searched for “repository” and “maintained” in the thread without finding much so gonna ask,
is this the current repo you’re all using? GitHub - custom-cards/bar-card: Customizable Animated Bar card for Home Assistant Lovelace
it looks long dead since covid hit, the UI for adding cards is completely broken,
so are you all just hammering it around like a zombie to keep it working while it gets more broken and wonky after each HA release…?
I saw some forks but not sure if there is an official one
What is exactly “gets more broken and wonky after each HA release”?
As for “broken UI” - come on, nobody using UI except beginners.
I am a professional dev yet can use some GUI convenience every once and then, plus building on top of a dead repo is by definition fragile
It works more or less.
Again about UI: many experienced users use yaml mode dashboards and do not care about UI.
The code should all be in my original post. To change everything to your own needs just change the yaml for the bar card itself, in the css code only the following items should be edited:
{% set entity = {
"state": states('counter.regenwater_filter') | int(9999999999),
"name": "Levensduur",
"unit": " d"
}
%} {% set severity = {
"green": 0,
"orange": 180,
"red": 240
}
%} {% set colors = {
"green": "76,175,80",
"orange": "255,152,0",
"red": "244,67,54"
}
%}
you’re right, Bar card repo seems abandoned and with that, UI editing suffers more getting out of touch when the core HA Dashboard progresses.
The core HA dashboard is getting more advanced with every release, and many advanced users rely on that. Given the new features in the automations scripting, and also the new Dashboard options, the UI is truly getting there. Many integrations migrate to the UI, so we need less Yaml with each and every release.
very important: keep providing positive feedback to the dev team, so they can advance even further, especially when you say you are a professional dev. Please do, and dont let anyone talk you out of it.
rebuilt my Home Assistant card to use regular entities card (because of the current bard-card being unmaintained.) It isnt the same, but it does have a nice ring to it. Picture needs some further tweaking (so it doesnt repeat and still is the correct size/proportion.)
and a variation with some tighter paddings, so the individual entities have a bit more space horizontally. can also change margins:
padding: 0px 16px;
/*margin: 0px -16px;*/
so do as you please there
# green #0, 128, 0
# darkgreen #0, 100, 0
# limegreen 50, 205, 50
# gold 255, 215, 0
# brown # 165, 42, 42
# orange #255, 165, 0
# darkorange #255, 140, 0
# orangered #255, 69, 0
# tomato # 255, 99, 71
# maroon #128, 0, 0
# red #255, 0, 0
type: entities
card_mod:
style: |
ha-card {
background:
{% set dark = is_state('binary_sensor.donker_buiten','on') %}
url('/local/homeassistant/homeassistant{{"-dark" if dark }}.png');
color: white;
--card-mod-icon-color: white;
font-weight: bold;
padding-top: 40px;
}
entities:
- entity: sensor.last_boot
- entity: sensor.processor_use
<<: &perc
card_mod:
style: |
hui-generic-entity-row {
padding: 0px 16px;
border-radius: 24px;
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{% if perc >= 59 %} {% set bar = '255, 0, 0' %}
{% elif perc >= 44 %} {% set bar = '128, 0, 0' %}
{% elif perc >= 24 %} {% set bar = '255, 165, 0' %}
{% elif perc >= 9 %} {% set bar = '0, 100, 0' %}
{% else %} {% set bar = '0, 128, 0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{perc}}%, rgba({{bar}},0.2) {{perc}}%, rgba({{bar}},0.2) 100%);
}
name: Cpu
- entity: sensor.processor_temperature
name: Temp
card_mod:
style: |
hui-generic-entity-row {
padding-right: 16px;
padding-left: 16px;
margin: 0px -16px;
border-radius: 24px;
background:
{% set temp = states(config.entity)|float(0) %}
{% set rest = 100 - temp %}
{% if temp >= 85 %} {% set bar = '255, 0, 0' %}
{% elif temp >= 75 %} {% set bar = '128, 0, 0' %}
{% elif temp >= 65 %} {% set bar = '255, 99, 71' %}
{% elif temp >= 55 %} {% set bar = '255, 69, 0' %}
{% elif temp >= 45 %} {% set bar = '255, 140, 0' %}
{% elif temp >= 35 %} {% set bar = '255, 165, 0' %}
{% else %} {% set bar = '0, 128, 0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{temp}}%);*/
linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{temp}}%, rgba({{bar}},0.2) {{temp}}%, rgba({{bar}},0.2) 100%);
}
- entity: sensor.memory_use_percent
name: Memory
card_mod:
style: |
hui-generic-entity-row {
padding-right: 16px;
padding-left: 16px;
margin: 0px -16px;
border-radius: 24px;
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{% if perc >= 85 %} {% set bar = '255, 0, 0' %}
{% elif perc >= 75 %} {% set bar = '128, 0, 0' %}
{% elif perc >= 60 %} {% set bar = '255, 165, 0' %}
{% elif perc >= 50 %} {% set bar = '165, 42, 42' %}
{% else %} {% set bar = '0, 128, 0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{perc}}%, rgba({{bar}},0.2) {{perc}}%, rgba({{bar}},0.2) 100%);
}
- entity: sensor.disk_use_percent_home
name: Disk
<<: *perc
- entity: sensor.swap_use
name: Swap
card_mod:
style: |
hui-generic-entity-row {
padding-right: 16px;
padding-left: 16px;
margin: 0px -16px;
border-radius: 24px;
background:
{% set swap = states(config.entity)|float(0) %}
{% set rest = 1000 - swap %}
{% set factor = 0.06 %}
{% if swap >= 768 %} {% set bar = '255, 0, 0' %}
{% elif swap >= 640 %} {% set bar = '255, 215, 0' %}
{% else %} {% set bar = '50, 205, 50' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest*factor}}%, {{bar}} {{swap*factor}}%);*/
linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{swap*factor}}%, rgba({{bar}},0.2) {{swap*factor}}%, rgba({{bar}},0.2) 100%);
}
or add a bit of border, alike the original bar-card:
border-radius: 24px; /*7pt*/;
border: 2px solid rgb(49,150,207);
border-shadow: 2pt;
final touch for now: add a bit more color to the rest bar, setting the percentage to 0.6 in the linear -gradient:
linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{perc}}%, rgba({{bar}},0.6) {{perc}}%, rgba({{bar}},0.2) 100%);
since this now is no longer a bar-card, I wont pursue here,
(I want some common mods that apply to all individual entities moved to the top card mod if possible) but given the fact the original was made with bar-card elements in the picture-elements card, I figured it to be relevant
well OMT then
yep, easy
type: entities
card_mod:
style:
hui-sensor-entity-row:
$: |
hui-generic-entity-row {
height: 25px;
padding: 0px 16px;
border-radius: 24px;
border: 2px solid rgb(49,150,207);
border-shadow: 2pt;
}
.: |
ha-card {
background:
{% set dark = is_state('binary_sensor.donker_buiten','on') %}
url('/local/homeassistant/homeassistant{{"-dark" if dark }}.png');
color: white;
--card-mod-icon-color: white;
--mdc-icon-size: 20px;
font-weight: bold;
padding-top: 40px;
}
better:
