You’re both right about the learning! Always will do.
I was looking for this:
bar-card-backgroundbar {
background: grey !important;
opacity: 50%;
i missed (the knowedge about) the !important - override 
Without this, the background-color ist still changing according to the severity colors.
Thank you very much, this is the solution.
Would you mind sharing the full code for that card? I cant seem to get it to work
I’m trying to combine config-template-card with bar-card so that I can add the actual day of the week to my card. I’m not sure what I’m doing wrong, but I can’t get the day to show up properly. When I post the day code into the template editor in Developer tools it works properly. When I put it in this card, it just shows [object Object].
type: custom:config-template-card
entities:
- sensor.tree_pollen_0d
- sensor.tree_pollen_1d
- sensor.tree_pollen_2d
- sensor.tree_pollen_3d
- sensor.tree_pollen_4d
card:
type: custom:bar-card
entities:
- entity: sensor.tree_pollen_0d
name: ${ (now()+timedelta(days=0)).strftime('%A') }
unit_of_measurement: []
- entity: sensor.tree_pollen_1d
name: Tomorrow
unit_of_measurement: []
- entity: sensor.tree_pollen_2d
name: Day 3
unit_of_measurement: []
- entity: sensor.tree_pollen_3d
name: Day 4
unit_of_measurement: []
- entity: sensor.tree_pollen_4d
name: Day 5
unit_of_measurement: []
title: Tree
direction: up
height: 100px
stack: horizontal
severity:
- color: Green
from: 0
to: 14
- color: Yellow
from: 15
to: 89
- color: Orange
from: 90
to: 1499
- color: Red
from: 1500
to: 1000000
min: 0
max: 3000
animation:
state: 'on'
speed: 5
You cannot use jinjia inside JS code.
Rewrite code using JS.
Well, needless to say my script-kiddy JS skills are failing me. This won’t even give me an attempt at rendering the card. What am I missing?
type: custom:config-template-card
variables:
- states['sensor.date'].state
- dayoftheweek0:
value_template: >-
{{
['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'][new Date().getDay()]
}}
- dayoftheweek1:
value_template: >-
{{
['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'][new Date().getDay()+1)
% 7] }}
entities:
- sensor.tree_pollen_0d
- sensor.tree_pollen_1d
- sensor.tree_pollen_2d
- sensor.tree_pollen_3d
- sensor.tree_pollen_4d
card:
type: custom:bar-card
entities:
- entity: sensor.tree_pollen_0d
name: ${dayoftheweek0}
unit_of_measurement: []
- entity: sensor.tree_pollen_1d
name: Tomorrow
unit_of_measurement: []
- entity: sensor.tree_pollen_2d
name: Day 3
unit_of_measurement: []
- entity: sensor.tree_pollen_3d
name: Day 4
unit_of_measurement: []
- entity: sensor.tree_pollen_4d
name: Day 5
unit_of_measurement: []
title: Tree4
direction: up
height: 100px
stack: horizontal
severity:
- color: Green
from: 0
to: 14
- color: Yellow
from: 15
to: 89
- color: Orange
from: 90
to: 1499
- color: Red
from: 1500
to: 1000000
min: 0
max: 3000
animation:
state: 'on'
speed: 5
Nevermind, I figured it out. Skip making the array a variable and just plug it into the name. I’m sure there’s some fancy way to increment the day of the week with a calculation, but honestly it was easier to just adjust the order in the array for each subsequent day. I also ended up shortening the days to three letters since Wednesday and Saturday spilled outside of their respective bars.
Posting the code for posterity.
type: custom:config-template-card
variables:
- states['sensor.date'].state
entities:
- sensor.tree_pollen_0d
- sensor.tree_pollen_1d
- sensor.tree_pollen_2d
- sensor.tree_pollen_3d
- sensor.tree_pollen_4d
card:
type: custom:bar-card
entities:
- entity: sensor.tree_pollen_0d
name: ${
['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][new Date().getDay()]
}
unit_of_measurement: []
- entity: sensor.tree_pollen_1d
name: ${
['Mon','Tue','Wed','Thu','Fri','Sat','Sun'][new Date().getDay()]
}
unit_of_measurement: []
- entity: sensor.tree_pollen_2d
name: ${
['Tue','Wed','Thu','Fri','Sat','Sun','Mon'][new Date().getDay()]
}
unit_of_measurement: []
- entity: sensor.tree_pollen_3d
name: ${
['Wed','Thu','Fri','Sat','Sun','Mon','Tue'][new Date().getDay()]
}
unit_of_measurement: []
- entity: sensor.tree_pollen_4d
name: ${
['Thu','Fri','Sat','Sun','Mon','Tue','Wed'][new Date().getDay()]
}
unit_of_measurement: []
title: Tree
direction: up
height: 100px
stack: horizontal
severity:
- color: Green
from: 0
to: 14
- color: Yellow
from: 15
to: 89
- color: Orange
from: 90
to: 1499
- color: Red
from: 1500
to: 1000000
min: 0
max: 3000
animation:
state: 'on'
speed: 5
I have the same challenge to get the day name as entity name in the bar card. How can this be done easily with JS code? I dont get it work with config-template-card. Want to have the solcast_forcast_day_{3-7} reverted into normal day name simular to your solution.
Did you try copying the relevant code that I posted above? You’ll need to have the bar card installed as well as config template card.
Yes have installed them both. And used your same code name example.
But with a normal name, its shows the bar-card, but when I put the code instead of a name, the bar-card is not shown, so it process the code wrong. Running 2024.3.2 (but a test pi with 2024.4.0 it is also not working).
The resources and correctly added by HACS, and also tried to restart HA. Any ideas?
Post your code and a screenshot of the card. I’m literally just a script kiddy, but maybe we can figure something out.
Can anyone give an example of making rounded corners? After 2024.4.0 all my cards seem to need to be manually adjusted or the rounded corners are missing.
type: custom:config-template-card
variables:
- states['sensor.date'].state
entities:
- sensor.solcast_pv_forecast_forecast_today
- sensor.solcast_pv_forecast_forecast_tomorrow
- sensor.solcast_pv_forecast_forecast_day_3
- sensor.solcast_pv_forecast_forecast_day_4
- sensor.solcast_pv_forecast_forecast_day_5
- sensor.solcast_pv_forecast_forecast_day_6
- sensor.solcast_pv_forecast_forecast_day_7
card:
type: custom:bar-card
decimal: 0
column: 7
max: 40
min: 0
severity:
- color: rgb(44,153,234)
from: 0
to: 1
#...skipped output for coloring
direction: up
height: 150px
width: 24px
positions:
indicator: 'off'
value: inside
title: 'off'
name: inside
icon: 'off'
animation:
state: 'on'
card_mod:
style: |-
.card-header {
font-size: 18px;
}
bar-card-value, bar-card-name {
font-size: 12px;
transform-origin: 0 0;
transform: rotate(270deg);
text-shadow: 1px 1px #0008;
white-space: nowrap;
}
bar-card-value {
margin-right: auto;
margin-left: 6px;
margin-bottom: auto;
margin-top: auto;
}
bar-card-name {
margin-right: auto;
margin-left: 0px;
margin-bottom: -130px;
margin-top: 130px;
right: 20px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px;
border: 1px solid #DDD9;
}
stack: horizontal
title: Forecast
entities:
- entity: sensor.solcast_pv_forecast_forecast_today
name: Today
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
name: Tomorrow
- entity: sensor.solcast_pv_forecast_forecast_day_3
name: ${ ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][new Date().getDay()] }
- entity: sensor.solcast_pv_forecast_forecast_day_4
name: Day 4
- entity: sensor.solcast_pv_forecast_forecast_day_5
name: Day 5
- entity: sensor.solcast_pv_forecast_forecast_day_6
name: Day 6
- entity: sensor.solcast_pv_forecast_forecast_day_7
name: Day 7
Just trying one thing at a time here (plus I’m on mobile right now so I can’t test myself). Try this first.
type: custom:config-template-card
variables:
- states['sensor.date'].state
entities:
- sensor.solcast_pv_forecast_forecast_today
- sensor.solcast_pv_forecast_forecast_tomorrow
- sensor.solcast_pv_forecast_forecast_day_3
- sensor.solcast_pv_forecast_forecast_day_4
- sensor.solcast_pv_forecast_forecast_day_5
- sensor.solcast_pv_forecast_forecast_day_6
- sensor.solcast_pv_forecast_forecast_day_7
card:
type: custom:bar-card
decimal: 0
column: 7
max: 40
min: 0
severity:
- color: rgb(44,153,234)
from: 0
to: 1
#...skipped output for coloring
direction: up
height: 150px
width: 24px
positions:
indicator: 'off'
value: inside
title: 'off'
name: inside
icon: 'off'
animation:
state: 'on'
card_mod:
style: |-
.card-header {
font-size: 18px;
}
bar-card-value, bar-card-name {
font-size: 12px;
transform-origin: 0 0;
transform: rotate(270deg);
text-shadow: 1px 1px #0008;
white-space: nowrap;
}
bar-card-value {
margin-right: auto;
margin-left: 6px;
margin-bottom: auto;
margin-top: auto;
}
bar-card-name {
margin-right: auto;
margin-left: 0px;
margin-bottom: -130px;
margin-top: 130px;
right: 20px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px;
border: 1px solid #DDD9;
}
stack: horizontal
title: Forecast
entities:
- entity: sensor.solcast_pv_forecast_forecast_today
name: Today
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
name: Tomorrow
- entity: sensor.solcast_pv_forecast_forecast_day_3
name: ${
['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][new Date().getDay()]
}
- entity: sensor.solcast_pv_forecast_forecast_day_4
name: Day 4
- entity: sensor.solcast_pv_forecast_forecast_day_5
name: Day 5
- entity: sensor.solcast_pv_forecast_forecast_day_6
name: Day 6
- entity: sensor.solcast_pv_forecast_forecast_day_7
name: Day 7
Same result and afterwards the code will me presented back in one line.
Alright. Nuclear option it is. Try this.
type: custom:config-template-card
variables:
- states['sensor.date'].state
entities:
- sensor.solcast_pv_forecast_forecast_today
- sensor.solcast_pv_forecast_forecast_tomorrow
- sensor.solcast_pv_forecast_forecast_day_3
- sensor.solcast_pv_forecast_forecast_day_4
- sensor.solcast_pv_forecast_forecast_day_5
- sensor.solcast_pv_forecast_forecast_day_6
- sensor.solcast_pv_forecast_forecast_day_7
card:
type: custom:bar-card
entities:
- entity: sensor.solcast_pv_forecast_forecast_today
name: Today
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
name: Tomorrow
- entity: sensor.solcast_pv_forecast_forecast_day_3
name: ${ ['Tue','Wed','Thu','Fri','Sat','Sun','Mon'][new Date().getDay()] }
- entity: sensor.solcast_pv_forecast_forecast_day_4
name: Day 4
- entity: sensor.solcast_pv_forecast_forecast_day_5
name: Day 5
- entity: sensor.solcast_pv_forecast_forecast_day_6
name: Day 6
- entity: sensor.solcast_pv_forecast_forecast_day_7
name: Day 7
Hello, I tried to install bar card today and the UI config is totally broken, I can not configure anything, add entities, etc… What is wrong?
Thanks.
That I was trying before. Not working. Seems really something wrong in this line. It will cause the hole graph is not shown. Really weird.
I’m sorry, I wasn’t clear. Make a card using just the code that I posted above (the nuclear option). This is just a bare bones test card to figure out where the trouble is. It’s not intended to be your final pretty card. If it works, then the problem is somewhere in the rest of your code. If it doesn’t, then there’s something wrong behind the scenes.
Nope is not working. The HACS resources are correctly installed ‘custom-template-card’. I even uninstalled and reinstalled it again to be sure that the card is available.
Alright. There’s something programmatically wrong with the install. I’m not saying you did something wrong. But something isn’t playing nice in the background. And that’s way outside my league.