Mushroom Cards Card Mod Styling/Config Guide

I havent had time to finish it just yet. Ive been very busy at work recently. Hence why ive also been a bit absent with replying to people.

1 Like

@dimitri.landerloos may have more info. I use his Mushroom guide and for the most part Mushroom is based off the tile card, but I’m sure you know that based off your profile #s and time here…

Textcolor in the template crad stopped working for me since a few weeks. Was white and turned into black. Any idea?

My code:

      - type: custom:mushroom-template-card
        primary: >-
          {% set monat = ["Januar", "Februar", "März", "April", "Mai", "Juni",
          "Juli", "August", "September", "Oktober", "November", "Dezember"] %}

          {% set monat =
          monat[as_timestamp(states('sensor.google_photos_familie_creation_timestamp'))|
          timestamp_custom('%m')| int -1] %}

          {{ monat ~ ' ' ~
          as_timestamp(states('sensor.google_photos_familie_creation_timestamp'))|
          timestamp_custom('%Y') }}
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
                --primary-text-color: white;
                text-shadow: 1px 1px 3px black
              }
            .: |
              ha-card {
                --card-primary-font-size: 16px;
                --card-primary-font-weight: normal;
                background: none;
                border: none;
              }

This was working but changed…

Thanky you, a lot, for helping!

take a look here:

Ive been quite busy so havent had to the time to make the updates yet.

Thank you!!

updated it, as with my current install of HA 2023.4 dev, these stopped working. Maybe even before, but I hadn’t noticed :wink:

check Style Tile: more-info - #3 by Mariusthvdb

Tile Fan nicely colored and animated according to speed and state

Hello all,

I’m using the

type: custom:mushroom-chips-card

On a card in the dashboard i use this code to change the icon based on severall entities states.:

        variables:
          t2: switch.portao_garagem_portao_fechado
          t3: switch.portao_garagem_portao_aberto
        icon: |
          [[[
            var t2 = states[variables.t2].state;
            var t3 = states[variables.t3].state;
            if (t2 == 'on' && t3 == 'off') return 'mdi:garage-variant-lock';
            if (t2 == 'off' && t3 == 'on') return 'mdi:garage-open-variant';
            if (t2 == 'off' && t3 == 'off') return 'mdi:garage-alert-variant';
            return 'mdi:help';
          ]]]
        styles:
          icon:
            - color: |
                [[[
                  var t2 = states[variables.t2].state;
                  var t3 = states[variables.t3].state;
                  if (t2 == 'on' && t3 == 'off') return 'rgb(50, 205, 50)';
                  return 'rgb(205, 50, 50)';
                ]]]
            - animation: |
                [[[
                  var t2 = states[variables.t2].state;
                  var t3 = states[variables.t3].state;
                  if (t2 == 'off' && t3 == 'off') return 'blink 1s ease infinite'
                  return 'none';
                ]]]

How can i do it on the type: custom:mushroom-chips-card, and for cover entities for value above 2?

Basically i whant that the icon is shutter closed if all shutter at home are closed, or shutter open if any of the shutter are open.

Thanks

You can do something like this with your entities of course

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    primary: Fan
    icon_color: |
      {% set k =  states('sensor.basement_door_battery')| int (0) %}
      {% set d = states('switch.server_fan') %} 
      {% if (k >= 20 and d == 'off') %}
       red
      {% elif (d  == 'off')  %} yellow
      {% else %}
       grey 
      {% endif %}

Hello @LiQuid_cOOled,

I’m doing like this, but i thing i got the variables wrong or some wrong sintax.
Basically i have 8 shutter’s and if all of them are closed the icon is one, if any of them is open the icon will be shutter open.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:window-shutter
    triggers_update:
      - cover.persiana_cozinha
      - cover.persiana_escritorio
      - cover.persiana_quarto_camila
      - cover.persiana_quarto_j_s
      - cover.persiana_quarto_matilde
      - cover.persiana_quarto_sonia
      - cover.persiana_sala_eside
      - cover.persiana_sala_lside
    variables:
      t1: cover.persiana_escritorio
      t2: cover.persiana_cozinha
      t3: cover.persiana_quarto_camila
      t4: cover.persiana_quarto_j_s
      t5: cover.persiana_quarto_matilde
      t6: cover.persiana_quarto_sonia
      t7: cover.persiana_sala_eside
      t8: cover.persiana_sala_lside
    content: Persianas
    card_mod:
      style: |
        ha-card {
         --chip-background: rgb(0, 0, 0) !important;
         --chip-height: 80px !important;
         }
      icon: |
        [[[
          var t1 = states[variables.t1].state;
          var t2 = states[variables.t2].state;
          var t3 = states[variables.t3].state;
          var t4 = states[variables.t4].state;
          var t5 = states[variables.t5].state;
          var t6 = states[variables.t6].state;
          var t7 = states[variables.t7].state;
          var t8 = states[variables.t8].state;
          if (t1 >= 1 OR t2 >= 1 OR t3 >= 1 OR t4 >= 1 OR t5 >= 1 OR t6 >= 1 OR t7 >= 1 OR t8 >= 1) return 'mdi:window-shutter-open';
          if (t1 = 0 && t2 = 0 && t3 = 0 && t4 = 0 && t5 = 0 && t6 = 0 && t7 = 0 && t8 = 0) return 'mdi:window-shutter';
          return 'mdi:help';
        ]]]

What i’m doing wrong?

Thanks

Are you using Mushroom or Button-card with this code? Based on your icon code it looks like Button Card.

I use a similar code in a button card, and was trying to use a similar on a muchroom.
Its diferente how to apply?

Unfortunately it’s 100% different between the two, but you can achieve the same results in Mushroom with a little more code.

Can you advise me where to find examples of this cases for the mushroom?
I’m lost in how to do it!

Thanks

This is an extensive guide and I’ll work on your card a bit this evening as a starting point.

1 Like

That worked! Excellent! Thanks for your help! :+1:t4:

This is how you’d apply the logic you used in a button-card in a Mushroom Template Card or a Mushroom-Chips card.

An easier way would be to create a cover group with these entities in them. It would reduce your coding significantly.

type: custom:mushroom-template-card
icon: |-
  {% set t1 = states('cover.persiana_cozinha') %} 
  {% set t2 = states('cover.persiana_escritorio') %} 
  {% set t3 = states('cover.persiana_quarto_camila') %} 
  {% set t4 = states('cover.persiana_quarto_j_s') %} 
  {% set t5 = states('cover.persiana_quarto_matilde') %}
  {% set t6 = states('cover.persiana_quarto_sonia') %} 
  {% set t7 = states('cover.persiana_sala_eside') %} 
  {% set t8 = states('cover.persiana_sala_lside') %}
  {%if (t1 == 'open' or t2 >= 'open' or t3 >= 'open'or t4 >= 'open' or t5 >= 'open' or t6 >= 'open' or t7 >= 'open' or t8 >= 'open') %}
     mdi:window-shutter-open
  {% else %}
    mdi:window-shutter
  {% endif %}
icon_color: |
  {% set t1 = states('cover.persiana_cozinha') %} 
  {% set t2 = states('cover.persiana_escritorio') %} 
  {% set t3 = states('cover.persiana_quarto_camila') %} 
  {% set t4 = states('cover.persiana_quarto_j_s') %} 
  {% set t5 = states('cover.persiana_quarto_matilde') %}
  {% set t6 = states('cover.persiana_quarto_sonia') %} 
  {% set t7 = states('cover.persiana_sala_eside') %} 
  {% set t8 = states('cover.persiana_sala_lside') %}
  {%if (t1 == 'open' or t2 >= 'open' or t3 >= 'open'or t4 >= 'open' or t5 >= 'open' or t6 >= 'open' or t7 >= 'open' or t8 >= 'open') %}
     green
  {% else %}
    red
  {% endif %}
1 Like

Thanks for the support.
Now i’m strugling on how to integrate in here:
As i can see i cant only change the - type: template by this one.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:window-shutter
    content: Persianas
    card_mod:
      style: |
        ha-card {
         --chip-background: rgb(0, 0, 0) !important;
         --chip-height: 80px !important;
         }
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Persianas
          style: |
            --popup-min-width: 1000px;
            --popup-border-radius: 28px;
          target: null
          content:
            type: vertical-stack
            cards:

Any advise?

Thanks

Are you talking about editing multiple chips? I don’t quite understand what you are looking to change

Like this?

image

or like this

image

Why not? The OP seems to be following the documentation for browser-mod

I have this card:
imagem

That when i click it it opens this:

And i have this code:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:window-shutter
    content: Persianas
    card_mod:
      style: |
        ha-card {
         --chip-background: rgb(0, 0, 0) !important;
         --chip-height: 80px !important;
         }
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Persianas
          style: |
            --popup-min-width: 1000px;
            --popup-border-radius: 28px;
          target: null
          content:
            type: vertical-stack
            cards:
              - type: custom:mushroom-title-card
                subtitle: Acções grupo
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-light-card
                    show_name: true
                    show_icon: true
                    tap_action:
                      action: toggle
                    entity: input_boolean.abrir_persianas_diario
                    name: Abertura diária
                  - type: custom:mushroom-light-card
                    show_name: true
                    show_icon: true
                    tap_action:
                      action: toggle
                    entity: input_boolean.fechar_persianas_saida_casa
                    name: Fecho saída casa
                    ........

And i want that the icon that i have in here:
imagem

Changes with the code you sent, for me to know only by the icon state if i have shutters open or if all are closed.

My doubt is how to insert your code into mine to change the icon.

Thanks