search for border-radius: You’ll see plenty of examples. edwardtich posted one with border-radius: 2.5px throughout his card just 24 days ago.
Hi there,
perhaps someone could shed a light:
I’m using the severity option in my card (just one bar).
What i am trying to achive is, that the background color of the bar ist NOT a toned down version of the actual bar color (that changes from red over amber to green) but to be a consistant grey.
Does anybody know a solution for that?
Thanks in advance!
You will have to learn css & card-mod to achieve this.
I am using card-mod already with this card (to round corners etc.)
I juts cannot find a solution for keeping the changing background color a consistant gray while using severity …
severity:
- color: "#FF2529"
from: 0
to: 25
- color: orange
from: 26
to: 50
- color: "#66B750"
from: 51
to: 100
card_mod:
style: |-
bar-card-value {
margin-right: auto;
font-size: 13px;
font-weight: bold;
}
bar-card-backgroundbar, bar-card-currentbar {
border-radius: 12px;
margin-top: 9px;
}
bar-card-contentbar {
margin-top: 9px;
margin-left: 8px;
}
I am not 100% what you are looking for, but your severity code has nothing to do with the background color of the bar.
card_mod:
style: |-
bar-card-value {
margin-right: auto;
font-size: 13px;
font-weight: bold;
}
bar-card-backgroundbar {
border-radius: 12px;
margin-top: 9px;
background: grey !important;
opacity: 50%;
}
bar-card-currentbar {
border-radius: 12px;
margin-top: 9px;
}
bar-card-contentbar {
margin-top: 9px;
margin-left: 8px;
}
Ildar_Gabdullin’s advice is sound!
2 Likes
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.
1 Like
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