This is unfortunately probably another thing that’s just broken because of the style changes. Hopefully I’ll be able to fix most of these things today.
1 Like
Thank you, you’re right.
There was a typo error into the declaration of resource in lovelace yaml file.
I’ve fixed the CSS definitions in 2.0.2. The default styles are now assigned by the element type instead of the id, which should allow you to override the styles again.
You can figure out the element type by inspecting the bar in devtools, but if you just want to override the border-radius have a look at the example in the release notes.
The div elements are a bit of a mess right now and I intend to clean them up a bit in the future.
Also I still have to fix the padding issues when using columns, hopefully by tonight.
1 Like
Its working so good 
Thank you!
Will take a look.
I’m in the process of updating my bar cards so here’s an extended example if anyone wonders how it works.
EDIT: bar-card 3.0.5
- entities:
- entity: sensor.imac_cpu_per
name: Processor
icon: 'mdi:chip'
tap_action: service
service_options:
domain: homeassistant
service: update_entity
data:
entity_id: sensor.imac_cpu_per
- entity: sensor.imac_mem_per
name: Minne
icon: 'mdi:memory'
tap_action: service
service_options:
domain: homeassistant
service: update_entity
data:
entity_id: sensor.imac_mem_per
positions:
icon: outside
indicator: inside
title: outside
severity:
- color: '#303435'
from: 0
to: 89
- color: '#6d2525'
from: 90
to: 100
decimal: 0
entity_row: true
style: |
ha-card {
margin-bottom: -0.51em;
}
bar-card-value {
margin-right: auto;
color: #e0e1e1;
text-shadow: none;
font-size: 1em;
font-weight: 400;
letter-spacing: 0.01em;
}
bar-card-background {
background: radial-gradient(circle, rgba(52, 57, 58, 0.1) 0%, rgba(17,18,18,0.2) 75%);
box-shadow: inset 0 0 25px #00000045;
border-radius: 0.3em;
}
bar-card-backgroundbar {
background: none;
}
unit_of_measurement: '%'
height: 2em
width: 45%
type: custom:bar-card
bar-card 2.0.2
- entity: sensor.imac_cpu_per
title: Processor
icon: 'mdi:chip'
icon_position: left
width: 50%
height: 2em
max: 100
min: 0
severity:
- color: '#303435'
value: 90
- color: '#6d2525'
value: 100
style: |
ha-card {
box-shadow: none;
margin: 12px 0px 16px 0px;
}
ha-icon {
color: #9e9e9e;
filter: none;
}
bar-card-title {
color: #e0e1e1;
margin-left: 1em;
}
bar-card-bar, bar-card-chargebar, bar-card-indicatorbar,
bar-card-indicatorcontainer, bar-card-indicator {
border-radius: 0.3em;
}
bar-card-value {
color: #e0e1e1;
text-shadow: none;
font-size: 0.95em;
font-weight: 400;
margin-top: 1px;
}
bar-card-background {
background: radial-gradient(circle, rgba(36,40,40,1) 0%, rgba(23,25,26,1) 100%);
border-radius: 0.3em;
}
tap_action: service
service_options:
domain: homeassistant
service: update_entity
data:
entity_id: sensor.imac_cpu_per
type: custom:bar-card
1 Like
Thanks, can you show how the card appears?
Just released the new beta 3.0.0b0.
Why so soon after 2.0.0 you ask? Because after releasing 2.0.0 I had a big hard look at this card and felt the need to completely re-work everything, into a more streamlined out of the box user experience as well as cleaning up the somewhat messy code (this was my first ever javascript project after all).
1 Like
Released version 3.0.0. 
This version completely overhauls the options and layout of this card. This includes many breaking changes which hopefully won’t affect the old config too much.
1 Like
Hi,
Thank you for a great card again.
Took me a lot of time to set by bar cards to look the way they were this time, using the card mod. But everything is working.
Found one issue though, I have IOT Link card for my PC at home. Previously when the PC was off, the bar card for HD percentage, for example, was just showing “unavailable”, cause this is the state of the sensors, which is fine. However, now when PC is off it brakes the whole view, removing all the other cards from screen as well. When the PC is on, everything is being displayed correctly.
Can you please advice.
Thanks in advance.
This probably got removed, because I thought it was no longer required. I did a lot of cleanup in the code, but it seems this is just broken now. I’ll try to fix it today.
Just out of curiosity, how much did you have to change to make it look like before and what does it look like now?
Here is an example, this is part of my printer card:
Took me a while to set 2 rows with 2 columns of bars. Since there is no “columns” property anymore, has to create it using 2 separate cards and “vertical-stack-in-card”.
Also had to play with CSS in order to have same padding around the bars.
Here is the code:
- type: custom:vertical-stack-in-card
cards:
- type: custom:bar-card
style: |
.card-content {
padding: 6px;
}
#states > * {
margin-top: 0;
}
unit_of_measurement: "%"
stack: horizontal
positions:
icon: "off"
title: "inside"
value: "inside"
indicator: "off"
entities:
- entity: sensor.mfc_j650dw_black_ink_remaining
name: Black
color: 'black'
- entity: sensor.mfc_j650dw_cyan_ink_remaining
name: Cyan
color: '#57DAFD'
- type: custom:bar-card
style: |
.card-content {
padding: 1px 6px 6px 6px;
}
#states > * {
margin-top: 0;
}
unit_of_measurement: "%"
stack: horizontal
positions:
icon: "off"
title: "inside"
entities:
- entity: sensor.mfc_j650dw_magenta_ink_remaining
name: Magenta
color: '#FF35C5'
- entity: sensor.mfc_j650dw_yellow_ink_remaining
name: Yellow
color: '#F9D95E'
Ah yea cool that seems to be working. You could also consider sticking them into an entities card and setting entity_row to true, but this probably won’t make much difference as you’ll still have to remove the padding around entities card.
Anyway the unavailable status bug is fixed in 3.0.1.
Hi,
Thanks!
The issue with unavailable entities resolved.
When I use the custom bar-card I can’t get it to work to get the borders round
Someone know how to fix?
Any chance to have back the attribute option? It’s very difficult to not have it and use the same cards as before…
1 Like
I’d prefer to keep this card as basic as possible when it comes to features that can be handled (better) by other components or custom cards.
If you want to display an attribute as the value you can create a template sensor and display that https://www.home-assistant.io/integrations/template/.
Hi,
Small concern though, once the state is unavailable, it does not crush the UI anymore, however the color of the bar becomes as “primary-text-color” (I think).
Can it stay same as its background when the sensor is available? As an empty bar, for example?
Please see below, here is available sensors:
Here is what happens when they unavailable:
Here is the code:
- type: custom:bar-card
style: |
.card-content {
padding: 6px;
}
#states > * {
margin-top: 0;
}
unit_of_measurement: "%"
color: 'rgba(117,189,111,1.0)'
stack: horizontal
positions:
icon: "off"
title: "inside"
value: "inside"
indicator: "off"
entities:
- entity: sensor.dimka_hdd_usage_c
name: "Disk C"
- entity: sensor.dimka_hdd_usage_d
name: "Disk D"
Thanks in advance.
With version 2.x I customized the title inside the bar using the custom:config-template-card, for example as to :
- type: custom:config-template-card
variables:
- states['sensor.synology_dsm_total_size_volume_1'].state
- states['sensor.synology_dsm_used_space_volume_1'].state
entities:
- sensor.synology_dsm_total_size_volume_1
- sensor.synology_dsm_used_space_volume_1
card:
type: custom:bar-card
title_position: inside
entity: sensor.synology_dsm_volume_used_volume_1
title: "${ 'Disk (' + vars[1] + '/' + vars[0] + ')' }"
How can I have the same behaviour with version 3.0?
In the new release the title inside the bar is related to entity not to the title of bar-card.
Thanks in advance
It’s possibly because the card defaults to the switch-unchecked-button-color theme color when the state is unavailable, which could be the same as your text color.