Mushroom-template-card icon/scripts

mge590919 · March 25, 2025, 1:22pm

I have a problem formatting my mushroom-template-card…

I asked DeepSeek the following:

In home assistant create a mushroom-template-card with a button with a solid yellow icon border color, 5px wide, that toggles between script1 and script2, sets the icon color to yellow when script1 is active and red when script2 is active. Script1 turns lamp1 and lamp2 on att 100% with a warm white color, and lamp3 and4 at 50% also with a warm white color. Script2 turns all 4 lamps off.

This created three files :

Yaml:

type: custom:mushroom-template-card
primary: Toggle Lights
icon: mdi:lightbulb
layout: horizontal
tap_action:
  action: call-service
  service: script.toggle
  service_data:
    entity_id: >
      {% if is_state('script.script1', 'off') %}
      script.script1
      {% else %}
      script.script2
      {% endif %}
icon_color: >
  {% if is_state('script.script1', 'on') %}
  yellow
  {% else %}
  red
  {% endif %}
style: 
   border-color-primary:5"-wrappedParseException

Script1:

**script:**

  script1:
    alias: Turn On Lights
    sequence:
      - service: light.turn_on
        data:
          entity_id:
            - light.lamp1
            - light.lamp2
          brightness_pct: 100
          color_temp: 300
      - service: light.turn_on
        data:
          entity_id:
            - light.lamp3
            - light.lamp4
          brightness_pct: 50
          color_temp: 300
    mode: single

script2:

script:
  script2:
    alias: Turn Off Lights
    sequence:
      - service: light.turn_off
        data:
          entity_id:
            - light.lamp1
            - light.lamp2
            - light.lamp3
            - light.lamp4
    mode: single

The scripts works fine when executed locally (in settings/helpers, modified as :

turn_on_lights:
  sequence:
  - action: light.turn_on
    target:
      device_id:
      - 12a3dff5ed2f606e4d5
      - 9a959b0459c26c8123
    data:
      brightness_pct: 100
      color_temp: 301
  - action: light.turn_on
    target:
      device_id:
      - de9d76e40d381e2fd3
      - 91b973a53d96c89882
    data:
      brightness_pct: 50
      color_temp: 300
  alias: Turn on Lights
  description: ''


turn_off_lights:
  sequence:
  - action: light.turn_off
    target:
      device_id:
      - de9d76e40d381e2fd3
      - 91b973a53d96c89882
      - 12a3dff5ed2f606e4d5
      - 9a959b0459c26c8123
    data: {}
  alias: Turn Off Lights
  description: ''

but the yaml-file does not create a icon-border and does not run the scripts when clicking the icon…

LiQuid_cOOled · March 25, 2025, 1:30pm

Huh? Your code is all over the place.

tap_action:
  action: perform-action
  perform_action: script.script1

Are you using AI?

Scripts are not going to relay a consistent on/off state. They shut of immediately

mge590919 · March 25, 2025, 1:37pm

Yeah, I know that AI isn’t very reliable when producing working code, but i wanted to get an “embryo” so I can get some help producing a working example…

tom_l · March 25, 2025, 1:45pm

Try reading the documentation then make an attempt and ask about that rather than asking something that just makes shit up and wastes everyone’s time.

mge590919 · March 25, 2025, 1:49pm

I have read the documentation several times and tried a lot of different examples that i could not get to work, that is why i gave up and tried getting something that works by using AI, but as this did not work either, i was hoping to get some guidelines from the community. I am very sorry if i have upset you by being a novice and posting something that is not at a professional level…

LiQuid_cOOled · March 25, 2025, 1:51pm

Have you reviewed this extensive guide?

The forum guidelines are here and please reference #23 specifically

tom_l · March 25, 2025, 1:56pm

I’m not pissed off because you are a novice I’m pissed off because everyone expects us to correct the garbage spewed out by LLMs without putting in any actual work themselves.

If you tried first, that’s great. Even if it did not work. Show us what you tried.

mge590919 · March 25, 2025, 2:20pm

Yes I tried using this guide, and my initial problem was getting a colored card border and a colored icon border depending on the returned state of a temperature/humidity sensor. This resulted in a colured card border OR a colored Icon, depending on how i wrote the code, but not both borders at the same time. Then my plan was to turn on/off lights and get a change of icon color depending of the returned lamp state, and set lamp brightness/color temp by using scripts, and the scripts work, but as i could not get the color problem ok, i got to the point where i gave up, and tried to use the community by posting the code i got from AI, (which was a huge mistake, I agree…)…

LiQuid_cOOled · March 25, 2025, 3:41pm

Again to educate yourself, I would search template in this thread.

I literally can’t count the number of Mushroom template examples I have posted across the link I provided earlier and this one.

Apply those to your card step by step. Avoid the script portion until you have a better understanding of CSS

Other Links
CSS

Card Mod

mge590919 · March 25, 2025, 4:33pm

This is the basic version of my problem where I tested border colors, icon colors and icon border colors, in the mushroom template card, where everything except the icon background color and the icon border color seems to work, (see enclosed picture)
I read the important note section in the above mentioned card mod section and i guess this has to do with the order the elements are drawn, (so maybe the card color overwrites the icon background and border color ??), but how can i modify the code so all elements are visible ??

type: custom:mushroom-template-card
primary: Temp
secondary: Bathroom
icon: mdi:temperature-celsius
card_mod:
 style: |
   ha-state-icon {
     color: orange;
   }
   ha-card {
     border: 3px solid yellow;   
     background-color: green;   
     border-radius: 10px;  
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
   }
   mushroom-shape-icon$: | 
     .shape {
       border: 2px solid white 
       --shape-color: red !important;
     }

LiQuid_cOOled · March 25, 2025, 4:45pm

Your card mod code was out of order

type: custom:mushroom-template-card
primary: Temp
secondary: Bathroom
icon: mdi:temperature-celsius
card_mod:
 style: 
  mushroom-shape-icon$: | 
     .shape {
       border: 2px solid white; 
       --shape-color: red !important;
       }
  .: |
       ha-state-icon {
         color: orange;
       }
       ha-card {
         border: 3px solid yellow;   
         background-color: green;   
         border-radius: 10px;  
         box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
         }

mge590919 · March 25, 2025, 5:00pm

LiQuid_cOOled:

card_mod:
 style: 
  mushroom-shape-icon$: | 
     .shape {
       border: 2px solid white; 
       --shape-color: red !important;
       }
  .: |
       ha-state-icon {
         color: orange;
       }
       ha-card {
         border: 3px solid yellow;   
         background-color: green;   
         border-radius: 10px;  
         box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
         }

Perfect… Thank you !!!
I have spent MANY hours testing this, and thanks to you (and the community), the problem was solved in minutes…
Now i can continue and do some more experiments with my “script-code” that started this thread and get my colored icons depending on returned state/value of my lights and
temperature sensors. (without posting any more AI code )

LiQuid_cOOled · March 25, 2025, 5:09pm

Post your Mushroom card questions here going forward

We are here to help and to be clear AI is a point of contention. It continues to leading folks down the wrong path with incorrect code. As an example, I was easily able to discern that your code was AI produced.

HA is very unique and is in a constant state of improvement. I guaranteed if you ask in this forum you will get the right answer faster than hours with AI.