The title option is now used to define the header title. If you want to rename the title inside the bar you have to use name instead.
I actually use this property in my theme. And I would like to stay it this color. 
It would be nice to keep the containerbar background color when the entity is not available.
I tried to look for a way through styles with chrome dev tools, but I couldnât.
Yeah thatâs what I thought. Iâll have a look to see if thereâs a better variable to use and maybe add some more bar card specific theme variables.
I do still think greying out the bar works best as the default unavailable color, but maybe in a different way.
Highly recommending adding this to your styles for readability:
style: |-
bar-card-name {
text-shadow: 1px 1px 5px black;
}
bar-card-value {
text-shadow: 1px 1px 5px black;
}
Makes it so much easier to read the text.
1 Like
Agreed even though I donât use text shadows myself, however it depends on what theme and bar colors youâre using. I decided to not add the shadow to the text by default, since the default theme text color is also black.
1 Like
It was meant as general advice for people to use
1 Like
So itâs doing this nowâŚ
If you donât define a name it uses the entity name. I donât want any name at all.
- type: entities
title: Brother MFC-9335CDW
show_header_toggle: false
entities:
- type: 'custom:hui-horizontal-stack-card'
cards:
- type: 'custom:hui-horizontal-stack-card'
cards:
- type: 'custom:bar-card'
entity: sensor.mfc_9335cdw_black_toner_remaining
color: black
title_position: 'off'
unit_of_measurement: '%'
direction: up
indicator: auto-vertical
width: 3em
height: 14em
rounding: 10px
style: |
ha-card {
border-radius: 0;
box-shadow: none;
background: transparent;
}
icon_position: 'off'
saturation: 50%
animation: auto
speed: 1000
delay: 5000
min: 0
max: 100
padding: 4px
align: center
tap_action: info
show_value: true
limit_value: false
show_minmax: false
title: false
severity: false
target: false
attribute: false
icon: false
charge_entity: false
card_style: false
icon_style: false
title_style: false
value_style: false
minmax_style: false
background_style: false
visibility: false
decimal: false
entities:
- entity: sensor.mfc_9335cdw_black_toner_remaining
- type: 'custom:bar-card'
entity: sensor.mfc_9335cdw_cyan_toner_remaining
color: cyan
title_position: 'off'
unit_of_measurement: '%'
direction: up
indicator: auto-vertical
width: 3em
height: 14em
rounding: 10px
style: |
ha-card {
border-radius: 0;
box-shadow: none;
background: transparent;
}
icon_position: 'off'
saturation: 50%
animation: auto
speed: 1000
delay: 5000
min: 0
max: 100
padding: 4px
align: center
tap_action: info
show_value: true
limit_value: false
show_minmax: false
title: false
severity: false
target: false
attribute: false
icon: false
charge_entity: false
card_style: false
icon_style: false
title_style: false
value_style: false
minmax_style: false
background_style: false
visibility: false
decimal: false
entities:
- entity: sensor.mfc_9335cdw_cyan_toner_remaining
- type: 'custom:bar-card'
entity: sensor.mfc_9335cdw_magenta_toner_remaining
color: magenta
title_position: 'off'
unit_of_measurement: '%'
direction: up
indicator: auto-vertical
width: 3em
height: 14em
rounding: 10px
style: |
ha-card {
border-radius: 0;
box-shadow: none;
background: transparent;
}
icon_position: 'off'
saturation: 50%
animation: auto
speed: 1000
delay: 5000
min: 0
max: 100
padding: 4px
align: center
tap_action: info
show_value: true
limit_value: false
show_minmax: false
title: false
severity: false
target: false
attribute: false
icon: false
charge_entity: false
card_style: false
icon_style: false
title_style: false
value_style: false
minmax_style: false
background_style: false
visibility: false
decimal: false
entities:
- entity: sensor.mfc_9335cdw_magenta_toner_remaining
- type: 'custom:bar-card'
entity: sensor.mfc_9335cdw_yellow_toner_remaining
color: yellow
title_position: 'off'
unit_of_measurement: '%'
direction: up
indicator: auto-vertical
width: 3em
height: 14em
rounding: 10px
style: |
ha-card {
border-radius: 0;
box-shadow: none;
background: transparent;
}
icon_position: 'off'
saturation: 50%
animation: auto
speed: 1000
delay: 5000
min: 0
max: 100
padding: 4px
align: center
tap_action: info
show_value: true
limit_value: false
show_minmax: false
title: false
severity: false
target: false
attribute: false
icon: false
charge_entity: false
card_style: false
icon_style: false
title_style: false
value_style: false
minmax_style: false
background_style: false
visibility: false
decimal: false
entities:
- entity: sensor.mfc_9335cdw_yellow_toner_remaining
But itâs pushed the text in the bar now up the top
style: |
ha-card {
border-radius: 0;
box-shadow: none;
background: transparent;
bar-card-value {
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
margin-top: auto;
bottom 8px;
Iâm sure itâs this style? But what do I need to change?
Thanks!
Personally I would prefer to have the disabled color same as the enabled background color, to look as an empty bar, every bar each own color.
But can work with one for all as well.
entities:
- type: 'custom:hui-horizontal-stack-card'
cards:
- entities:
- color: black
entity: sensor.example
- color: '#57DAFD'
entity: sensor.example
- color: '#FF35C5'
entity: sensor.example
- color: '#F9D95E'
entity: sensor.example
entity_row: true
direction: up
height: 200px
positions:
icon: 'off'
indicator: 'off'
title: 'off'
stack: horizontal
type: 'custom:bar-card'
style: |-
bar-card-value {
margin-top: auto;
}
- type: picture
image: https://sg-next.imgix.net/medias/sys_master/root/h12/h3e/9770869850142/laserprinter-800x600.jpg
type: entities
1 Like
I just tried this and youâve convinced me of doing the empty background instead of a gray background. Fixed in 3.0.3. You can still set bar-card-disabled-color in the theme to override the color.
Perfect!
Thanks!
Wow!! Thanks for that. Much simpler⌠I will implement that tomorrow for sure.
1 Like
have this setup:
and though I have set titles for the bars, the friendly_names of the sensors are displayed.
- type: custom:bar-card
style: |
ha-card {
box-shadow: none;}
# columns: 5
stack: horizontal
entity_row: true
direction: up
# positions:
# icon: 'inside'
# indicator: 'off'
# title: 'top'
entities:
- color: black
entity: sensor.epson_ink_level_black
title: Black
- color: 'cyan'
entity: sensor.epson_ink_level_cyan
title: Cyan
- color: 'magenta'
entity: sensor.epson_ink_level_magenta
title: Magenta
- color: 'yellow'
entity: sensor.epson_ink_level_yellow
title: Yellow
- color: 'grey'
entity: sensor.epson_ink_level_waste
title: Waste
height: 150px
max: 100
min: 0
# padding: 2px
target: 20
# title_position: bottom
# align: center-split
# icon_position: inside
unit_of_measurement: '%'
width: 100%
If I enable the positions field, the bars arenât displayed at al⌠and I donât see any error logged
using bar-card 3.0.2, HA 107.5
what could be wrong? thanks for having a look
title is now only used for the header title, youâll have to use name instead to change the names inside the bars.
Also top is not an option for positions: title:.
I used to see the animation but after my sd card crashed and after reinstalling everything from scratch. I am unable to do so . Anything particular to check for troubleshooting?
Thank you
thanks! overlooked that, sorryâŚ
much better (also corrected the IP address which was changed because of a router reboot⌠now I have values again 
):
How come the unused parts in the bar are now all grey, while in the one I posted above they had the base color in a grayscale variant? Secondly, as you can see the black percentage is hardly visible, how can that be changed?
The animation is disabled by default now. Youâll have to enable it with the animation config option https://github.com/custom-cards/bar-card#animation-options.
I keep seeing that black bar in peopleâs printer cards (who the hell still uses printers anyway 
). But thereâs a couple of things you can do. Either set the bar to gray instead of black or add a white text shadow to the value using card-mod.
Also the background being more gray is just a trick of the eye because the bar is fuller (classic contrast perception thing). If you actually sample the colors they are exactly the same.