Styling elements in Picture elements card: a small tutorial

Do you have card-mod installed?

Create a design in MS paint or something. Then you may choose a suitable element.
Do not forget about a possibility of using custom cards as elements; for instance, you may end up using custom:button-card for displaying complex data and/or tap_action.

Yes I’ve installed it, I figured your example wouldn’t work without it.
But is there a way to be sure the mod is actually working ?

In case of using Chrome - open Code Inspector ; or whatever it is called in your browser.
Check the INFO panel, there must be a message about card-mod and it’s version.
Probably, if you say that my example did work - then it is really installed.
Now go to card mod thread - 1st post - link at the bottom - consolidation post - find an article about different clients

1 Like

Indeed, I have CARD-MOD 3.2.0 IS INSTALLED

Oh thank you so much !!!
Finally found THE post that explained everything !!!

And now it work depending of the screen size.
Thank you again :slightly_smiling_face:

1 Like

Sorry, something like this

Ok, the card must contain:

  • main background image - satellite image
  • 3 elements.

And now you should decide about these elements - absolutely same questions when designing any UI:

  • do you need displaying data on them? Is it one sensor or many? Is it some sensor’s state or attribute - or is it some processed data based on other sensor/sensors? Is it “text”, “text + icon”, “icon”? Any graphs, any tables?
  • do you need any tap_action for an element? A different actions for different parts of an element?

What you may need is custom:button-card; or it could be a stack of different cards; or it could be a simple markdown card.

How to connect a font downloaded from the Internet?

That’s awesome stuff.
Thank you very much for putting this together!
You made my day :smiley:

1 Like

Hi, how is it possible to scale the icon to full width of the picture element container?

I have overlaying images as svg icon files, which change the color based on state. Using width defined in px it is possible to adjust the elements to one device size, but on the other (or e.g. in landscape mode) the width of the pictures element card is different.


Give a SHORT code with an icon you wish to stretch.

Hi … the example is simple.
I have one svg image with the house plan … e.g.

The size of this svg is 1000px x 500px. It is transparent with white path to be able to colorize it simply with css.

Then I have several svg icons of the same size and only one element e.g. 1 window, again white to be able to add color to it. These icons are put one over the other. When the window is closed, I colorize the window transparent, so it is invisible, when it is open I colorize it blue.
Then the result is following

It could be done as images, but then it is not possible to colorize it simply with css. Therefore I want to use icons.
Unfortuntely I am not a css expert, so I dont know how to tweak it to stretch the icon to the size of the element card. Using px moving and defining size works with one device size, but using different device or landscape mode the result is incorrect.

Other thing is that it works with rectangular icons (same height and width), which is not my case.

Sorry, not clear.
What do you mean by “icons”? Do not see any icons on your picture.

The whole picture is an svg file which is put into UI as icon not image. e.g. fapro: floor_plan and fapro: window_livingroom and using card_mod is colorized.

It could be as well any icon eg. mdi:home.

The main picture is empty = transparent.

All picture elements are icon, all are places one over the other, have the same dimension and their visibility is controled via color - if set to some color = visible, if color is set to transparent = invisible

Or the question could be formulated: How to automatically stretch an icon in pisture elements to the width of underlaying main picture.

Thank you so much IIdar for these explanations. I was going insane trying to position things around and that helped me a LOT.

Here’s couple of things that I’ve noted.
After trying a bunch of different cards sizes, I still had issues with a good 20px being off when resizing the browser. I was able to fix that by:

settings a fixed width of 280 in the view.

And also forcing the width of the card to 410px.
here’s the code:

type: picture-elements
style: |
  ha-card {
    width: 410px !important;
  - type: image
    image: /local/smimages/testfg3.png
      left: 0%
      top: 0%
      transform: translate(-8px,0px) scale(0.5,0.5)
image: \local\smimages\testbg4.png

Changing the value over or under 410px was causing differences between the browser and my phone screen. It felt like the card was to wide but you could only see it when placing elements over it.

Now, the funny thing about that is that if I set the translate to (0,0) and play with the top and left percentage, the card get scaled. Here it is at left: 80%

Here it is at left: 0%

I have no idea why it’s behaving this way, but if I set the top and left to 0% and only play with the translate it works…

Anyway, I’m happy that I came across this post but I’m wondering if being able to set a fixed width and height in this card without card mod might help? this way you could refer to positions in pixels instead of percentage.


IMHO there are some limitations for resizing SVG; in my tests icon’s width/height could not be bigger than 300px - unless I manually set it bigger than 300px.

I try to modify color of “state-label” in if statement, but doesn’t work. Could You anybody help me?

it does work:

     - type: state-label
        entity: sensor.remaning_time
          color: '#8df427'
          font-family: segment7
          font-size: 50px
          left: 100%
          top: 87%
          transform: translate(-100%,-50%)

it doesn’t work:

      - type: state-label
        entity: sensor.remaning_time
        style: |
          {% if is_state('sensor.remaning_time', '0:-1') %} color: '#555'
          {% else %} color: '#8df427'
          {% endif %} 
          font-family: segment7
          font-size: 50px
          left: 100%
          top: 87%
          transform: translate(-100%,-50%)

It will not because you are doing smith which is not possible.
Templates are only supported in card-mod.

Thanks a lot.

  - type: state-label
    entity: sensor.remaning_time
      font-family: segment7
      font-size: 50px
      left: 100%
      top: 55%
      transform: translate(-100%,-50%)
      style: |
        :host {
          {% if is_state('sensor.remaning_time', '0:-1') %} color: #555
          {% else %} color: #8df427
          {% endif %}