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

[sheminasalam]

Trying to do a simple by studying your examples but no sucess. hope you can help. I have the following multiple entity row card inside swipe card

type: custom:swipe-card
reset_after: 10
cards:
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: binary_sensor.terrace_door
        secondary_info:
          attribute: battery
          name: Battery
          unit: 'V'

Now this looks like

I want to change the color of the whole secondary line in accordance with value of the battery %. Red when below 10
yellow when between 10 and 50
green above 50

[Ildar_Gabdullin]

1st post → link at the bottom → styles for “multiple-entity-row”.

@sheminasalam

in accordance with value

Use jinjia templates.

[sheminasalam]

tried but not able to pull it off.

[arganto]

Show your try and we’ll figure out, what was/is wrong.

[sheminasalam]

I have checked the example and in it instead of attribute, the last_changed is used and so corresponding tag in style. what would be the tag for the attribute battery in my code? I am not able to get that.

[Ildar_Gabdullin]

If secondary_info is not a relative time - then there will be no a corresponding “relative time” element, so apply a style to the parent element. Use Code Inspector.

Seriously, w/o personal attempts a user cannot learn anything. These examples are not for thoughtless copy/paste. Use this as a starting point:

  - type: entities
    entities:
      - type: custom:multiple-entity-row
        style:
          hui-generic-entity-row $: |
            .info.pointer .secondary {
              color: red;
            }
        entity: sun.sun
        entities:
          - entity: sun.sun
        name: Colored secondary_info
        secondary_info: xxxx

[majkers]

Hi guys. Any help with styling selectem div?

It is markdown card with ha-alert. Too many shadow roots for me to make it work…

Tried this, but doesn’t work:

    ha-markdown$ ha-alert$: |
      div.icon.no-title {
        color: red:  
      }

[ronschaeffer]

Answering my own question in case anyone else is trying to do the same…

It was just basic formatting/indentation thwarting me. This works:

card_mod:
  style:
    mushroom-state-info$: |
      .secondary:after {
        content: " | {{ state_attr(state_attr(config.entity, "active_child"), "friendly_name") }} + {{((state_attr((state_attr(config.entity, 'active_child')), 'group_members'))|list|count)-1 }}"
      }
    .: |
      ha-card {
        background: black; 
      }

[abenedet (Alex)]

I’ve managed to create this vertical stack card and have been able to style the elements within it. However, I’m having an issue getting my card_mod styles to apply to the entire vertical stack (see code at the bottom). I’ve tried numerous things but cannot get it to work. Any ideas what’s wrong with my code?

Here’s how the card looks currently. Ideally the background color changes to #457863.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: |2-
                 {%- if now().hour < 12 -%}Morning
                 {%- elif now().hour < 18 -%}Afternoon
                 {%- else -%}Evening{%- endif -%}, {{user}}
    subtitle: >-
      ♻️ {{state_attr('calendar.bins', 'message')}} on {{
      as_timestamp(state_attr("calendar.bins","start_time") |
      default(now(),true) )| timestamp_custom('%-d %b') }}
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            :host {
              padding-top: 10px;
              padding-left: 10px;
              padding-bottom: 25px;
              --ha-card-background: white;
            }
        chips:
          - type: action
            icon_color: red
            tap_action:
              action: navigate
              navigation_path: media-control
            icon: mdi:remote
            hold_action:
              action: none
            double_tap_action:
              action: none
          - type: action
            icon_color: blue
            tap_action:
              action: navigate
              navigation_path: audio
            icon: mdi:radio
          - type: action
            icon_color: blue-grey
            icon: mdi:radio
            tap_action:
              action: navigate
              navigation_path: media-settings
          - type: action
            icon_color: amber
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: mdi:lightbulb-group
            tap_action:
              action: navigate
              navigation_path: all-lights
          - type: action
            icon_color: green
            icon: mdi:timeline-clock
            hold_action:
              action: none
            double_tap_action:
              action: none
            tap_action:
              action: navigate
              navigation_path: automations
        alignment: justify
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-person-card
        card_mod:
          style: |
            :host {
              padding-left:10px;
              --ha-card-background: #123456;
            }
        entity: person.alexander_benedet
        fill_container: true
        icon: mdi:face-man
        tap_action:
          action: navigate
          navigation_path: dan
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-person-card
        card_mod:
          style: |
            :host {
              padding-left:10px;
              --ha-card-background: #292589;
            }
        entity: device_tracker.nancy_phone
        fill_container: true
        icon: mdi:face-woman
card_mod:
  style: |
    ha-card {
      padding-left: 25px;
      padding-right: 25px;
      padding-bottom: 25px;
      background: #457863;
    }

[arganto]

The stack-cards don’t have a ha-card-element. So you can only style them (and any other card without ha-card element) with putting the cards into other cards with such an element. E.g. either with custom:mod-card or with HACS hui-element.

[stepsolar]

Hi, I’m not an expert so I’m asking for your help with a card.
I created a card to visualize the solar panels with solardge optimizers (link GitHub - stepsolar/hassio-package-panel-solar: Package Panel Solar Optimizer Solaredge Home Assistant) the blue color of the panels must change in density based on the energy broduction during the day as per solardge dashboard. What I’ve done for now is to use the transparency of the blue panel using the voltage value of the optimizer. But not only satisfied because I don’t think SolarEdge does this in its dashboard, now I’ve also created percentage sensors of the panels based on their instantaneous production, but I can’t enter this value for the transparency of the blue panel, yes because the opacity and between 0 and 1 not as a percentage. Is there a way to transform the opacity value between 0 and 1 into a percentage between 0% and 100%? Thank you
I attach some photos

Solar

code

type: custom:config-template-card
variables:
  - states['sensor.optimizer_voltage_1_1_1'].state
  - states['sensor.optimizer_voltage_1_1_2'].state
  - states['sensor.optimizer_voltage_1_1_3'].state
  - states['sensor.optimizer_voltage_1_1_4'].state
  - states['sensor.optimizer_voltage_1_1_5'].state
  - states['sensor.optimizer_voltage_1_1_6'].state
  - states['sensor.optimizer_voltage_1_1_7'].state
  - states['sensor.optimizer_voltage_1_1_8'].state
entities:
  - sensor.optimizer_voltage_1_1_1
  - sensor.optimizer_voltage_1_1_2
  - sensor.optimizer_voltage_1_1_3
  - sensor.optimizer_voltage_1_1_4
  - sensor.optimizer_voltage_1_1_5
  - sensor.optimizer_voltage_1_1_6
  - sensor.optimizer_voltage_1_1_7
  - sensor.optimizer_voltage_1_1_8
card:
  type: picture-elements
  elements:
    - type: image
      image: /local/images/panel/colorpanelvertical.png
      style:
        top: 18%
        left: 11.8%
        width: 20.4%
        opacity: ${ vars[0] / 100 }
    - type: image
      image: /local/images/panel/colorpanelvertical.png
      style:
        top: 18%
        left: 88.8%
        width: 20.4%
        opacity: ${ vars[1] / 100 }
    - type: image
      image: /local/images/panel/colorpanelorizontal.png
      style:
        top: 56%
        left: 16.8%
        width: 33%
        opacity: ${ vars[2] / 100 }
    - type: image
      image: /local/images/panel/colorpanelorizontal.png
      style:
        top: 56%
        left: 50%
        width: 33%
        opacity: ${ vars[3] / 100 }
    - type: image
      image: /local/images/panel/colorpanelorizontal.png
      style:
        top: 56%
        left: 83%
        width: 33%
        opacity: ${ vars[4] / 100 }
    - type: image
      image: /local/images/panel/colorpanelorizontal.png
      style:
        top: 81%
        left: 16.8%
        width: 33%
        opacity: ${ vars[5] / 100 }
    - type: image
      image: /local/images/panel/colorpanelorizontal.png
      style:
        top: 81%
        left: 50%
        width: 33%
        opacity: ${ vars[6] / 100 }
    - type: image
      image: /local/images/panel/colorpanelorizontal.png
      style:
        top: 81%
        left: 83%
        width: 33%
        opacity: ${ vars[7] / 100 }
    - 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%
  image: /local/images/panel/sfondo.png

pkg_panelsolar.yaml

homeassistant:
  customize:
    package.node_anchors:
      customize: &customize
        Package: 'Contatore Pannelli Solari'
        Version: '0.1.5'
        Author: 'Stefano Marchese'
        icon: 'mdi:counter'
        #entity_picture: https://avatars.githubusercontent.com/u/84263865?s=400&v=4
        reference: 'stepsolar - github chat'
      expose: &expose
        <<: *customize
        haaska_hidden: false
        homebridge_hidden: false
        
        
    sensor.produzione_giornaliero_panel_1_f1:
        <<: *customize
    sensor.produzione_giornaliero_panel_2_f1:
        <<: *customize
    sensor.produzione_giornaliero_panel_3_f1:
        <<: *customize
    sensor.produzione_giornaliero_panel_4_f1:
        <<: *customize
    sensor.produzione_giornaliero_panel_5_f1:
        <<: *customize
    sensor.produzione_giornaliero_panel_6_f1:
        <<: *customize        
    sensor.produzione_giornaliero_panel_7_f1:
        <<: *customize        
    sensor.produzione_giornaliero_panel_8_f1:
        <<: *customize        
                       
        
  customize_glob:
    sensor.produzione_giornaliero_panel_1_f1:
        <<: *customize
    sensor.produzione_giornaliero_panel_2_f1:
        <<: *customize
    sensor.produzione_giornaliero_panel_3_f1:
        <<: *customize
    sensor.produzione_giornaliero_panel_4_f1:
        <<: *customize
    sensor.produzione_giornaliero_panel_5_f1:
        <<: *customize
    sensor.produzione_giornaliero_panel_6_f1:
        <<: *customize        
    sensor.produzione_giornaliero_panel_7_f1:
        <<: *customize        
    sensor.produzione_giornaliero_panel_8_f1:
        <<: *customize 


#downloader:
  #download_dir: packages    
utility_meter:
  produzione_giornaliero_panel_1:
    source: !secret Pannello1
    cycle: daily 
    tariffs:
      - f1
  produzione_giornaliero_panel_2:
    source: !secret Pannello2
    cycle: daily 
    tariffs:
      - f1
  produzione_giornaliero_panel_3:
    source: !secret Pannello3
    cycle: daily 
    tariffs:
      - f1
  produzione_giornaliero_panel_4:
    source: !secret Pannello4
    cycle: daily 
    tariffs:
      - f1
  produzione_giornaliero_panel_5:
    source: !secret Pannello5
    cycle: daily 
    tariffs:
      - f1
  produzione_giornaliero_panel_6:
    source: !secret Pannello6
    cycle: daily 
    tariffs:
      - f1
  produzione_giornaliero_panel_7:
    source: !secret Pannello7
    cycle: daily 
    tariffs:
      - f1
  produzione_giornaliero_panel_8:
    source: !secret Pannello8
    cycle: daily 
    tariffs:
      - f1




sensor:
   - platform: rest
     resource: https://raw.githubusercontent.com/stepsolar/hassio-package-panel-solar/master/versione.json
     name: Versione pk panel solar
     value_template: '{{ value_json.versione }}'

   - platform: rest
     resource: https://raw.githubusercontent.com/stepsolar/hassio-package-panel-solar/master/versione.json
     name: tipo aggiornamento pk panel solar
     value_template: '{{ value_json.cosa_aggiornare }}'



   - platform: template
     sensors:
       panel_1_oggi:
        friendly_name_template: " Panel 1 Energy "
        unique_id: panel_1_energy
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_1_f1.state | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_2_oggi:
        friendly_name_template: " Panel 2 Energy "
        unique_id: panel_2_energy
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_2_f1.state | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_3_oggi:
        friendly_name_template: " Panel 3 Energy "
        unique_id: panel_3_energy
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_3_f1.state | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_4_oggi:
        friendly_name_template: " Panel 4 Energy "
        unique_id: panel_4_energy
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_4_f1.state | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_5_oggi:
        friendly_name_template: " Panel 5 Energy "
        unique_id: panel_5_energy
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_5_f1.state | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_6_oggi:
        friendly_name_template: " Panel 6 Energy "
        unique_id: panel_6_energy
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_6_f1.state | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_7_oggi:
        friendly_name_template: " Panel 7 Energy "
        unique_id: panel_7_energy
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_7_f1.state | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_8_oggi:
        friendly_name_template: " Panel 8 Energy "
        unique_id: panel_8_energy
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_8_f1.state | float * 1000 }}"
        unit_of_measurement: 'Wh'

################ PRODUZIONE TOTALE PANNELLI ################################################
       produzione_panel_totale_oggi:
        friendly_name_template: " Produzione Panel Totale Oggi "
        unique_id: produzione_panel_totale_energy
        icon_template: mdi:counter
        value_template: "{{((states.sensor.panel_1_oggi.state | float(0)) + (states.sensor.panel_2_oggi.state | float(0)) + (states.sensor.panel_3_oggi.state | float(0)) + (states.sensor.panel_4_oggi.state | float(0)) + (states.sensor.panel_5_oggi.state | float(0)) + (states.sensor.panel_6_oggi.state | float(0)) + (states.sensor.panel_7_oggi.state | float(0)) + (states.sensor.panel_8_oggi.state | float(0))) | round(3) }}"
        unit_of_measurement: 'Wh'

################ PERCENTUALE DI PRODUZIONE DEI PANNELLI ####################################
       percentuale_produzione_panel_1_oggi:
        friendly_name_template: " Percentuale Produzione Panel 1 Oggi "
        unique_id: percentuale_produzione_panel_1_energy
        icon_template: mdi:counter
        value_template: "{{((states.sensor.panel_1_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
        unit_of_measurement: '%'
       percentuale_produzione_panel_2_oggi:
        friendly_name_template: " Percentuale Produzione Panel 2 Oggi "
        unique_id: percentuale_produzione_panel_2_energy
        icon_template: mdi:counter
        value_template: "{{((states.sensor.panel_2_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
        unit_of_measurement: '%'
       percentuale_produzione_panel_3_oggi:
        friendly_name_template: " Percentuale Produzione Panel 3 Oggi "
        unique_id: percentuale_produzione_panel_3_energy
        icon_template: mdi:counter
        value_template: "{{((states.sensor.panel_3_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
        unit_of_measurement: '%'
       percentuale_produzione_panel_4_oggi:
        friendly_name_template: " Percentuale Produzione Panel 4 Oggi "
        unique_id: percentuale_produzione_panel_4_energy
        icon_template: mdi:counter
        value_template: "{{((states.sensor.panel_4_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
        unit_of_measurement: '%'
       percentuale_produzione_panel_5_oggi:
        friendly_name_template: " Percentuale Produzione Panel 5 Oggi "
        unique_id: percentuale_produzione_panel_5_energy
        icon_template: mdi:counter
        value_template: "{{((states.sensor.panel_5_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
        unit_of_measurement: '%'
       percentuale_produzione_panel_6_oggi:
        friendly_name_template: " Percentuale Produzione Panel 6 Oggi "
        unique_id: percentuale_produzione_panel_6_energy
        icon_template: mdi:counter
        value_template: "{{((states.sensor.panel_6_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
        unit_of_measurement: '%'
       percentuale_produzione_panel_7_oggi:
        friendly_name_template: " Percentuale Produzione Panel 7 Oggi "
        unique_id: percentuale_produzione_panel_7_energy
        icon_template: mdi:counter
        value_template: "{{((states.sensor.panel_7_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
        unit_of_measurement: '%'
       percentuale_produzione_panel_8_oggi:
        friendly_name_template: " Percentuale Produzione Panel 8 Oggi "
        unique_id: percentuale_produzione_panel_8_energy
        icon_template: mdi:counter
        value_template: "{{((states.sensor.panel_8_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
        unit_of_measurement: '%'

#------------------calcoli ieri-----------------------------------------##

       panel_1_ieri:
        friendly_name_template: " Panel 1 Energy Ieri "
        unique_id: panel_1_energy_ieri
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_1_f1.attributes.last_period | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_2_ieri:
        friendly_name_template: " Panel 2 Energy Ieri"
        unique_id: panel_2_energy_ieri
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_2_f1.attributes.last_period | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_3_ieri:
        friendly_name_template: " Panel 3 Energy Ieri"
        unique_id: panel_3_energy_ieri
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_3_f1.attributes.last_period | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_4_ieri:
        friendly_name_template: " Panel 4 Energy Ieri"
        unique_id: panel_4_energy_ieri
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_4_f1.attributes.last_period | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_5_ieri:
        friendly_name_template: " Panel 5 Energy Ieri"
        unique_id: panel_5_energy_ieri
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_5_f1.attributes.last_period | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_6_ieri:
        friendly_name_template: " Panel 6 Energy Ieri"
        unique_id: panel_6_energy_ieri
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_6_f1.attributes.last_period | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_7_ieri:
        friendly_name_template: " Panel 7 Energy Ieri"
        unique_id: panel_7_energy_ieri
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_7_f1.attributes.last_period | float * 1000 }}"
        unit_of_measurement: 'Wh'
       panel_8_ieri:
        friendly_name_template: " Panel 8 Energy Ieri"
        unique_id: panel_8_energy_ieri
        icon_template: mdi:counter
        value_template: "{{ states.sensor.produzione_giornaliero_panel_8_f1.attributes.last_period | float * 1000 }}"
        unit_of_measurement: 'Wh'



##--------------------AUTOMAZIONI---------------------##      
automation:
#####################controllo aggiornamenti############################
  - alias: controllo versione pkpanelsolar
    trigger:
    - platform: time
      at: '18:00'
    - event: start
      platform: homeassistant
    condition:
      - condition: template
        value_template: "{{ states('sensor.versione_pk_panel_solar') > (state_attr('input_number.costo_f1', 'Version')) }}"
    action:
    - service: input_boolean.turn_on
      data:
        entity_id: input_boolean.versione_pkpanelsolar

  - alias: controllo versione reset pkpanelsolar
    trigger:
    - platform: time
      at: '18:05'
    - event: start
      platform: homeassistant
    condition:
      - condition: template
        value_template: "{{ states('sensor.versione_pk_panel_solar') == (state_attr('input_number.costo_f1', 'Version')) }}"
    action:
    - service: input_boolean.turn_off
      data:
        entity_id: input_boolean.versione_pkpanelsolar


#invio messaggio storico

#################################
 
#input_select:
#  numero_di_fasce:
#    name: Numero di Fasce
#    options:
#      - 1
#      - 2
#      - 3
#    initial: !secret NumeroTariffe

input_boolean:
  versione_pkpanelsolar:
script:
  scarica_pkpanelsolar:
    sequence:
      - service: notify.persistent_notification
        data:
          message: 'Aggiorno il pacchetto... attendere'
      - service: downloader.download_file
        data:
          url: 'https://raw.githubusercontent.com/stepsolar/hassio-package-panel-solar/master/pkg_panelsolar.yaml'
          overwrite: true
      - delay: 5      
      - service: downloader.download_file
        data:
          url: 'https://raw.githubusercontent.com/stepsolar/hassio-package-panel-solar/master/lovelace-dash-light.txt'
          overwrite: true
      - delay: 5
      #- service: homeassistant.restart
      - delay: 5
      - service: notify.persistent_notification
        data:
          message: 'Package Panel Solar Aggiornato. Ricarico i servizi'
      - delay: 1  
     # - service: homeassistant.restart
      - service: automation.reload
      - service: input_boolean.reload
      - service: input_select.reload
      - service: input_number.reload
      - service: input_datetime.reload
      - service: template.reload
      - service: notify.persistent_notification
        data:
          message: 'Servizi Ricaricati. ricarico in ultimo gli script'
      - service: script.reload
      - service: notify.notify
        data:
          message: 'Aggiornamento Pk Panel Solar Fatto, se vuoi puoi offrire un caffe al creatore del pacchetto a questo link https://www.buymeacoffee.com/stepsolar'

[Ildar_Gabdullin]

Too much info))
If you post a short simplified example demonstrating the issue - people will have more chances to understand, you - to get an answer.
This is a card-mod thread, it is about styling a card & it’s elements. Automations, sensors etc - are out of the scope.

[stepsolar]

Sorry, in short I ask if it was possible to opacify an image by taking the percentage values ​​of a sensor. Thank you

[Ildar_Gabdullin]

@stepsolar

an image

What card do you mean?

[tknice]

Hi lldar, continuing this conversation from the other thread. I’m trying to color FordPass sensors icons and I started with your example. The sun entity changes, and two of my nest sensors (1 & 3) take the color but none of the FordPass sensors do. See the tire pressure example below that should be cyan. While inspecting, I can find no differences between the ford logic and the others.

Oh, last thing. Why do I need a card title for any of the logic to work? When I remove it, none have color.

Thanks so much for your help!

        type: picture-glance
        title: test
        image: /local/Ford_Explorer3.gif
        entities:
          - entity: sensor.downstairs_temperature
          - entity: sensor.fordpass_tirepressure
          - entity: sensor.upstairs_humidity
          - entity: sun.sun
        card_mod:
          style:
            .box div:nth-child(2):
              div:nth-child(1):
                ha-icon-button ha-state-icon:
                  $: |
                    ha-svg-icon {
                      color: orange;
                    }
              div:nth-child(2):
                ha-icon-button ha-state-icon:
                  $: |
                    ha-svg-icon {
                      color: cyan;
                    }
              div:nth-child(3):
                ha-icon-button ha-state-icon:
                  $: |
                    ha-svg-icon {
                      color: yellow;
                    }
              div:nth-child(4):
                ha-icon-button ha-state-icon:
                  $: |
                    ha-svg-icon {
                      color: red;
                    }

[stepsolar]

I notice now that you created it with picture-elements

But we can convert that to card_mod

card:
type: picture-elements
elements:
- type: image
image: /local/images/panel/colorpanelvertical.png
style:
top: 18%
left: 11.8%
width: 20.4%
opacity: ${ vars[0] / 100 }

[Ildar_Gabdullin]

@tknice

The sun entity changes, and two of my nest sensors (1 & 3) take the color but none of the FordPass sensors do.

Do not just copy/paste a code from examples.
Same remark as above.
Different domains may have different structure in DOM.
Use Code Inspector to get exact path to elements which should be styled.

[tknice]

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.

[Ildar_Gabdullin]

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.

[Ildar_Gabdullin]

@tknice

the paths in the inspector looked exactly the same

They are different for sun.sun & sensor.