šŸ”¹ Card-mod - Add css styles to any lovelace card

Another ā€œmonster threadā€. Simple question, might be harder answer, hope notā€¦

I want to ā€œscaleā€ a large picture that is not fitting on a screen and does not scale properly in a picture entity card. Is there any example code I can (re)use?

Thanks

Not wanting to try and find an answer first yourself is one thing, but wanting the community to figure out what you want is a bit much to ask I fear.

If youā€™d start giving us a clue and maybe even some first attempts of a config, that might increase your chances at getting some help hereā€¦

1 Like

Ehmā€¦ 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. It that clear enough :)?

Edit: this was not meant to be snarky

No because you are asking people to write a card for you from scratch while making no effort yourself and not showing what you have tried or any screenshots no showing your problem. Is that clear enough for you? (Being snarky with people trying to help you wonā€™t end well)

Wow, that is not meant to be so.

I have tried so much, I donā€™t even know what to show. I really do not know another way of asking what I would like to achieve.

From another angleā€¦

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.

Since I have really tried so much and in the end I only found 1 solution in the forum panels from someone that has put a lot of space around the plan to make the picture actually fit. I did that and that works, but it does not properly display on a mobile or scales when using on another resolution screen.

So sorry if I am asking the question in a wrong way, but I would like to know what the correct way to do this since I can not find any source, code, solution, whatever that solves my problem.

Have you checked šŸ”¹ Layout-card - Take control of where your cards end up ?

Yes I have. But I think due to fact I want to use panel mode I have no issue with card placement, it is just 1 card which is full panel but the (picture in the) panel is too big :slight_smile:

If you read the docs, you can create a card that takes full space without using panel modeā€¦ā€¦

Yes but can I use a lovelace Picture Elements Card Configuration in that?

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

Clearly you havenā€™t even checked the examples thereā€¦
Answer: yes you can.

So what is the intended behavior? What is currently happening?

I thought I was following the doc but I must have something wrong. I am trying to modify a couple of CSS variables.

Here is my config:


              - type: light
                hold_action:
                  action: none
                entity: light.master_bedroom_light
                name: Master Bedroom
                card_mod:
                  style: |
                    ha-card {
                      --font-size: 1.7rem;
                      }

If Iā€™m reading the inspector right, it appears as thought the card mod is being applied to the ha-card but in the wrong place.

Is anybody able to see what Iā€™m doing wrong?

Change that to --name-font-size: 1.7rem !important;.

I posted the picture:
ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ
The font is changed but the text is not centrally aligned.

Spot on, thank you so much. Have just learnt so much from your post that you linked.

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.

This is my config:

Monitor 16:9

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

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
image

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:

Is there an option to:

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.)

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:

Here is a great example of usage:

1 Like

Thank you @KTibow! That worked perfectly.

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:




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?