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

Using this for youtube music, not spotify but can you share the script files, please? I wanna see if I can use this card too. Thanks.

where exactly do i wirte this? I have my dashboard complete but I am unsure of where to the card mod theme

I’ve just created a new card using a bunch of mushroom’s :face_with_raised_eyebrow: and changed the tap_action for the covers to more-info, however when I tap on the icon nothing happens at all.

I don’t know if this is something wrong with my card config or a bug…

image

Card Code
type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-title-card
        title: Lounge
        subtitle: '{{ states(''sensor.lounge_multisensor_air_temperature'')|float(0)}}°C'
        alignment: start
      - type: custom:mushroom-entity-card
        entity: binary_sensor.paradox_z4_lounge_pir
        primary_info: state
        secondary_info: last-changed
        fill_container: true
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.lounge_downlights
        name: Downlights
        layout: vertical
      - type: custom:mushroom-light-card
        entity: light.sliced_wood_lamp
        name: Wood Lamp
        layout: vertical
      - type: custom:mushroom-cover-card
        entity: cover.lounge_west_roller_shutter
        name: West
        layout: vertical
        tap_action: more-info
      - type: custom:mushroom-cover-card
        entity: cover.lounge_centre_roller_shutter
        name: Centre
        layout: vertical
        tap_action: more-info
      - type: custom:mushroom-cover-card
        entity: cover.lounge_east_roller_shutter
        name: East
        layout: vertical
        tap_action: more-info

As a side note, how would I modify the code so the names of the first two light entities aren’t cut off due to being too long?

1 Like

It goes in your theme file. You are probably using the default one, so you will need to create one.

You must use this:

    tap_action:
      action: more-info

For the long names you must use template card to short the text ord card mod to change the font.

Greatings Steffen

1 Like

You can target a specific type of card by specifying the class instead of ha-card. For the Mushroom Template Card the class is .type-custom-mushroom-template-card, so we would add it like this to our theme:

    card-mod-card: |
        .type-custom-mushroom-template-card:active {
          transform: scale(1.02);
          transition: 0s;
        }
2 Likes

Have a look here:

1 Like

Brilliant !
Many thanks for your kind and generous knowledge sharing, @rhysb !

1 Like

Can you share your code ?

This are some interesting room card.

I made a little test, without cardmod for now
image

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-entity-card
    entity: sensor.temperatura_studio
    name: Studio
    icon: mdi:space-station
    icon_color: orange
    layout: horizontal
    fill_container: false
  - square: false
    columns: 3
    type: grid
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.studioknx_2
        primary_info: none
        secondary_info: none
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        card_mod:
          style: |
            mushroom-shape-icon {
              --card-mod-icon: 
              {% if is_state(config.entity, 'heat_cool') %}
                mdi:autorenew
              {% elif is_state(config.entity, 'heat') %}
                mdi:fire
              {% elif is_state(config.entity, 'cool') %}
                mdi:snowflake
              {% elif is_state(config.entity, 'dry') %}
                mdi:water-percent
              {% elif is_state(config.entity, 'fan_only') %}
                mdi:fan
              {% else %}
                mdi:air-conditioner 
              {% endif %};
            }
      - type: custom:mushroom-light-card
        entity: light.studio_knx_2
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
      - type: custom:mushroom-light-card
        entity: light.lampada_scrivania
        primary_info: none
        secondary_info: none
4 Likes

Sure though it’s a work in progress. I’ve got a button card in the middle just to add some height to align the bottom chip card to the bottom - probably a much better way of accomplishing this but it works for me (the value is enough to align it to the bottom on my mobile).

I’ve changed it a bit since the screenshot

image

Note that the vertical padding is wrong here because this screenshot is taken from my PC - whereas im designing this for mobile. Not sure if anyone knows the right css to use to make either the bottom chip card align bottom, or to make the top template card take up all available vertical space?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Kitchen
    secondary: '{{ states(''sensor.display_temperature'') }}°'
    icon: mdi:silverware
    icon_color: none
    entity: light.living_room_lights
    tap_action:
      action: navigate
      navigation_path: bathroom
    hold_action:
      action: toggle
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        ha-card {
            margin-bottom: 30px;
        }
        :host {
          --mush-card-primary-font-size: 16px;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: group.kitchen_motion
        icon: >-
          {{ iif(is_state('group.kitchen_motion', 'on'), 'mdi:motion-sensor',
          'mdi:motion-sensor-off') }}
        icon_color: black
        card_mod:
          style: |
            ha-card {
              --chip-background: {{ iif(is_state("group.kitchen_motion", "on"), "rgba(255,255,255,0.8)", "rgba(0,0,0,0.2)") }};
            } 
      - type: template
        entity: light.kitchen_lights
        icon: >-
          {{ iif(is_state('light.kitchen_lights', 'on'),
          'mdi:lightbulb-multiple', 'mdi:lightbulb-multiple-off') }}
        card_mod:
          style: |
            ha-card {
              --chip-background: {{ iif(is_state("light.kitchen_lights", "on"), "rgba(255,255,255,0.8)", "rgba(0,0,0,0.2)") }};
            } 
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-spacing: 5px;
          padding-right: 10px;
        } 
card_mod:
  style: |
    ha-card {
      aspect-ratio: 1/0.8;
      background: rgba(194,175,201,255);
      --primary-text-color: black;
      --secondary-text-color: black;
    }
    :host([dark-mode]) {
      background: rgba(var(--rgb-primary-background-color), 0.2);
    } 

Can you tell me what to do to have a photo instead of an icon?

please

Hi,

I have been trying to get my light cards to fit to the phone screen more nicely.
No matter how hard I try, I cannot get the height adjusted.
What is wrong here:

type: vertical-stack
cards:
  - type: custom:mushroom-light-card
    entity: light.olohuone1
    name: Lipasto
    use_light_color: true
    show_brightness_control: true
    show_color_temp_control: true
    show_color_control: true
    collapsible_controls: false
    card_mod:
      style: |
        ha-card {
          height: 100px;
        }

Hello,

I have changed the image of a scene via costumize.yaml and it is also displayed to me.

How do I manage to display this image in a template card etc.? no matter what I do, I can’t do it.

can you help me?

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: custom:mushroom-template-card
            show_entity_picture: true
            entity_picture: /local/Lustiger.jpeg
            icon_color: white
            layout: vertical
            tap_action:
              action: call-service
              service: scene.turn_on
              service_data: {}
              target:
                entity_id: scene.kuche_sonnenuntergang_savanne
            secondary: Night
          - type: custom:mushroom-template-card
            icon: mdi:television
            icon_color: white
            tap_action:
              action: call-service
              service: scene.turn_on
              service_data: {}
              target:
                entity_id: scene.tv_lights
            hold_action:
              action: none
            double_tap_action:
              action: none
            layout: vertical
            secondary: Media
          - type: custom:mushroom-template-card
            layout: vertical
            entity: script.1590801199735
            icon: mdi:lightbulb-on
            icon_color: white
            tap_action:
              action: call-service
              service: scene.turn_on
              service_data: {}
              target:
                entity_id: scene.living_area_lights_100
            double_tap_action:
              action: none
            hold_action:
              action: none
            secondary: 'On'
        card_mod:
          style: |
            ha-card {
               --chip-box-shadow: 0px 0px;
              background: #3d5afe
             }
    card_mod: null
    style: |
      ha-card {
        box-shadow: 0px 0px;
       }    
card_mod: null
style: |
  ha-card {

    background: #3d5afe
   }

costumize.yaml

scene.kuche_sonnenuntergang_savanne:
      friendly_name: Savanne
      entity_picture: /local/Lustiger.jpeg

That worked great, thank you so much!!

2 Likes

Mushroom friends,

I am looking for guidance on how to make the fade-out green border on the below Template Chip conditional on the value of an input_boolean.

I currently have this:
Screenshot 2023-01-11 at 17.20.11

My code:

    - type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: group.alle_lichten
          icon: >-
            {{ 'mdi:lightbulb-on-90' if is_state(entity, 'on') else
            'mdi:lightbulb-off-outline' }}
          icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
          tap_action:
            action: call-service
            service: input_boolean.toggle
            target:
              entity_id: input_boolean.on_off_toggle_conditional_lights_on
          card_mod:
            style:
              .: |
                ha-card:after {
                  content: "{{ expand(states.group.alle_lichten) | selectattr( 'state', 'eq', 'on') | list | count }}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-orange));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -10px;
                  right: -0px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px; 
                  }
                ha-card {
                  --chip-background: rgba(var(--rgb-green), 0.2);     /*Background color of chip */
                  box-shadow: 0px 0px 8px 4px rgba(var(--rgb-state-person-home), 0.6) !important;
                  /* border: solid 2px !important; */
                }

My goal: only show the green fade-out border if “input_boolean.on_off_toggle_conditional_lights_on” is ‘on’, whilst keeping the rest of the chip + badge intact

4 Likes
 {% if is_state('input_boolean.on_off_toggle_conditional_lights_on', 'on') %}
  --chip-background: rgba(var(--rgb-green), 0.2);     /*Background color of chip */
  box-shadow: 0px 0px 8px 4px rgba(var(--rgb-state-person-home), 0.6) !important;    
 {% endif %}

Thank you @rhysb for the amazing task of creating all these card layouts.

I’ve ‘stolen’ your media card and was wondering if it possible to move the volume control icon to a row below?

So it would look something like this:

2 Likes

I have everything installed and effect is the same:( Ive got only one sensor which tells me that some device have battery at 0 level :( but its not telling which one:(

Start simple and see if this works:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Mushroom
          content:
            type: custom:mushroom-template-card
            primary: Mushroom
            secondary: It works!
            icon: mdi:mushroom
            icon_color: red