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

Right, thatā€™s why I mentioned that the layout of the paths in the inspector looked exactly the same. Iā€™m not sure how to change the child index to find my path.

1.The code should be posted by using a proper formatting - otherwise there could be 100500 possible reasons of ā€œwhy it does not workā€. Place whole code into triple ā€œ`ā€. (better to edit your post instead of posting a new one)

2.There are 3 possible ways to do a dynamic opacity:

  • ā€œconfig-template-cardā€ (CTC);
  • card-mod with variable;
  • card-mod with direct access to the element: goto 1st post in this thread ā†’ link at the bottom ā†’ styles for picture-elements.

3.You are using ā€œpicture-elementsā€ inside CTC. If it is only to get a dynamic opacity (i.e. dependently on some value) - then CTC is not needed since card-mod may use jinjia templates. Also, never ever place ā€œpicture-elementsā€ inside CTC - you will get glitches. Place into CTC only an element which you want to change dynamically.
Also, a template for opacity could be wrong, use ā€œparseFloat()ā€.
This is an off-topic & will NOT be discussed here, better discuss it in the dedicated CTC thread.

Update: check this.

1 Like

They are different for sun.sun & sensor.

Thanks lldarā€“I assumed that was my problem too, so I used the sensor for temperature and that works. Would two sensor paths be different? Sorry for all of the questions and I appreciate your help so much. Hereā€™s a screenshot of the code inspector with the working sensor.downstairs_temperature and sensor.fordpass_tirepressure that does not.

ha-state-icon the right Way to follow is

Three ways of dynamic Picture elements:

Š·Ńƒ

code
type: vertical-stack
cards:
  - type: entities
    entities:
      - input_number.test_level_1

  - type: horizontal-stack
    cards:

      - type: picture-elements
        title: static opacity
        image: /local/images/test/blue.jpg
        elements:
          - type: image
            image: /local/images/test/orange.jpg
            style:
              top: 50%
              left: 50%
              width: 50%
              opacity: 0.7

      - type: picture-elements
        title: dyn. opacity (CTC)
        image: /local/images/test/blue.jpg
        elements:
          - type: custom:config-template-card
            entities:
              - input_number.test_level_1
            element:
              type: image
              image: /local/images/test/orange.jpg
            style:
              top: 50%
              left: 50%
              width: 50%
              opacity: ${parseFloat(states["input_number.test_level_1"].state)/100}

  - type: horizontal-stack
    cards:

      - type: picture-elements
        title: 'dyn. opacity (card-mod #1)'
        image: /local/images/test/blue.jpg
        elements:
          - type: image
            image: /local/images/test/orange.jpg
            card_mod:
              style: |
                :host {
                  --my-opacity: {{(states('input_number.test_level_1')|int)/100}};
                }
            style:
              top: 50%
              left: 50%
              width: 50%
              opacity: var(--my-opacity)

      - type: picture-elements
        title: 'dyn. opacity (card-mod #2)'
        image: /local/images/test/blue.jpg
        elements:
          - type: image
            image: /local/images/test/orange.jpg
            card_mod:
              style: |
                hui-image {
                  opacity: {{(states('input_number.test_level_1')|int)/100}};
                }
            style:
              top: 50%
              left: 50%
              width: 50%
1 Like

Thank you very much for your help, now I understand what you meant even if I had done a search and didnā€™t quite understand it. Thank you

OFT the card you are working on looks really nice. I keep my fingers crossed for you and look for easier way to install it and translation to english :slight_smile:

type: horizontal-stack
cards:
  - type: picture-elements
    image: /local/images/panel/sfondo.png
    elements:
      - type: image
        image: /local/images/panel/colorpanelvertical.png
        card_mod:
          style: |
            :host {
              --my-opacity: {{(states('sensor.optimizer_voltage_1_1_1')|int)/100}};
            }
        style:
          top: 18%
          left: 11.8%
          width: 20.4%
          opacity: var(--my-opacity)
      - type: image
        image: /local/images/panel/colorpanelvertical.png
        card_mod:
          style: |
            :host {
              --my-opacity: {{(states('sensor.optimizer_voltage_1_1_2')|int)/100}};
            }
        style:
          top: 18%
          left: 88.8%
          width: 20.4%
          opacity: var(--my-opacity)
      - type: image
        image: /local/images/panel/colorpanelorizontal.png
        card_mod:
          style: |
            :host {
              --my-opacity: {{(states('sensor.optimizer_voltage_1_1_3')|int)/100}};
            }
        style:
          top: 56%
          left: 16.8%
          width: 33%
          opacity: var(--my-opacity)
      - type: image
        image: /local/images/panel/colorpanelorizontal.png
        card_mod:
          style: |
            :host {
              --my-opacity: {{(states('sensor.optimizer_voltage_1_1_4')|int)/100}};
            }
        style:
          top: 56%
          left: 50%
          width: 33%
          opacity: var(--my-opacity)
      - type: image
        image: /local/images/panel/colorpanelorizontal.png
        card_mod:
          style: |
            :host {
              --my-opacity: {{(states('sensor.optimizer_voltage_1_1_5')|int)/100}};
            }
        style:
          top: 56%
          left: 83%
          width: 33%
          opacity: var(--my-opacity)
      - type: image
        image: /local/images/panel/colorpanelorizontal.png
        card_mod:
          style: |
            :host {
              --my-opacity: {{(states('sensor.optimizer_voltage_1_1_6')|int)/100}};
            }
        style:
          top: 81%
          left: 16.8%
          width: 33%
          opacity: var(--my-opacity)
      - type: image
        image: /local/images/panel/colorpanelorizontal.png
        card_mod:
          style: |
            :host {
              --my-opacity: {{(states('sensor.optimizer_voltage_1_1_7')|int)/100}};
            }
        style:
          top: 81%
          left: 50%
          width: 33%
          opacity: var(--my-opacity)
      - type: image
        image: /local/images/panel/colorpanelorizontal.png
        card_mod:
          style: |
            :host {
              --my-opacity: {{(states('sensor.optimizer_voltage_1_1_8')|int)/100}};
            }
        style:
          top: 81%
          left: 83%
          width: 33%
          opacity: var(--my-opacity)
      - type: image
        image: /local/images/panel/panelsolar.png
        style:
          width: 100%
          top: 1%
          left: 0%
          transform: translate(0,0)
      - type: state-label
        entity: sensor.power_1_1_1
        style:
          top: 18%
          left: 12%
          font-size: 135%
      - type: state-label
        entity: sensor.power_1_1_2
        style:
          top: 18%
          left: 89%
          font-size: 135%
      - type: state-label
        entity: sensor.power_1_1_3
        style:
          top: 53%
          left: 84%
          font-size: 150%
      - type: state-label
        entity: sensor.power_1_1_4
        style:
          top: 53%
          left: 50%
          font-size: 150%
      - type: state-label
        entity: sensor.power_1_1_5
        style:
          top: 53%
          left: 17%
          font-size: 150%
      - type: state-label
        entity: sensor.power_1_1_6
        style:
          top: 79%
          left: 17%
          font-size: 150%
      - type: state-label
        entity: sensor.power_1_1_7
        style:
          top: 79%
          left: 50%
          font-size: 150%
      - type: state-label
        entity: sensor.power_1_1_8
        style:
          top: 79%
          left: 84%
          font-size: 150%
      - type: state-label
        entity: sensor.panel_1_oggi
        style:
          top: 28%
          left: 12%
      - type: state-label
        entity: sensor.panel_2_oggi
        style:
          top: 28%
          left: 89%
      - type: state-label
        entity: sensor.panel_3_oggi
        style:
          top: 60%
          left: 84%
      - type: state-label
        entity: sensor.panel_4_oggi
        style:
          top: 60%
          left: 50%
      - type: state-label
        entity: sensor.panel_5_oggi
        style:
          top: 60%
          left: 18%
      - type: state-label
        entity: sensor.panel_6_oggi
        style:
          top: 86%
          left: 18%
      - type: state-label
        entity: sensor.panel_7_oggi
        style:
          top: 86%
          left: 50%
      - type: state-label
        entity: sensor.panel_8_oggi
        style:
          top: 86%
          left: 84%

Yes, this is correct.

Thanks, but Iā€™m still not satisfied with the result. Itā€™s not about your code.
I need to figure out what correct value to insert. Thank you

I have another question, would it be possible to change the color of my image? with #3091F2 or fetch the color from a link?
if the image couldnā€™t change color how could i make a box that auto color from the link? Thank you

https://monitoringpublic.solaredge.com/solaredge-web/p/publicSystemData?reporterId=xxxxxxxxx&type=panel&activeTab=0&fieldId=xxxxxxx&isPublic=true&locale=it_IT

o

https://monitoring.solaredge.com/solaredge-apigw/api/sites/xxxxxxxxx/layout/logical

Screenshot 2022-12-21 at 12-06-06 https __monitoring.solaredge.com

I tried this, I transformed my image into SVG and in the code I put fill: red but it doesnā€™t work, it doesnā€™t turn red. For what reason?

  - type: image
    image: /local/images/panel/colorpanelvertical.svg
    style:
      top: 18%
      left: 11.8%
      width: 20.4%
      fill: red

I do not understand what is ā€œcolored imageā€ ))).
An image may be saturated, inversed, with changed brightness / contrast.
Try playing with this.

Was this in response to my issue? Was there more info you meant to add? Thx lldar!

In your post there was a screenshot from Code Inspector.
And I concluded that you were looking at a wrong element.
So - check ā€œha-state-iconā€ branch, it is different for different domains.

Awesome, I see now, I had to use ha-icon at the end of the path. My last question is why a card title is required for the card-mod code to run. When I remove the title, the colors revert to default.

Thank you!! I will donate lldarā€“much appreciate your help on this.

Could you elaborate?

Oh, thanks a lot))

Sureā€“if I set the title to empty, null, or remove it, the formatting goes away.


Post a SHORT code with one formatted element - whose element is lost with a title.

Update: it happens because a title is places inside a ā€œdivā€ element:
image

So if you DO need a title - just correct indexes (like ā€œ(2) ā†’ (3)ā€).