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

[berkans (Berkan Sezer)]

So I have created a new design for replacing old crappy interface of controlling lights with color wheel.

So now I have this:

Instead of this old look:

Some of the icons are the actual pictures from my devices such as “Sarkıt Sağ”

The color wheel at the top controls all lights in Living Room Group. But with double tap action each light can also be controlled individually in a separate page.

[shogun168 (Edwin)]

Thanks! Hmm, how would I add the if statements back into this? I thought it’d be something like this but doesn’t seem to be working:

card_mod:
  style: |
    {% if is_state("climate.edwin_s_office", "cool") and not is_state('timer.edwins_office_ac_blast', 'idle')%}
      mushroom-shape-icon {
      display: flex;
      border-radius: 60%;
      animation: rotation-pulse 1s linear infinite;
    }
    @keyframes rotation-pulse {
      0% {
        box-shadow: 0 0 0 0 rgb(var(--rgb-blue), 0.8);
        transform: rotate(0deg);
      }
      70% {
        box-shadow: 0 0 0 10px rgba(var(--rgb-blue), 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0);
        transform: rotate(360deg);
      }
    }

Thanks!

[crankycowboy]

So, I’ll start with the disclaimer that I’m fairly new to HA and even newer to editing code to serve my needs. I’ve been using quite a bit of suggestions from this thread to get my “person” card customized. I don’t know enough about css to change formatting. Please see attached. I think I need to do something to make better use of the space…and maybe add another attribute next to the “charging” part? Below is a copy of my card and the code. Any suggestions for cleaning it up would be great help. I only got this far by changing parameters a little at a time to see how things were effected.

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-person-card
    entity: person.eric
    use_entity_picture: true
    hide_name: true
    layout: vertical
    tap_action:
      action: more-info
      browser_mod:
        command: popup
        deviceID: this
        title: Eric
        card:
          type: custom:mod-card
          style: |
            ha-card {
               padding-right: 15px;
               padding-left: 15px;
               padding-bottom: 15px;     
            }
          card:
            type: vertical-stack
            cards:
              - type: custom:mushroom-entity-card
                entity: sensor.erics_iphone_geocoded_location
                primary_info: none
                icon: mdi:map-marker
                icon_color: yellow
              - type: horizontal-stack
                cards:
                  - type: map
                    entities:
                      - entity: device_tracker.erics_iphone
                    aspect_ratio: '2'
                    use_entity_picture: true
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: none;
        --chip-height: 33px
      }
    chips:
      - type: template
        icon_color: |2-
                    {% set state=states('sensor.erics_iphone_battery_state') %}
                    {% if state=='Charging' %}
                    green
                    {% elif state=='Not Charging' %}
                    #6f6f6f
                   {% endif %}
        entity: sensor.erics_iphone_battery_state
        content: '{{ states(entity) }}'
        icon: mdi:power-plug
        tap_action:
          action: more-info
      - type: template
        entity: sensor.erics_iphone_battery_level
        content: '{{ states(entity) }} %'
        icon: |2
                    {% set bl = states('sensor.erics_iphone_battery_level') | int %}
                    {% if bl < 10 %} mdi:battery-outline
                    {% elif bl < 20 %} mdi:battery-10
                    {% elif bl < 30 %} mdi:battery-20
                    {% elif bl < 40 %} mdi:battery-30
                    {% elif bl < 50 %} mdi:battery-40
                    {% elif bl < 60 %} mdi:battery-50
                    {% elif bl < 70 %} mdi:battery-60
                    {% elif bl < 80 %} mdi:battery-70
                    {% elif bl < 90 %} mdi:battery-80
                    {% elif bl < 100 %} mdi:battery-90
                    {% elif bl == 100 %} mdi:battery
                    {% else %} mdi:battery-unknown
                    {% endif %}
        icon_color: |2-
                    {% set bl = states('sensor.erics_iphone_battery_level') | int %}
                    {% if bl < 10 %} red
                    {% elif bl < 20 %} red
                    {% elif bl < 30 %} red
                    {% elif bl < 40 %} orange
                    {% elif bl < 50 %} orange
                    {% elif bl < 60 %} green
                    {% elif bl < 70 %} green
                    {% elif bl < 80 %} green
                    {% elif bl < 90 %} green
                    {% elif bl < 100 %} green
                    {% elif bl == 100 %} green
                    {% else %} grey
                    {% endif %}
        tap_action:
          action: more-info
      - type: entity
        entity: proximity.home
        icon_color: white
        card_mod: null
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }

[cloudbr34k (Apples)]

i find that when i did this as well that the pictures wouldnt load… any suggestions

[jacopoventura01 (Jaco)]

hi, someone could help me to make rotating my green fan? I tried to use the code that was posted in this discussion, but it doesn’t work for me.

Here my code:

type: custom:mushroom-chips-card
chips:
  - type: menu
  - type: weather
    entity: weather.casa_ventura
    show_conditions: false
    show_temperature: true
    double_tap_action:
      action: none
    tap_action:
      action: none
    hold_action:
      action: none
  - type: conditional
    conditions:
      - entity: cover.gruppo_cover_all
        state: open
    chip:
      type: template
      double_tap_action:
        action: none
      icon: mdi:window-shutter-alert
      icon_color: ''
      hold_action:
        action: toggle
      tap_action:
        action: navigate
        navigation_path: tapparelle
      content: '{{ states("sensor.number_cover_open") }}'
      entity: cover.gruppo_cover_all
  - type: conditional
    conditions:
      - entity: binary_sensor.contact_cancelletto_contact
        state: 'on'
    chip:
      type: template
      icon: mdi:door-open
      icon_color: '#D70D0D'
      tap_action:
        action: navigate
        navigation_path: telecamere
      hold_action:
        action: none
      double_tap_action:
        action: none
      entity: binary_sensor.contact_cancelletto_contact
      card_mod:
        style: |
          ha-card {
            animation: {% if is_state('binary_sensor.contact_cancelletto_contact', 'on') %} blink 1s linear infinite;
                      {% else %} none
                      {% endif %}       
          }
          @keyframes blink {
            50% {opacity: 0.2;}
          } 
  - type: conditional
    conditions:
      - entity: light.gruppo_luci_interno
        state: 'on'
    chip:
      type: template
      entity: light.gruppo_luci_interno
      icon: mdi:lightbulb
      icon_color: amber
      content: '{{ states("sensor.number_indoor_lights_on") }}'
      tap_action:
        action: navigate
        navigation_path: luci-interne
      hold_action:
        action: toggle
      double_tap_action:
        action: none
  - type: conditional
    conditions:
      - entity: light.gruppo_luci_esterno
        state: 'on'
    chip:
      type: template
      entity: light.gruppo_luci_esterno
      icon_color: amber
      icon: mdi:coach-lamp-variant
      tap_action:
        action: navigate
        navigation_path: luci-esterno
      hold_action:
        action: toggle
      content: '{{ states("sensor.number_outdoor_lights_on") }}'
      double_tap_action:
        action: none
  - type: conditional
    conditions:
      - entity: switch.gruppo_termosifoni_all
        state: 'on'
    chip:
      type: template
      entity: switch.gruppo_termosifoni_all
      icon_color: red
      icon: mdi:radiator
      tap_action:
        action: toggle
      hold_action:
        action: none
      content: '{{ states("sensor.number_heater_on") }}'
      double_tap_action:
        action: none
  - type: conditional
    conditions:
      - entity: climate.group_all
        state_not: 'off'
    chip:
      type: template
      entity: climate.group_all
      tap_action:
        action: navigate
        navigation_path: condizionatori
      hold_action:
        action: toggle
      double_tap_action:
        action: none
      icon: mdi:fan
      icon_color: green
      content: '{{ states("sensor.number_climate_on") }}'
    card_mod:
      style:
        div:
          mushroom-conditional-chip:nth-child(8) mushroom-template-chip:
            $: |
              mushroom-chip ha-icon {
                  animation: rotation 1s linear infinite;
                }
                @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }
        .: |
          :host {
            --ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
          }
          ha-card {
            --chip-spacing: 2px;
          }

[theandouz]

Hey can you share the part of your theme that changes the look of the pop ups?

[rhysb (Rhys)]

Do you have card_mod installed?

[rhysb (Rhys)]

You seem to be missing your {% endif %}

[rhysb (Rhys)]

Do you have card_mod installed?

[shogun168 (Edwin)]

Of course! Duh! Thank you

[jacopoventura01 (Jaco)]

yes of course. what’s the problem in my code?

[rhysb (Rhys)]

Try moving card_mod two tabs to the left. Needs to be in-line with chips

[niekniek89 (Niek)]

looks very nice.
is it possible to get the weather indication in your own language?

[rhysb (Rhys)]

You would need to translate it. Have a look here:

Weather conditions in local language in template

I did but nothing happened. Anyway I solved the problem with burying your code inside the message. Here is my final working template. Thanks a lot. service: notify.telegrambot data: title: Yarınki Hava Durumu Tahmini🌡 message: > {% set weather = { 'clear-night': "açık-gece", 'cloudy': "bulutlu", 'exceptional': "olağanüstü ", 'fog': "sisli", 'hail': "dolu", 'lightning': "şimşek ", …

[sashaz]

Hi I love this design system and am going to switch over to it now. I was wondering how I can implement my blinds on these cards? There are up and down buttons and a stop button.
Has anyone integrated blind control with this card?

[brewston (Tim Jones)]

There is a blinds card (Those are Ikea blinds)

[sashaz]

Thank you, I didnt see that when I tried to update my cards. Is that a standard card or a custom card? I didn’t see that either on the wiki for this design system.

[brewston (Tim Jones)]

custom:mushroom-cover-card

That particular card is :

type: vertical-stack
cards:
  - type: custom:mushroom-cover-card
    entity: cover.left_blind
    name: Left Bedroom Blind
    show_position_control: true
    show_buttons_control: true
  - type: custom:mushroom-cover-card
    entity: cover.right_blind
    name: Right Bedroom Blind
    show_position_control: true
    show_buttons_control: true
theme: Mushroom
card_mod:
  style: |
    ha-card {
      opacity: 0.2;
      padding-left: 25px;
      padding-right: 25px;
      padding-bottom: 25px;
    }

[sashaz]

Thank you I will implement this.

[ChileHA]

It seems I did not, thought I just did and still no luck but there is a change. The secondary text on the left is black (I was the same than the right before) after applying the format code.