Mushroom Cards Card Mod Styling/Config Guide

Your code doesn’t really match your pic, but this example may help you…

yours…

after edits…

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Room1
    card_mod:
      style: |
        ha-card {
           --title-font-size: 1.2rem;
           --primary-text-color: gray;
           --title-spacing: 0rem;
           --title-padding: 0.5rem;
        } 
  - type: custom:stack-in-card
    mode: vertical
    cards:
      - type: custom:mushroom-number-card
        entity: input_number.test_level_1
        display_mode: buttons
        layout: horizontal
        card_mod:
         style:
           mushroom-state-info$: |
            .container {
            flex-direction: row !important;
            align-items: baseline;
              }
            .primary {
            position: relative;
            flex-shrink:2;
            flex-grow: 2;
            white-space: normal !important;
                     }
    card_mod:
      style: |
        ha-card {
          border-width: 1px;        
          border-radius: 10px;
          box-shadow: none;
          height: 68px;
          }
          
         
card_mod:
  style: |
    ha-card {
      padding: 10px;
      border-width: 1px; 
      background: rgba(var(--rgb-primary-text-color), 0.01);
    }

I’d review this guide and post here if you need assistance. Best to keep this thread Mushroom related. :mushroom:

yep, I do believe I crossed a line rereading it now… sorry.
do you have the link for the Tile guide (I truly cant find it), so I can move it there.

hmm, thats not what I ws trying to reach, aware of that one (I was there…).

No, I meant the one from Dimitri, didnt he write that?

This?

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