Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

[Faecon (Jo)]

                    - type: vertical-stack 
                      cards:                                 
                        - type: custom:mushroom-template-card
                          primary: Ventilatorsnelheid
                          icon: mdi:fan
                          icon_color: >
                            {% if states("climate.eetplaats") == 'off' %}
                              [84, 84, 84]
                            {% if state_attr("climate.eetplaats",'fan_mode') == '1' %}
                              [200, 62, 77]
                            {% elif state_attr("climate.eetplaats",'fan_mode') == '2' %}
                              [200, 62, 77]
                            {% elif state_attr("climate.eetplaats",'fan_mode') == '3' %}
                              [200, 62, 77]
                            {% elif state_attr("climate.eetplaats",'fan_mode') == '4' %}
                              [200, 62, 77]
                            {% elif state_attr("climate.eetplaats",'fan_mode') == '5' %}
                              [200, 62, 77]
                            {% elif state_attr("climate.eetplaats",'fan_mode') == 'silence' %}
                              [102, 102, 255]                             
                            {% else %}
                              [84, 84, 84]
                            {% endif %}

If the first state is off, i want the icon 84,84,84. If not I want the other state attribute options. How do I do that ?

[Faecon (Jo)]

                            {% if states("climate.eetplaats") == 'off' %}
                              [84, 84, 84]
                            {% else %}  
                              {% if state_attr("climate.eetplaats",'fan_mode') == '1' %}
                                [200, 62, 77]
                              {% elif state_attr("climate.eetplaats",'fan_mode') == '2' %}
                                [200, 62, 77]
                              {% elif state_attr("climate.eetplaats",'fan_mode') == '3' %}
                                [200, 62, 77]
                              {% elif state_attr("climate.eetplaats",'fan_mode') == '4' %}
                                [200, 62, 77]
                              {% elif state_attr("climate.eetplaats",'fan_mode') == '5' %}
                                [200, 62, 77]
                              {% elif state_attr("climate.eetplaats",'fan_mode') == 'silence' %}
                                [102, 102, 255]                             
                              {% else %}
                                [84, 84, 84]
                              {% endif %}  
                            {% endif %}

was the solution

[r_anand]

@LiQuid_cOOled

margin-top: 10px;

Thanks for that, the ha-card style on custom:mushroom-chips-card worked

I guess I was trying with the wrong margin.
Thanks again.

[dimitri.landerloos]

instead of a nested if you could also just do:

                          icon_color: >
                            {% if states("climate.eetplaats") == 'off' %}
                              [84, 84, 84]
                            {% elif state_attr("climate.eetplaats",'fan_mode') == '1' %}
                              [200, 62, 77]
                            {% elif state_attr("climate.eetplaats",'fan_mode') == '2' %}
                              [200, 62, 77]
                            {% elif state_attr("climate.eetplaats",'fan_mode') == '3' %}
                              [200, 62, 77]
                            {% elif state_attr("climate.eetplaats",'fan_mode') == '4' %}
                              [200, 62, 77]
                            {% elif state_attr("climate.eetplaats",'fan_mode') == '5' %}
                              [200, 62, 77]
                            {% elif state_attr("climate.eetplaats",'fan_mode') == 'silence' %}
                              [102, 102, 255]                             
                            {% else %}
                              [84, 84, 84]
                            {% endif %}

[FilipeOS]

Hi guys,

I see so many amazing things here that I don’t know what to do heheh.

I need your help.

1. How can i delete the icon in this chip? Since to remove the % I need to create a new sensor… I think

2. I want to show the timer, when it’s enabled on the same column, bellow the humidity but it have so much padding this chip and timer… possible? Some advise please?

type: custom:stack-in-card
mode: vertical
keep:
  margin: false
card_mod:
  style: |
    ha-card {
      overflow: visible !important;
    }
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: thermostat
        entity: climate.living_room_ac
        features:
          - style: icons
            hvac_modes:
              - cool
              - 'off'
              - heat
              - heat_cool
            type: climate-hvac-modes
        show_current_as_primary: true
        card_mod:
          style: |
            ha-card {
              border: none;
              border-right: 1px solid #333;
            }
      - type: thermostat
        features:
          - style: icons
            hvac_modes:
              - cool
              - 'off'
              - heat
              - heat_cool
            type: climate-hvac-modes
        entity: climate.office_ac
        show_current_as_primary: true
        card_mod:
          style: |
            ha-card {
              border: none;
            }
    card_mod:
      style: |
        ha-card {
          border: none;
          margin-bottom: none !important
        }
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 20% 30% 20% 30%
      margin: 0px 0px 0px 0px
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 100%
          margin: 0px 0px 0px 0px
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: entity
                entity: sensor.living_room_ac_relative_humidity_measurement
            alignment: center
            card_mod:
              style: |
                ha-card {
                  --chip-padding: 0 !important;
                  --chip-border-width: 0 !important;
                  --chip-height: 44px;
                }
          - type: custom:timer-bar-card
            entity: timer.living_room_ac_timer
            layout: full_row
            text: null
            text_width: 0px
            bar_height: 3px
            bar_background: '#fff'
            bar_foreground: '#ffc107'
            bar_radius: 3px
            icon: mdi:progress-clock
      - type: custom:mushroom-select-card
        entity: input_select.living_room_ac_select
        icon: mdi:progress-clock
        name: Living Room AC Timer
        primary_info: none
        secondary_info: none
        icon_type: none
        card_mod:
          style: |
            ha-card {
              border: none;
            }
            .type-custom-mushroom-select-card {
              padding: 0 10px 0 0;
            }
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 100%
          margin: 0px 0px 0px 0px
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: entity
                entity: sensor.office_ac_relative_humidity_measurement
            alignment: center
            card_mod:
              style: |
                ha-card {
                  --chip-padding: 0 !important;
                  --chip-border-width: 0 !important;
                  --chip-height: 44px;
                }
          - type: custom:timer-bar-card
            entity: timer.office_ac_timer
            layout: full_row
            text: null
            text_width: 0px
            bar_height: 3px
            bar_background: '#fff'
            bar_foreground: '#ffc107'
            bar_radius: 3px
            icon: mdi:progress-clock
      - type: custom:mushroom-select-card
        entity: input_select.office_ac_select
        icon: mdi:progress-clock
        name: Office AC Timer
        primary_info: none
        secondary_info: none
        icon_type: none
        card_mod:
          style: |
            ha-card {
              border: none;
            }
            .type-custom-mushroom-select-card {
              padding: 0 10px 0 0;
            }

[jkseamons]

@SmartNorman

{% if states(config.entity) == 'unavailable' or states(config.entity) == 'none' %}
                    blue !important;
                    --card-mod-icon: mdi:bug !

This was the solution! Thank you much @SmartNorman. I had modified this from @dimitri.landerloos code mushroom inspired battery card, but was never able to get that part of the code working.

[metec]

When I add a style using card mod to the chips card it gets automatically erased next time I edit the card, is this a known issue?

This is the code in the raw editor:

      - type: custom:mushroom-chips-card
        card_mod:
          style: |-
            ha-card {
              margin-top: -20px;
              margin-bottom: -10px;
            }
        chips:
          - type: conditional
            conditions: []
            chip:
              type: entity
              entity: sensor.iphone_steps
              content_info: state
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none !important;
                  }

If I edit this card in the dashboard, it shows this code:

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions: []
    chip:
      type: entity
      entity: sensor.iphone_steps
      content_info: state
      card_mod:
        style: |
          ha-card {
            box-shadow: none !important;
          }
alignment: center

If I save it now, it will wipe the card mod properties. It only seems to happen with chip cards. Is there a way to avoid this?

[jkseamons]

Yes, appreciate the clarification. I had noticed the duplicate lines and made the needed changes.

[Faecon (Jo)]

I think I have to nest it. Because if the entity is offline, the last active attribute stays active.

[Mar1us]

one other question. Is there a way to use a template sensor with color code to use as icon color?

[monsivar]

Help.
The color og secondary text color is not responding to the template

type: custom:mushroom-template-card
primary: Bad
secondary: |-
  {{states ('sensor.sensor_bad_1_etg_temperature')}}°C
  -
  {{states ('sensor.sensor_bad_1_etg_humidity')}}%
icon: mdi:bathtub
entity: switch.double_switch_2_current_value
icon_color: |-
  {% if is_state('switch.double_switch_2_current_value', 'on')%}
    orange
  {% else %}  
    blue
  {% endif %}
badge_icon: mdi:fan
badge_color: |-
  {% if is_state('switch.double_switch_2_current_value', 'on')%}
    blue
  {% endif %}
layout: vertical
tap_action:
  action: navigate
  navigation_path: /lovelace/bad
hold_action:
  action: toggle
fill_container: true
card_mod:
  style: |
    mushroom-badge-icon {
      {% if is_state('switch.double_switch_2_current_value_2', 'on')%}
        animation: spin 1s linear infinite;
      {% else %}
        display: none;
      {% endif %}
    }


    ha-state-icon {
      --icon-symbol-size: 30px;
    }
    secondary-text-color {
      {% if is_state('climate.floor_thermostat', 'heat') %}
        red
      {% elif is_state('climate.floor_thermostat', 'off') %}
        #03A9F4
      {% else %}
        #6c6c75
      {% endif %}
    }

[Intro_Verti]

I respect your time @dimitri.landerloos , hope you’re able to help me out some day.
Or @LiQuid_cOOled eventually?

Many thanks and have a great day!

[LiQuid_cOOled]

There is a lot going on with your card mod. Play around with this and we’ll go from there.

card_mod:
  style: |
     mushroom-badge-icon {
             animation: spin 750ms linear infinite;
         }
      ha-card {
      --icon-symbol-size: 10px;
      {% if is_state('climate.floor_thermostat', 'heat') %} 
      --secondary-text-color: blue !important;
      --primary-text-color: green !important;
        {% else %}
      --secondary-text-color: red !important;
      --primary-text-color: yellow !important;
         {% endif %}
      --icon-symbol-size: 10px;
        }

We can consolidate the code, but check out @dimitri.landerloos guide about .: | and animations.

[Lewis_gio (Lewis)]

Hi everyone, I’m going crazy, I can’t get this animation to work, please help me. Thank you.

type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: '{{ ''red'' if states(''sensor.casa_delle_fate_riscaldamento'') | float > 1 }}'
primary: null
secondary: '{{states(''sensor.termosifoni_temperature'') + ''%'' }}'
card_mod:
  style: |
    ha-state-icon {
      {% if is_state('sensor.casa_delle_fate_riscaldamento') | float > 1 }
        --card-mod-icon: mdi:radiator-off
      {% else %}
        --card-mod-icon: mdi:bulb;
        animation: clip 1.5s linear infinite;
      {% endif %};
    }
    @keyframes clip {
      0% { clip-path: inset(50% 0 0 0); }
      100% { clip-path: inset(0 0 0 0); }
    }
    mushroom-shape-icon {
      --shape-color: transparent !important;
    }
    mushroom-badge-icon {
      visibility: hidden;
    }      

[dimitri.landerloos]

Sorry to tell you this - its really annoying when its something simple, but you are just missing a % at the end of your if statement:

{% if is_state('sensor.casa_delle_fate_riscaldamento') | float > 1 %}

[Lewis_gio (Lewis)]

I don’t believe it!!! I’m stupid, really stupid!!! Thank you very much, sorry if I wasted your time

[dimitri.landerloos]

Never any need to apologise

[monsivar]

And if i want an other badge showing up on left side with this template:
{% if is_state(‘climate.floor_thermostat’, ‘heat’) %}

How is that?
(tried an other 2 badge code, but i did not get it to work

type: custom:mushroom-template-card
primary: Bad
secondary: |-
  {{states ('sensor.sensor_bad_1_etg_temperature')}}°C
  -
  {{states ('sensor.sensor_bad_1_etg_humidity')}}%
icon: mdi:bathtub
entity: switch.double_switch_2_current_value
icon_color: |-
  {% if is_state('switch.double_switch_2_current_value', 'on')%}
    orange
  {% endif %}
badge_icon: |-
  mdi:fan
badge_color: |-
  {% if is_state('switch.double_switch_2_current_value', 'on')%}
    blue
  {% endif %}
layout: vertical
tap_action:
  action: navigate
  navigation_path: /lovelace/bad
hold_action:
  action: toggle
fill_container: true
card_mod:
  style: |
    mushroom-badge-icon {
      {% if is_state('switch.double_switch_2_current_value', 'on')%}
        animation: spin 1s linear infinite;
      {% else %}
        display: none;
      {% endif %}
    }

[Halover99 (HAlover)]

@dimitri.landerloos

lly you want to index the states, but you dont want to iterate over them to achieve your colors. i think you would need to do something via your theme if that is the case, but since i dont use themes much i am not sure if its possbible to set a color based on state via theme.

sorry i don’t undestand your response.
i would like that the text scrolling automatically without overlapping with primary field

[dimitri.landerloos]

you probably dont understand because that reply isnt to you