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

Ok,
but now I have an other question.

I have make this code:

type: conditional
conditions:
  - entity: binary_sensor.flur_bewegungssensor_motion
    state: 'on'
  - entity: binary_sensor.homematicip_bewegungsmelder_innen
    state: 'on'
  - entity: binary_sensor.bad_bewegungssensor_motion
    state: 'on'
  - entity: binary_sensor.kuche_bewegunssensor_motion
    state: 'on'
  - entity: binary_sensor.schlafzimmer_bewegungssensor_motion
    state: 'on'
card:
  type: custom:mushroom-title-card
  title: Bewegung

But how I must change this code to make an or condition between this entites and no and?

Make it a not_state: 'off'

this is also an and condition or not?

That way, if any of them are on, (not all of them are off) it’ll show.

If I try this code:

type: conditional
conditions:
  - entity: binary_sensor.homematicip_fenster_und_turkontakt_mit_magnet_7
    not_state: 'off'
  - entity: binary_sensor.homematicip_fenster_3
    not_state: 'off'
  - entity: binary_sensor.homematicip_fenster_und_turkontakt_mit_magnet_2
    not_state: 'off'
  - entity: binary_sensor.homematicip_fenster_2
    not_state: 'off'
  - entity: binary_sensor.homematicip_fenster_und_turkontakt_mit_magnet_5
    not_state: 'off'
  - entity: binary_sensor.homematicip_tur
    not_state: 'off'
  - entity: binary_sensor.homematicip_fenster_und_turkontakt_mit_magnet_3
    not_state: 'off'
  - entity: binary_sensor.homematicip_fenster_und_turkontakt_mit_magnet
    not_state: 'off'
  - entity: binary_sensor.homematicip_fenster_und_turkontakt_mit_magnet_4
    not_state: 'off'
  - entity: binary_sensor.homematicip_fenster_und_turkontakt_mit_magnet_6
    not_state: 'off'
card:
  type: custom:mushroom-title-card
  title: Unsicher

I get this error:
Conditions are invalid

Maybe it’s notstate? I don’t remember, try editing it with the UI.

same error.

with state_not I got no error, but the titel Unsicher dont display if one entitie is on.

1 Like

but the titel Unsicher dont display if one entitie is on.

What did you set it to? It’s supposed to be “not off”, not “not on”. Also this is a bit unrelated to Mushroom - maybe it should be moved to the Discord or another thread or a PM?

now I have try state_not: ‘off’

but than it shows not the title if on is on?

Wait… This might not work. I’d encourage you to experiment on your own. This still isn’t related to Mushroom though lol

ok I try :disappointed:

Not sure about your auto-entities, but this should do the trick for the styling:

card_mod:
  style:
    mushroom-state-info$: |
      .primary {
         white-space: normal;
      }
    .: |
      mushroom-state-item {
         margin-bottom: 0px;
      }
      ha-card {
         --ha-card-background: transparent;
         --card-primary-font-size: 12px;
      }
      mushroom-shape-icon {
         --shape-color: none !important;
         --shape-color-disabled: none !important;
      }

Please note warning from piitaya regarding complex CSS. It may break with future updates.

1 Like

I don’t think that won’t work, it targets ha-card in a shadow-root inside of it; I’m more confident in the version I posted.

Why don’t you put them in a group?

Nope, it works fine.

Oh, I see why it works anyway. You could probably de-indent the .: | section though.

1 Like

Try this:

type: custom:mushroom-chips-card
chips:
  - type: template
    card_mod:
      style: |
        ha-card {
          {% set phase = states('sensor.moon') %}
          --chip-background: url( '/local/moon_phases/{{ phase }}.png?v=1' ) no-repeat center center;
        }
2 Likes

This is still a work-in-progress, but here is my Person Pop-up. It uses browser-mod for the pop-up. Hopefully you will find what you need here.

tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    deviceID:
      - this
    title: Rhys
    card:
      type: vertical-stack
      cards:
        - square: false
          columns: 2
          type: grid
          cards:
            - type: custom:mushroom-entity-card
              entity: person.rhys
              use_entity_picture: true
              secondary_info: last-changed
              tap_action:
                action: none
              hold_action:
                action: none
              double_tap_action:
                action: none
              card_mod:
                style: |
                  ha-card {
                    margin-top: 8px;
                    margin-left: 10px;
                    background: none;
                    --ha-card-box-shadow: 0px;
                  }
            - type: custom:mushroom-template-card
              primary: '{{ states(entity) | capitalize }}'
              icon: ''
              entity: person.rhys
              tap_action:
                action: none
              hold_action:
                action: none
              double_tap_action:
                action: none
              secondary: ''
              layout: vertical
              fill_container: true
              card_mod:
                style: |
                  ha-card {
                    margin-top: 8px;
                    margin-right: 10px;
                    background: none;
                    --ha-card-box-shadow: 0px;
                    align-items: flex-end;
                  }
        - type: history-graph
          entities:
            - entity: person.rhys
              name: ' '
          hours_to_show: 24
          refresh_interval: 1
          card_mod:
            style: |
              ha-card {
                background: none;
                margin-top: -15px;
                margin-bottom: -15px;
                margin-left: -5px;
                margin-right: 10px;
                --ha-card-box-shadow: 0px;
              }
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-template-card
              primary: '{{ states(entity) }}%'
              secondary: >-
                {{
                states("sensor.rhys_phone_battery_state")
                }}
              icon: >
                {% set battery_level = (states(entity) |
                int / 10) | round(0) | int * 10 %}

                {% if
                is_state('binary_sensor.rhys_phone_is_charging',
                'on' ) %}
                  {% if battery_level > 0 %}
                    mdi:battery-charging-{{ battery_level }}
                  {% else %}
                    mdi:battery-charging-outline
                  {% endif %}
                {% else %}
                  {% if battery_level == 100 %}
                    mdi:battery
                  {% elif battery_level > 0 %}
                    mdi:battery-{{ battery_level }}
                  {% else %}
                    mdi:battery-alert-variant-outline
                  {% endif %}
                {% endif %}
              icon_color: >-
                {% set battery_level = states(entity) |
                int %}

                {% if battery_level > 90 %} 
                  green
                {% elif battery_level > 60 %}
                  light-green
                {% elif battery_level > 50 %}
                  lime
                {% elif battery_level > 40 %}
                  yellow
                {% elif battery_level > 30 %}
                  amber
                {% elif battery_level > 20 %}
                  orange
                {% elif battery_level > 10 %}
                  deep-orange
                {% else %}
                  red
                {% endif %} 
              entity: sensor.rhys_phone_battery_level
              layout: vertical
              tap_action:
                action: none
              hold_action:
                action: none
              double_tap_action:
                action: none
              card_mod:
                style: |
                  ha-card {
                    background: none;
                    --ha-card-box-shadow: 0px;
                    height: 117px !important;
                    justify-content: start !important;
                  }
            - type: custom:mushroom-template-card
              primary: '{{ states(entity) }}'
              secondary: >-
                {% set signal_level =
                states('sensor.rhys_phone_wifi_signal_strength')
                | int %} {% if signal_level != -1 %} 
                  {{ signal_level }} dBm
                {% endif %}
              icon: >-
                {% set signal_level =
                states('sensor.rhys_phone_wifi_signal_strength')
                | int | abs %} {% if signal_level > 90 %} 
                  mdi:wifi-strength-outline
                {% elif signal_level > 80 %} 
                  mdi:wifi-strength-1
                {% elif signal_level > 70 %}
                  mdi:wifi-strength-2
                {% elif signal_level > 60 %}
                  mdi:wifi-strength-3
                {% elif signal_level > 1 %}
                  mdi:wifi-strength-4
                {% else %}
                  mdi:wifi-strength-off
                {% endif %}
              entity: sensor.rhys_phone_wifi_connection
              layout: vertical
              fill_container: false
              icon_color: blue
              tap_action:
                action: none
              hold_action:
                action: none
              double_tap_action:
                action: none
              card_mod:
                style: |
                  ha-card {
                    background: none;
                    --ha-card-box-shadow: 0px;
                    height: 117px !important;
                    justify-content: start !important;
                  }
        - type: custom:mushroom-template-card
          primary: Find Phone
          secondary: ''
          icon: mdi:target
          layout: horizontal
          icon_color: red
          tap_action:
            action: call-service
            service: notify.mobile_app_rhys_phone
            data:
              message: Ringing phone...
              title: Find Phone
              data:
                ttl: 0
                importance: high
                priority: high
                tag: Find
                channel: alarm_stream
            target: {}
          card_mod:
            style: |
              ha-card {
                width: 155px;
                margin-left: auto;
                margin-right: auto;
                background: rgba(var(--rgb-red), 0.1);
                margin-bottom: 12px !important;
              }
        - type: map
          entities:
            - entity: person.rhys
          hours_to_show: 12
card_mod:
  style: |
    ha-card {
        --chip-background: rgba(var(--rgb-state-person-home), 0.4);
        margin-top: 5px;
        margin-bottom: 10px;
    } 
17 Likes

Any idea why the entity card does not honor ha-card-border-radius using the default “mushroom” theme?Screen Shot 2022-07-02 at 11.43.07 PM

Mushroom:
    # Home Assistant override
    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
    ha-card-border-radius: 12px
    modes:
        light: {}
        dark: {}

I dig it. Can you post the code for the white color card please? Thanks!