No, I’m hopeless at css.
As I am… 
card-mod and maybe, something like
style: |
ha-card {
background: none;
box-shadow: none;
}
Missed the closing brace:
style: |
ha-card {
background: none;
box-shadow: none;
}
I was going to say bad copy paste, but I actually missed the closing brace in my lovelace yaml… in every single one. Didn’t seem to complain but I’ll fix it anyway.
Picture elements is the hardest to mod when dealing with elements because the modifications need to be on picture-elements itself. It cannot go on the element itself because it has a ‘style’ field.
Unfortunately, you’ll have to figure out the correct selector, which can be extremely complicated. This post here has a solution for something similar. In your case, your ending adjustment will be { margin-bottom: 0px; } but coming up with the selector will be a chore.
1 Like
Thanks for that!
But as mostly the next question…
How would I modify style i.e. for the bar itself? I got as selector
#states > bar-card-row:nth-child(1) > bar-card-card > bar-card-background > bar-card-backgroundbar
That’s my style for the picture elements card:
style:
'#root > bar-card':
$: |
ha-card {background: none;
box-shadow: none;
text-shadow: 1px 1px #0005;
}
I set up your situation and I ended up with these:
style:
'#root > bar-card':
$: |
ha-card > #states > bar-card-row { margin-bottom: 0px; }
Not sure how to add a second selector to the same path.
style:
'#root > bar-card':
$: |
ha-card {
background: none;
box-shadow: none;
}
bar-card-name {
color: green;
}
You don’t have to dig for the selectors as they are documented
https://github.com/custom-cards/bar-card#css-elements
2 Likes
If someone is interested in my result:
elements:
- entities:
- entity: sensor.processor_use
max: 100
min: 0
name: CPU
severity:
- color: '#40bf40'
from: 0
to: 40
- color: '#ffde00'
from: 41
to: 80
- color: '#fd0000'
from: 81
to: 100
- entity: sensor.cpu_temperature
max: 100
min: 0
name: Temperatur
decimal: 0
severity:
- color: '#40bf40'
from: 0
to: 40
- color: '#ffde00'
from: 41
to: 80
- color: '#fd0000'
from: 81
to: 100
- entity: sensor.memory_use
max: 1024
min: 0
name: Memory
decimal: 0
severity:
- color: '#40bf40'
from: 0
to: 640
- color: '#ffde00'
from: 640
to: 768
- color: '#fd0000'
from: 768
to: 1024
- entity: sensor.disk_use
max: 30
min: 0
name: Disk
decimal: 0
severity:
- color: '#40bf40'
from: 0
to: 15
- color: '#ffde00'
from: 15
to: '22,5'
- color: '#fd0000'
from: '22,5'
- entity: sensor.swap_use
max: 1024
min: 0
name: Swap
decimal: 0
severity:
- color: '#40bf40'
from: 0
to: 640
- color: '#ffde00'
from: 640
to: 768
- color: '#fd0000'
from: 768
columns: 5
direction: up
width: 10px
height: 90px
positions:
icon: 'off'
indicator: 'off'
minmax: 'off'
title: outside
value: outside
name: outside
style:
left: 50%
top: 68%
width: 100%
scale: 100%
type: 'custom:bar-card'
- entity: sensor.uptime
prefix: 'UpTime: '
style:
color: white
font-size: 125%
left: 70%
top: 24%
title: text
type: state-label
image: /local/images/RPi-card.png
style:
'#root > bar-card':
$: |
ha-card {
background: none;
box-shadow: none;
}
bar-card-name {
color: white;
font-size: 100%;
font-weight: normal;
margin: 4px;
}
bar-card-backgroundbar {
border-shadow: 2pt;
margin-top: -2pt;
margin-left: -2pt;
border-radius: 5pt;
border-style: solid;
#background: rgba(255, 0, 0, 0.8);
background: black;
}
bar-card-value {
font-size: 125%;
color: white;
font-weight: bold;
margin: 4px;
}
bar-card-currentbar {
border-radius: 5pt;
}
type: picture-elements
3 Likes
Why not round the fill bar as well?
very nice indeed!
the top left picture of the raspberry is an overlay? I only have the image without it…
if not, could you please post that too?
restarting now to have the swap sensor created 
will need to see how to clip the txt of the last boot sensor, since it is overflowing the card right now
haha, yes, is another mem sensor. Didnt yet change it to the correct one and didnt set the max/mins correctly.
this is already better:
Very good idea!
Had not thought about that and need to figure out, how to do that. Did a lot of iterations…
Not an overlay. I combined two images with gimp.
bar-card-currentbar, just need to adjust the background radius like you did with bar-card-backgroundbar.
bar-card-currentbar {
border-radius: 6pt;
}
1 Like
Done and edited my posted code above.
yes, I used the identical 7pt, which shows fine too:
though I wish we could also set the top of the current bar to use a border-radius. Will ask Gluwc if that would be an option he’d consider.
That’s a tall order. He’s using linear gradient which does not have this ability. This request alone would require a rewrite of the entire bar.
1 Like