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

Thanks man…it works …is it limited to internet ? Like if i lose internet access would the font fail to display ?

1 Like

Thank you so very much…

1 Like

Is possible use default entity icon in a template chip?

I have set the mush-rgb-disabled to red, so I could see the difference, and it works with the cards (entity, cover, climate), but not with the chips.

Is this a chip limit, or a bug?

Thanks

Maybe a bit of both. Chips use --primary-text-color, but seems to ignore it when defined in a theme.

Try using --primary-text-color:

Here you go, a Mushroom Light Scene Card with four (or more) buttons:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-light-card
    entity: light.dining_room_light
    show_brightness_control: true
    collapsible_controls: true
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: input_boolean.scene_1
        icon_color: red
        icon: mdi:numeric-1-circle
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            } 
      - type: entity
        entity: input_boolean.scene_2
        icon_color: green
        icon: mdi:numeric-2-circle
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            }
      - type: entity
        entity: input_boolean.scene_3
        icon_color: blue
        icon: mdi:numeric-3-circle
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-blue' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            } 
      - type: entity
        entity: input_boolean.scene_4
        icon_color: purple
        icon: mdi:numeric-4-circle
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-purple' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            } 
    card_mod:
      style: |
        ha-card {
            --chip-box-shadow: none;
            top: 16px;
            width: -webkit-fill-available;
            right: 12px;
            position: absolute;
        } 
        .chip-container {
            right: 0px;
            position: absolute;
        }

Updated: Support collapsible control and toggle issue. Credit to @leofabri :grinning:

29 Likes

The toggle of the lights by pressing the light bulb seems to be very inconsistent when these buttons are also present.
Also, how do I keep those buttons in place when collapsible_controls is true?

Not sure if this is the right way, but it seems to work.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-light-card
    entity: light.dining_room_light
    show_brightness_control: true
    show_color_temp_control: true
    show_color_control: true
    collapsible_controls: true
    use_light_color: true
    name: Stanza
    icon: mdi:wall-sconce
    hide_state: false
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 20px;
          --card-primary-font-weight: normal;
          border-radius: 0px;
          --ha-card-background: none;
          --ha-card-box-shadow: 0px;
          --chip-font-weight: normal;
        }
        mushroom-shape-icon {
          {{ '--card-mod-icon: mdi:ceiling-light-multiple;' if is_state(config.entity, 'on') else '--card-mod-icon: mdi:ceiling-light-multiple-outline;' }}
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: input_boolean.scene_1
        icon_color: orange
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-orange' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            } 
      - type: entity
        entity: input_boolean.scene_2
        icon_color: orange
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-orange' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            }
      - type: entity
        entity: input_boolean.scene_3
        icon_color: orange
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-orange' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            } 
      - type: entity
        entity: input_boolean.scene_4
        icon_color: orange
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-orange' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            } 
    alignment: end
    card_mod:
      style: |
        ha-card {
            --chip-box-shadow: none;
            top: 18px;
            width: -webkit-fill-available;
            right: 12px;
            position: absolute;
            display: block;
        }
        .chip-container {
            right: 0px;
            position: absolute;
        }
5 Likes

I have made something similar, but with cards and not chips:

image

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Sicurezza
    secondary: Controllo
    icon: mdi:alert-decagram-outline
    tap_action:
      action: navigate
      navigation_path: sicurezza
    icon_color: orange
    multiline_secondary: true
  - square: false
    columns: 4
    type: grid
    cards:
      - type: custom:mushroom-entity-card
        entity: light.luci
        primary_info: none
        secondary_info: none
        layout: horizontal
        icon_color: orange
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
      - type: custom:mushroom-entity-card
        entity: binary_sensor.stato_termostati
        primary_info: none
        secondary_info: none
        layout: horizontal
        icon: mdi:thermostat
        icon_color: orange
      - type: custom:mushroom-entity-card
        entity: binary_sensor.porte
        primary_info: none
        secondary_info: none
        layout: horizontal
        icon_color: orange
      - type: custom:mushroom-entity-card
        entity: binary_sensor.finestre
        primary_info: none
        secondary_info: none
        layout: horizontal
        icon_color: orange
7 Likes

Is it possible to paste your code in YAML please?
Just by pasting this code, I get - of course- a lot of indentation errors and I can’t make it right (still).

Thanks a lot

It’s just the same:


icon: "{{ 'mdi:dog' if is_state('switch.sonoff_10004da9de','on') else 'mdi:cat' }}"

Is there someone that can point me in the right direction? I’m still not able to show mushroom styled cards in a pop up.

Any ideas on what could be causing this? Am I missing something? Thanks for your help.

Nice thanks!!!

1 Like

So I’m really liking the card, question is, can you make an “expandable” version?

Like I’d love just the bar with the current condition (rain) to only show, and then when tapped or a dropped down arrow tapped it expands the card with the temperatures.

Just trying to make it a little smaller to save some space here.

EDIT: I think ill also remove the top weather card since I have yous but still an expandable version would be cool so I can have both.

Hey, how are you producing that weather info using Mushroom?

1 Like

@rhysb
Screenshot 2022-09-25 at 1.04.25 PM
if all the media options are selected then the above is the default layout. On clicking the speaker/volume button the below layout is shown.
Screenshot 2022-09-25 at 1.04.33 PM
is there a way to keep this as the default layout and on clicking the speaker/volume button the first layout is shown?

2 Likes

I just built my first template chip card. In the following code, if I remove the “W” from the end of the content template, and the state of the sensor is zero (and only if it’s zero), the state doesn’t appear at all on the chip. If I add anything at all, like the “W”, the zero shows up. What am I missing?


type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.myenergi_bayview_power_charging
    icon: mdi:car-arrow-left
    icon_color: |-
      {% set charging=states(entity) %}
      {% if charging | int != 0 %}
        {% set state=states('sensor.myenergi_bayview_power_import') %}
        {% if state | int > 200 %}
        red
        {% else %}
        green
        {% endif %}
      {% else %}
      default
      {% endif %}
    content: '{{ states(entity) }} W'
    tap_action:
      action: more-info
    double_tap_action:
      action: more-info
    hold_action:
      action: more-info

Like this:

3 Likes