- type: custom:bar-card
name: TX Power
icon: mdi:gauge
positions:
title: outside
value: outside
width: 75%
target: 24
max: 27
entity: sensor.ap2_tx_power
severity:
- color: rgb(26,204,147,0.33)
from: 0
to: 24
- color: rgb(163,0,0,0.60)
from: 24
to: 27
style: |
ha-card {
--paper-item-icon-color: rgb(47,186,229);
border-radius: 2.5px;
height: 40px;
}
ha-icon {
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
margin-top: -8.5px;
}
bar-card-value {
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
margin-top: -6.5px;
padding-left: 5px;
}
bar-card-indicator {
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
margin-top: -6.5px;
}
bar-card-title {
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
margin-top: -6.5px;
}
bar-card-backgroundbar {
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
margin-top: -3.5px;
height: 15px;
border-radius: 2.5px;
}
bar-card-currentbar {
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
margin-top: -3.5px;
height: 15px;
border-radius: 2.5px;
}
bar-card-targetbar {
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
margin-top: -3.5px;
height: 15px;
}
bar-card-targetmarker {
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
margin-top: -3.5px;
height: 15px;
}
Like to see this when you get it going, I did something similar but using the horseshoe card.
Iām slightly confused what exactly youāre trying to do, could you show me a screenshot of what it looked like before?
I see you have a lot of custom CSS going on just not sure why youāre not just using the bar height?
One thing you should fix anyway is this, title has be replaced by name:
positions:
name: outside
value: outside
1 Like
Just need to update your docs
| bar-card-title | Title element. |
|---|
is now bar-card-name
I saw a little mistake in CSS elements description and in examples:
bar-card-title is bar-card-name now.
Another thing, that if I have any box shadow in my card theme, it appears in entity_row too.
In this case I have to use this:
ha-card {
box-shadow: none;
}
I almost forgot to write:
This plugin is amazing! Very flexible and useful!
Thank you for your work!
1 Like
This will be fixed in the next update, I forgot to remove the ha card shadow when I added it back in to fix some CSS issues.
@jimpower Iāve updated the docs, thanks.
2 Likes
Thank you!
I noticed now, that @jimpower already wrote the bar-card-name thing just before me. 
I should go to sleep.
1 Like
Push through it code is always at its most beautiful when youāre delirious
1 Like
almost there just canāt get the targetmarker to align.
- type: custom:bar-card
name: TX Power
icon: mdi:gauge
positions:
name: outside
value: outside
height: 15px
target: 24
max: 27
entity: sensor.ap1_tx_power
severity:
- color: rgb(26,204,147,0.33)
from: 0
to: 24
- color: rgb(163,0,0,0.60)
from: 24
to: 27
style: |
ha-card {
--paper-item-icon-color: rgb(47,186,229);
border-radius: 2.5px;
height: 40px;
}
ha-icon {
margin-top: -7px;
padding-right: 5px;
}
bar-card-indicator {
margin-top: -12px;
padding-right: 5px;
}
bar-card-name {
margin-top: -4.5px;
padding-left: 5px;
}
bar-card-backgroundbar {
margin-top: -3.5px;
border-radius: 2.5px;
}
bar-card-currentbar {
margin-top: -3.5px;
border-radius: 2.5px;
}
bar-card-targetbar {
margin-top: -3.5px;
border-radius: 2.5px;
}
bar-card-targetmarker {
margin-top: -3.5px;
border-radius: 2.5px;
}
bar-card-value {
margin-top: -4.5px;
padding-left: 5px;
}
I am on 3.1.2.
- type: 'custom:bar-card'
positions:
icon: 'off'
indicator: 'off'
name: 'off'
entities:
- sensor.verbruik_douche_min_3
- sensor.verbruik_douche_min_2
- sensor.verbruik_douche_min_1
- sensor.verbruik_water_huidige_douche
direction: up
stack: horizontal
style: |-
ha-card {
height: 100%;
}
You should use the card height not CSS.
the oddest thing, after having updated to the latest bar-card I now see this error in the log, on a page without any reference to a bar-card config at all. In fact, its on all pagesā¦:
...../local/lovelace/resources/bar-card.js?v=3.1.2:5332:0 SyntaxError: Unexpected keyword 'export'
inspector Safari:
inspector Chrome:
could this be a bug in the bar-card somehow?
What do you mean?
Could you paste the code ?
- type: 'custom:bar-card'
positions:
icon: 'off'
indicator: 'off'
name: 'off'
entities:
- sensor.verbruik_douche_min_3
- sensor.verbruik_douche_min_2
- sensor.verbruik_douche_min_1
- sensor.verbruik_water_huidige_douche
direction: up
height: 100%
stack: horizontal
type: 'custom:bar-card'
entities:
- entity: sensor.example
- entity: sensor.example
- entity: sensor.example
- entity: sensor.example
positions:
icon: 'off'
indicator: 'off'
direction: up
stack: horizontal
height: 100%
This should work if youāre on 3.1.2.
But that is what i have? See my previous comment
Mmmz
Hard reloaded, cleared cache but still loads old version.
HACS sometimes does thatā¦ try downloading again. Is HACS up-to-date?
Ah yes itās been renamed to bar-card-markerbar, sorry I didnāt quite keep track of all the element changes very well. Iāve fixed this one in the docs and Iāll see if I have some time later to check the rest.
One thing Iām still not quite sure about is why youāre offsetting all the bars in CSS? If you want to reduce the padding around the bar itās much easier to just do this:
#states {
padding: 8px;
}
Also you can set the border radius of the bars using a theme variable.
answering myself for reference: missed the change to āmoduleā from ājsā in resources. Now loading and showing fine.
as posted on https://github.com/custom-cards/bar-card/issues/65#issuecomment-620572904, canāt we disable showing the expected entity icons? My entities use an entity_picture, and I dont want that displayed below the bars.:
