Remove (border) space of cards

hajo62 · May 12, 2020, 7:35pm

I’m using a picture-elements card and would like to display other cards (i.e. bar card) as shown in the screenshot.
How could I remove the white border around the bars?

Here my code:

elements:
  - entities:
      - entity: sensor.processor_use
      - entity: sensor.cpu_temperature
    positions:
      icon: 'off'
      indicator: 'off'
      name: inside
    style:
      left: 20%
      scale: 70%
      top: 70%
      width: 90%
      font-size: 20px
    type: 'custom:bar-card'
  - entity: sensor.uptime
    style:
      left: 71%
      top: 26%
    type: state-icon
  - entity: sensor.uptime
    prefix: 'UpTime: '
    style:
      color: white
      font-size: 150%
      left: 71%
      top: 36%
    title: text
    type: state-label
image: /local/images/RPi-card.png
type: picture-elements

tom_l · May 12, 2020, 7:40pm

Using the css element bar-card-background exposed by the card: https://github.com/custom-cards/bar-card#css-elements and card-mod.

hajo62 · May 12, 2020, 8:21pm

I’ve tried, but got it not to work.
When I add the |- as shown in the example, the left: and top: and other did not work anymore and the bar is mostly outside the card.
Might you have an example?

tom_l · May 12, 2020, 8:23pm

No, I’m hopeless at css.

hajo62 · May 12, 2020, 8:57pm

As I am…

callifo · May 13, 2020, 9:39am

card-mod and maybe, something like

                    style: |
                      ha-card {
                        background: none;
                        box-shadow: none;
                      }

tom_l · May 13, 2020, 11:03am

Missed the closing brace:

            style: |
              ha-card {
                background: none;
                box-shadow: none;
              }

callifo · May 13, 2020, 11:28am

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.

petro · May 13, 2020, 11:39am

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.

Mattias_Persson · May 13, 2020, 2:08pm

hajo62 · May 13, 2020, 7:59pm

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;
      }

petro · May 13, 2020, 8:31pm

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.

Mattias_Persson · May 13, 2020, 8:37pm

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

hajo62 · May 14, 2020, 1:28pm

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

petro · May 14, 2020, 1:30pm

Why not round the fill bar as well?

Mariusthvdb · May 14, 2020, 1:49pm

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

petro · May 14, 2020, 1:54pm

Mariusthvdb · May 14, 2020, 2:00pm

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:

hajo62 · May 14, 2020, 2:03pm

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

petro · May 14, 2020, 2:07pm

bar-card-currentbar, just need to adjust the background radius like you did with bar-card-backgroundbar.

      bar-card-currentbar {
        border-radius: 6pt;
      }