Remove (border) space of cards

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 :wink:
will need to see how to clip the txt of the last boot sensor, since it is overflowing the card right now

image

haha, yes, is another mem sensor. Didnt yet change it to the correct one :wink: 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.
RPi-card

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

had to look that up… :wink:

well, it that’s the case, he probably won’t consider it viable… no harm done, it would just be an further embellishment of an already very nice card

anyone seeing this error to, using the new card_mod 2.0.2:

looking a bit odd too:

would this be the card_mod, barcard, or something else…

update

after some testing I can report it is the update from card_tools from 2.0.0 to a higher version causing this. back on 2.0.0 and the style works again. Have reported other issues too with the new card_mod, so hopefully this will soon be fixed.

Might you pls. post the solution? I tried some of the issue, but haven’t figured out yet.

delete the spaces in the line:

style:
  '#root>bar-card':
1 Like

was there any update / fix yet to this card formatting issue? (also doesn’t seem to render well on android app)