Mushroom Cards Card Mod Styling/Config Guide

maybe something like this for icon

{% if is_state("weather.xxx","clear-day") %} mdi:weather-sunny {% elif is_state("weather.xxx","sunny") %} mdi:weather-sunny {% elif is_state("weather.xxx","clear") %} mdi:weather-sunny {% elif is_state("weather.xxx","clear-night") %} mdi:weather-night {% elif is_state("weather.xxx","rainy") %} mdi:weather-rainy {% elif is_state("weather.xxx","pouring") %} mdi:weather-pouring {% elif is_state("weather.xxx","snow") %} mdi:weather-snowy {% elif is_state("weather.xxx","fog") %} mdi:weather-fog {% elif is_state("weather.xxx","sleet") %} mdi:weather-partly-snowy-rainy {% elif is_state("weather.xxx","wind") %} mdi:weather-windy {% elif is_state("weather.xxx","cloudy") %} mdi:weather-cloudy {% elif is_state("weather.xxx","partlycloudy") %} mdi:weather-partly-cloudy {% elif is_state("weather.xxx","partly-cloudy-night") %} mdi:weather-night-partly-cloudy {% elif is_state("weather.xxx","hail") %} mdi:weather-hail {% elif is_state("weather.xxx","lightning") %} mdi:weather-lightning {% elif is_state("weather.xxx","tstorm") %} mdi:weather-lightning-rainy {% endif %}
1 Like

Hi yes, i was thinking of that too, to define what it should be, but the entity already has the right icon, so was wondering if i could just use that, instead of creating it all in a template…

Now its just text

If i do it your way, the mdi icon is grey and doesnt correspond the color of the state of the mdi either, for example rainy → blue, sunny->yellow… etc etc
The normal state of the entity has that

do you have an attribute for the entity picture ?

if you did you could do this

type: custom:mushroom-template-card
primary: test
secondary: test
entity: weather.forecast_home
picture: '{{ state_attr(''weather.forecast_home'', ''entity_picture'') }}'

Pity but no
Weather.home has no attribute containing the icon

OK well copy this code add it to icon_color in the template yaml and change the mdi:xxxxx to the correct color

sadly I don’t know how else to do it sorry

{% if is_state("weather.xxx","clear-day") %} mdi:weather-sunny {% elif is_state("weather.xxx","sunny") %} mdi:weather-sunny {% elif is_state("weather.xxx","clear") %} mdi:weather-sunny {% elif is_state("weather.xxx","clear-night") %} mdi:weather-night {% elif is_state("weather.xxx","rainy") %} mdi:weather-rainy {% elif is_state("weather.xxx","pouring") %} mdi:weather-pouring {% elif is_state("weather.xxx","snow") %} mdi:weather-snowy {% elif is_state("weather.xxx","fog") %} mdi:weather-fog {% elif is_state("weather.xxx","sleet") %} mdi:weather-partly-snowy-rainy {% elif is_state("weather.xxx","wind") %} mdi:weather-windy {% elif is_state("weather.xxx","cloudy") %} mdi:weather-cloudy {% elif is_state("weather.xxx","partlycloudy") %} mdi:weather-partly-cloudy {% elif is_state("weather.xxx","partly-cloudy-night") %} mdi:weather-night-partly-cloudy {% elif is_state("weather.xxx","hail") %} mdi:weather-hail {% elif is_state("weather.xxx","lightning") %} mdi:weather-lightning {% elif is_state("weather.xxx","tstorm") %} mdi:weather-lightning-rainy {% endif %}

mm ok thx, will look further

another possible solution posted above

Overlooked that, got the colors now, thx

Hello

Is there any restriction on themes or other to make the animations working ?
I tried many examples but nothing move …

example :

image

type: custom:mushroom-template-card
primary: Alerte Inondation Lave-Vaisselle
icon_color: |-
  {% if states(entity) == 'on' %}
   red
  {% elif states(entity) == 'off' %}
   green
  {% endif %}
layout: horizontal
hold_action:
  action: none
double_tap_action:
  action: none
tap_action:
  action: more-info
icon: mdi:water-alert
secondary: >
  {{ states [
  'binary_sensor.detecteur_inondation_water_leak'].last_changed.timestamp() |
  timestamp_custom('%d/%m/%y %H:%M') }} 
visibility:
  - condition: state
    entity: binary_sensor.detecteur_inondation_water_leak
    state: 'on'
entity: binary_sensor.detecteur_inondation_water_leak
multiline_secondary: true
fill_container: true
card_mod:
  style: |
    ha-state-icon {
      animation: wobbling 0.7s linear infinite alternate;
    }
    @keyframes wobbling {
      0% {transform: rotate(-80deg);}
      100% {transform: rotate(40deg);}
    }

your code works for me. do you have card_mod installed?

I reinstalled and added :slight_smile:


frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/card-mod.js

And it works now.

Thanks

1 Like

Please help mefix this card! When I open an application “from scratch” on my iphone or a page in the browser, everything opens perfectly. But if I refresh the page or open the application from the tray, the icons move. It turns out that the markdown section disappears for some reason.If i press refresh 5-6 times the card loading properly. Need help (

markdown section

          - type: markdown
            content: >
              <font size=3px>Кухня <br> <font size=5px><font color=black> {{
              states('sensor.0x00158d00090e5b38_temperature') | round(1) }}°C 
              <font size=2px><font color=grey>
              {{states('sensor.0x00158d00090e5b38_humidity') | round(1) }}% 
            view_layout:
              grid-area: template1
            card_mod:
              style: |
                ha-markdown {
                  padding: 0 0 0 3px !important;
                }
                ha-card {
                  background-color: transparent;

                }

FULL CODE

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 80% 20%
          grid-template-rows: 4
          grid-template-areas: |
            "template1 zone1"
            "d1   zone2"
            "d1   zone3"
            "icon zone4"
            "icon zone5"
        cards:
          - type: markdown
            content: >
              <font size=3px>Кухня <br> <font size=5px><font color=black> {{
              states('sensor.0x00158d00090e5b38_temperature') | round(1) }}°C 
              <font size=2px><font color=grey>
              {{states('sensor.0x00158d00090e5b38_humidity') | round(1) }}% 
            view_layout:
              grid-area: template1
            card_mod:
              style: |
                ha-markdown {
                  padding: 0 0 0 3px !important;
                }
                ha-card {
                  background-color: transparent;

                }
          - type: custom:mushroom-template-card
            entity: cover.0xa4c138096b674584
            content_info: none
            use_light_color: true
            icon: mdi:curtains
            icon_color: grey
            view_layout:
              grid-area: d1
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card { 
                  --icon-symbol-size: 17px;
                  --icon-size: 0px;
                  --ha-card-background: none;           
                  margin-top: -20px;
                  margin-left: -110px;  
          - type: custom:mushroom-template-card
            icon: ytz:soup-plate
            entity: switch.0x54ef441000579805_right
            primary: ''
            secondary: ''
            tap_action:
              action: toggle
            double_tap_action:
              action: navigate
              navigation_path: kitchen
            hold_action:
              action: toggle
            icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''#b7c3c7'' }}'
            fill_container: true
            layout: horizontal
            multiline_secondary: false
            view_layout:
              grid-area: icon
            card_mod:
              style: |
                ha-card { 
                --icon-symbol-size: 90px;
                --icon-size: 130px;
                --ha-card-background: none;
                --box-shadow: none;
                bottom: 55px !important;
                right: 35px !important;            
                }
                ha-state-icon {

                  padding-bottom: 12px;

                }
          - type: custom:mushroom-template-card
            entity: switch.0x54ef441000579805_left
            icon: mdi:ceiling-light
            icon_color: |-
              {% if is_state ('switch.0x54ef441000579805_left', 'on')%}
                orange
              {% else %}
                grey
              {% endif %}
            fill_container: false
            tap_action:
              action: toggle
            view_layout:
              grid-area: zone1
            card_mod:
              style: |
                ha-card { 
                  --icon-symbol-size: 25px;
                  --icon-size: 30px;
                  --ha-card-background: none;           
                  margin-top: -10px;
                  margin-left: -6px;
                }
          - type: custom:mushroom-template-card
            entity: fan.airfresh_kitchen_150
            icon: mdi:fan
            icon_color: |-
              {% if is_state ('fan.airfresh_kitchen_150', 'on')%}
                green
              {% else %}
                #98a2a6
              {% endif %} 
            tap_action:
              action: toggle
            hold_action:
              action: none
            view_layout:
              grid-area: zone2
            card_mod:
              style: |
                ha-card { 
                  --icon-symbol-size: 23px;
                  --icon-size: 30px;
                  --ha-card-background: none;           
                  margin-top: -45px;
                  margin-left: -6px;
                }
                ha-state-icon {
                      {% set s = state_attr('fan.airfresh_kitchen_150', 'percentage')  %}
                            {% if (s == 1 ) %}    
                    animation: spin 10s linear infinite;
                       {%- elif s == 67 %}
                     animation: spin 3s linear infinite;     
                       {%- elif s == 89 %}
                     animation: spin 1s linear infinite;   
                            {% else %}
                            {% endif %}
                }  
          - type: custom:mushroom-template-card
            entity: input_boolean.lyko_ballu_kitchen_switch
            content_info: none
            use_light_color: true
            icon: mdi:snowflake
            icon_color: |-
              {% if is_state ('input_boolean.lyko_ballu_kitchen_switch', 'on')%}
                blue 
              {% else %}
                grey
              {% endif %}      
            view_layout:
              grid-area: zone3
            card_mod:
              style: |
                ha-card { 
                  --icon-symbol-size: 23px;
                  --icon-size: 30px;
                  --ha-card-background: none;           
                  margin-top: -24px;
                  margin-left: -6px;
          - type: custom:mushroom-template-card
            entity: media_player.50pus8507_60_3
            content_info: none
            use_light_color: true
            icon: mdi:television-classic
            icon_color: |-
              {% if is_state ('media_player.50pus8507_60_3', 'on')%}
                blue 
              {% else %}
                grey
              {% endif %}      
            view_layout:
              grid-area: zone4
            card_mod:
              style: |
                ha-card { 
                  --icon-symbol-size: 23px;
                  --icon-size: 30px;
                  --ha-card-background: none;           
                  margin-top: -22px;
                  margin-left: -6px;
          - type: custom:mushroom-template-card
            entity: switch.0x54ef441000579805_left
            icon: mdi:ceiling-light
            icon_color: |-
              {% if is_state ('switch.0x54ef441000579805_left', 'on')%}
                orange
              {% else %}
                grey
              {% endif %}
            fill_container: false
            tap_action:
              action: toggle
            view_layout:
              grid-area: zone5
            card_mod:
              style: |
                ha-card { 
                  --icon-symbol-size: 25px;
                  --icon-size: 30px;
                  --ha-card-background: none;           
                  margin-top: -77px;
                  margin-left: -6px;
                }
    card_mod:
      style: |
        ha-card {
          background-color: rgba(224,234,237,1) !important;
          height:200px !important;      
          
        }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Коридор
        secondary: '{{ states(''sensor.0x00158d000709bf12_temperature'') | round(1) }} °C'
        icon: hue:room-other
        entity: switch.0x54ef4410005e68a0_left
        tap_action:
          action: toggle
        double_tap_action:
          action: navigate
          navigation_path: kitchen
        hold_action:
          action: toggle
        icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''#b7c3c7'' }}'
        fill_container: true
        layout: horizontal
        multiline_secondary: false
        card_mod:
          style: |
            ha-card {
            --icon-symbol-size: 50px;
            --icon-size: 80px;
              margin-top: -20px;
              margin-left: -20px;
            --card-primary-font-size: 16px;
            --card-secondary-font-size: 13px;
            }  
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            double_tap_action:
              action: none
            entity: switch.0x54ef4410005e68a0_right
            icon: mdi:lock
            tap_action:
              action: toggle
            hold_action:
              action: none
            icon_color: |-
              {% if is_state ('switch.0x54ef4410005e68a0_right', 'on')%}
                orange
              {% else %}
                grey
              {% endif %}  
          - type: spacer
          - type: template
            double_tap_action:
              action: none
            entity: switch.0x54ef4410005e68a0_right
            icon: hue:bulb-group-recessed-ceiling
            tap_action:
              action: toggle
            hold_action:
              action: none
            icon_color: |-
              {% if is_state ('switch.0x54ef4410005e68a0_right', 'on')%}
                orange
              {% else %}
                grey
              {% endif %}        
        alignment: end
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: -7px;
              --chip-icon-size: 21px;
              margin-top: -23px;

            }
    card_mod:
      style: |
        ha-card {
          background-color: rgba(224,234,237,1) !important;
          margin-top: 0px;
          height:100px !important;

        }

1 Like

HI!

do you think I can place the secondary info all to the right without using a fixed gap?
Thanks!!

Change Rows.
image
Gap will need to be adjusted depending on your primary text length. you can find the different types of flex direction here . yaml courtesy of @zanixmechanix

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        flex-direction: row !important;
        align-items: baseline;
        gap: 10px;
      }

Hi there. It is not working for me. IT isd supposed to have a red slider but it is not.

I have this code

type: custom:mushroom-chips-card

chips:
  - type: entity
    entity: light.luces_todas
    content_info: none
card_mod:
 style: 
     mushroom-entity-chip:nth-child(1) $ mushroom-chip $: |
      ha-card {
      color:
      {% if is_state('light.luces_todas', 'on') %}
      lightgreen;
      {% else %}
      red;
      {% endif %}
      }  

I don’t understand the 9 line (but it surpringly works). But it only works with green color (so, when ON), but it doesn’t work with the red color (when off). I can’t find the problem. Could you help me. Thanks.

PS: The codes for chip icon color you posted didin’t work for me
Thank you.

you need to check out the guide especially the section at the bottom.
What the $ and .: | symbols do

how can i totally disable shape using theme yaml
what should i add like

card-mod-card-yaml: |
          .: |
            ha-card.type-custom-mushroom-light-card 
            {
               ....
            }

Or maybe there is more graceful way?

How can i make the mushroom-light-card a bit higher in size (more padding to make the click area bigger)? Since one of the last HA updates my card_mod code does not work anymore (i am using sections)…

card_mod:
  style: |
    mushroom-state-item {
      padding-top: 5px;
      padding-bottom: 5px;
    } 

when i wrap a horizontal-stack card, and inside mushroom-light-card with the same card_mod, it is working.
Can someone help me?

Without horizontal-stack (still default size, paddings do not work anymore):

Within horizontal-stack card (bigger):

Strangely enough, when i click on the light and it goes on, also the first version without horizontal stack shows the 5x paddings:

type: custom:mushroom-light-card
entity: light.lights_off
card_mod:
  style: |
    ha-card {
      padding-top: 50px;
      padding-bottom: 50px;
    }

EDIT sorry you want a bigger click area!

type: custom:mushroom-light-card
entity: light.lights_off
card_mod:
  style: |
    mushroom-state-item {
      padding-top: 50px;
      padding-bottom: 50px;
    }

this works fine for me

but doesn’t if it’s in the new sections dashboard

FINAL EDIT

type: grid
cards:
  - type: custom:mushroom-light-card
    entity: light.lights_off
    card_mod:
      style: |
        mushroom-state-item {
          padding-top: 50px;
          padding-bottom: 50px;
        }
    layout_options:
      grid_columns: 4
      grid_rows: 2
column_span: 2

This works in sections depending on how many columns it spans

thank you, but i already have that solution with a wrapper (horizontal-stack in my case, grid in your case).
My question is: how can it be done without a wrapper?