🔹 Card-mod - Add css styles to any lovelace card

[sender]

@sergio_pt

Clearly you haven’t even checked the examples there…

Clearly I cannot read or at least understand what I read :-). I can’t find an answer to my question there… at least not how I could use it.

@Mariusthvdb

so post that config here, and allow the community to help you.

This is my config:

Monitor 16:9

Test1 view - (in panel mode)
One Picture Elements Card Configuration
Picture used: 2748x1817 Pixel

Yaml for Picture Elements Card Configuration:

type: picture-elements
elements:
  - entity: sensor.ph
    style:
      color: blue
      left: 28.5%
      top: 18%
    type: state-label
    tap_action:
      action: more-info
  - entity: sensor.d1mini_01_sensor_1
    style:
      color: brown
      left: 58%
      top: 15%
    type: state-label
    tap_action:
      action: none
  - entity: sensor.esp32_02_22_humidity
    style:
      color: red
      left: 8%
      top: 36%
    type: state-label
    tap_action:
      action: more-info
  - type: state-icon
    entity: binary_sensor.pir_motion_sensor_toilet_01
    title: Toilet-01
    style:
      top: 53%
      left: 39%
      '--paper-item-icon-color': lightgreen
      '--paper-item-icon-active-color': red
  - type: state-label
    entity: counter.toilet_01_counter
    title: Toilet-01
    style:
      color: red
      top: 53%
      left: 39%
image: local/test1.png

Outcome:

Here I miss the bottom of the picture.

Test2 view - (in panel mode)
One Picture Elements Card Configuration
Picture used: 1421x1842 pixel

Yaml for Picture Elements Card Configuration:

type: picture-elements
image: /local/test2.png
style:
  transform: '‘translate(-50%, -50%)'
elements:
  - type: state-badge
    entity: sensor.d1mini_01_sensor_2_2
    style:
      top: 40%
      left: 20%

Outcome:

Here I miss half of the picture.

My question is:

@sender

I have a large floorplan picture in /local. It shows in my picture entity elements card which I have created in my lovelace view in panel mode. The problem I am facing is that this picture scales out of the screen, it is too big… so my question is how is can “scale” down that image to for example 50% of the screen or 80% or fit to the window or whatever is possible.

Is there an option to:

@sender

I would like to have a picture entity card with a large floorplan that currently does not fit in a browser windows in full panel mode. I want to know how I can scale such an image.

Since I have really tried so much it is not doable anymore to reproduce what I have tried.
In the end I have tried all kinds of wrong things (css, cards, mods, Code copy, etc.). So I tried to ask my question the other way around initially. By writing it down as above I hope I will be able to get some help on how to scale a large image so it always fits the screen (mobile, 16:9, other browsers, browser in other format !=16:9, etc.)

[sergio_pt]

I believe your issue is clear now.
And I believe the custom layout card is the solution for you.
Try to create a column or a grid with a column of 80% the screen size using:

thomasloven/lovelace-layout-card

Here is a great example of usage:

NdR91/NdR-TabletUI

[Amishman]

Thank you @KTibow! That worked perfectly.

[sender]

I think I have solved for now the
Edit I was too fast…

It is still not scaling:

I did the same as below…

Test1 view - (in panel mode) it now size along with the browser size. Thank you!

The second one

Test2 view - (in panel mode)

I cannot solve that. what I have done:

thomasloven/lovelace-layout-card

thomasloven/lovelace-layout-card

And then full panel mode with 1 picture Picture Elements Card Configuration with yaml:

But it keeps showing:

How can I size that to always fit the screen?

[sergio_pt]

To be clear, your problem is with the height, correct?
In that case, your examples above, you should define for the row size instead of column.

[celeritas0725]

Hi! May I know how can I make the pop up in the sidebar info looks like this — transparent with blurred back ground?

And the pop up in the dashboard looks like this?

Using the existing themes, it looks like this - dark box:

I have copied and pasted from IOS Dark Theme to Mattias’ themes.yaml but to no avail.

[sender]

@sergio_pt

To be clear, your problem is with the height, correct?
In that case, your examples above, you should define for the row size instead of column.

Yes, correct, how and where should I do that?

[sergio_pt]

Try switching the same configuration you tested before, but defining % for rows.

Some experimentation with other cards will be very usefull.

[sender]

Sory, I really do not know now what to do… should I change this:

layout:
  grid-template-columns: auto 30px 25%
  grid-template-rows: auto
  grid-template-areas: |

to this

layout:
  grid-template-columns: auto 30px 25%
  grid-template-rows: auto 30px 25%
  grid-template-areas: |

because that does not do anything. sorry I am not a programmer but wanting to learn. And this is too steap leaning for now… appreciate all the help I can get…

[Alban]

Thanks for this job

[Ildar_Gabdullin]

@Ildar_Gabdullin

The font is changed but the text is not centrally aligned.

Found out a solution:

Changing a name’s width and margin-top are required.

      - entity: sensor.cleargrass_1_co2
        name: name font for a very long name
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .title {
                    margin-top: 11px !important;
                  }
          .: |
            :host {
              --ha-label-badge-title-font-size: 7px;
              --ha-label-badge-title-width: 48px;
            }

Added it here (“Changing a font size for the name” part):
Badges: different styling

[KTibow (Kendell R)]

Where did you get those screenshots?

[celeritas0725]

Hi! Those screenshots came from my Home Assistant based on the projects/contributions of Mattias_Persson, kalkih, basnijholt and the others.

[CDRX2]

Hi all,

I’m trying to change the margin in the following screenshot:

I’ve tried many variations of code. Here’s a MWE with the latest attempt at the bottom:

    type: 'custom:layout-card'
    layout_type: custom:grid-layout
    grid-template-columns: 25% 25% 25% 25%
    grid-template-rows: auto
    grid-template-area: |
      "1" "1" "1" "1"
      "2" "2" "2" "2"
      "3" "3" "3"
      "4" "4" "4" 
      "5" "5" "5"
      "6" "6" "6" 
    grid-gap: 0px
    cards:
      - type: 'custom:button-card'
        template: media_service
        variables:
          name: Plex
          service: media_player.select_source
          entity: media_player.living_room_tv
          type: source
          data: Plex
          picture: /local/ui/btns/plex.png 
        view_layout:
          grid-area: 1
      - type: 'custom:button-card'
        template: media_service
        variables:
          name: Partage
          service: media_player.select_source
          entity: media_player.living_room_tv
          type: source
          data: Screen Share
          picture: /local/ui/btns/screenshare.png
        view_layout:
          grid-area: 1
      - type: 'custom:button-card'
        ...      
      - type: 'custom:button-card'
        template: media_volume_vertical
        variables:
          service: media_player.volume_up
          picture: /local/ui/btns/volume_up_vertical.png
          top: 20%
        view_layout:
          grid-column: 4
          grid-row-start: 3
          grid-row-end: span 2
      - type: 'custom:button-card'
        template: media_volume_vertical
        variables:
          service: media_player.volume_down
          picture: /local/ui/btns/volume_down_vertical.png
          top: 0%
        view_layout:
          grid-column: 4
          grid-row-start: 5
          grid-row-end: span 2
    card_mod:
      style:
        $:
          grid-layout:
            $: 
              div#root:
                button-card: |
                  #root > * {
                    margin: 0px !important;
                  }

Any ideas or tips?

[KTibow (Kendell R)]

I’m actually the person who introduced that variable. Just set --masonry-view-card-margin.

[thomasloven (Thomas Lovén)]

Yep. And I made sure to use it in layout-card too.

[CDRX2]

Worked like a charm, thank you! Quick follow-up question: how would this behave when used as an element on a picture-element card? As I understand it, masonry view is not applicable to said elements or am I mistaken?

[KTibow (Kendell R)]

Why would you want to add a margin to that? masonry-view-card-margin is meant for themes to customize the margin between cards.

[CDRX2]

Actually, I have two button-cards with picture-entites next to each other. The actual pictures are made to fit together, so setting masonry-view-card-margin on those specific cards allows for the following look to be achieved:

The code I wrote is used as an !include on a basic yaml view, but will also serve on top of a picture-elements card on another view, hence my question.

[ASNNetworks]

Not really on-topic, but since there are experienced people with css and HA, I think this is the best place to ask. It indirectly has to do with card-mod though. So If I have a dashboard with a lot of CSS stylings, custom cards (like RomRider’s button-card) and all autogenerated using auto-entities.

What would be the bottleneck in rendering the dashboard: strictly the device accessing it, like the tablet or smartphone. Or the device running HA (like a Raspberry Pi 4). My first thought was the device accessing HA, since it’s a webpage and the device needs to render it. But at the same time, HA needs to output everything and acts as a server.

I ask this, because my performance has been horrible over the past month. So much so, that some cheaper tablets completely refuse the update the dashboard or load completely. Lately even my desktop (12 core Ryzen, 32GB RAM) has also been struggling.

I use a lot of css stylings and card-mod, browser_mod, button-card, decluttering card and auto-entities. Does card-mod have a huge impact on performance when combining with those cards? Two months ago performance of my dashboard was miles better. Nothing changed, only updated the cards used.

Sorry if this is the wrong place to ask. I first wanted to ask if people were having performance issues using card-mod, but then thought that perhaps it’s not card-mod, but something else.