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

Hello,

I need help with a simple layout challenge: I would like to have the select box to take +/- 75% of the width of this block.

image

I have tried many variations of this code, but none work. I guess it’s the naming of the mushroom cards I am no getting right?

type: custom:mod-card
style:
  hui-horizontal-stack-card$: |
    custom:mushroom-select-card  {
      margin-left: 10px !important;
      margin-right: 10px !important;
      margin-bottom: 10px !important;
      flex: 75% !important; 
    }
    custom:mushroom-template-card {
      margin-right: 10px !important;
      margin-bottom: 10px !important;
      flex: %25 !important; 
    }
card:
  type: horizontal-stack
  cards:
    - type: custom:mushroom-select-card
      entity: input_select.media_music_spotify_playlist
      primary_info: none
      secondary_info: none
      icon_color: green
      icon: mdi:spotify
      layout: horizontal
      fill_container: true
    - type: custom:mushroom-template-card
      primary: ''
      secondary: ''
      icon: mdi:play
      fill_container: true
      icon_color: green
      layout: vertical
      hold_action:
        action: none
      double_tap_action:
        action: none
      tap_action:
        action: call-service
        service: script.media_music_play
        target: {}
      card_mod:
        style: |
          ha-card {
            --icon-size: 48px;
          }

Hi mase, thank you for your answer.

type: custom:mushroom-template-card
primary: Coffee
icon_color: {{ 'amber' if is_state(switch.shellyplugs_coffee_switch_0,'on') else 'grey' }}
icon: mdi:monitor
entity: switch.shellyplugs_coffee_switch_0
multiline_secondary: true

I’m not sure where to set the missed comma from the error message.

Konfigurationsfehler erkannt:
missed comma between flow collection entries (3:24)

 1 | type: custom:mushroom-template-card
 2 | primary: Coffee
 3 | icon_color: {{ 'amber' if is_state(switch.shellyplugs_c ...
----------------------------^
 4 | icon: mdi:monitor
 5 | entity: switch.shellyplugs_coffee_switch_0

this works for me on alot of cards

type: custom:mushroom-template-card
primary: Wohnung
icon: fas:home
multiline_secondary: false
tap_action:
  action: navigate
  navigation_path: wohnung
icon_color: |
  {{ '#ff9800' if is_state(entity,'on') else '' }}
entity: light.alle_lichter
double_tap_action:
  action: toggle
secondary: >-
  {{states('sensor.bt_temperature_inside') | round(0) }}° |
  {{states('sensor.humidity_inside') | round(0) }}%
badge_icon: >-
  {{ 'mdi:door-open' if is_state('binary_sensor.wohnungsture_contact','on') else
  '' }}
badge_color: blue
fill_container: false
layout: vertical

there is no need to set switch.shellyplugs_coffee_switch_0 in the icon_color: since you set it already as an entity.

maybe the amber or grey is the problem, guess you could try the HEX-code.

1 Like

Try putting the code on a new line like you did in your original post.

icon_color: >
    {{ 'amber' if is_state(switch.shellyplugs_coffee_switch_0,'on')

1 Like

I have something similar

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 33px
      margin: '-4px -4px -8px -4px'
      padding: 0px
    cards:
      - type: entities
        entities:
          - entity: input_text.android_search
            name: Search
            icon: hass:none
        card_mod:
          style: |
            ha-card {
              margin: 0 20px 0 -40px;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:magnify
        tap_action:
          action: call-service
          service: script.shield_tv_android_search
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              align-items: flex-end;
              margin: 8px 0 0 0;
            }
            :host {
              --mush-icon-border-radius: 12px;
              --mush-icon-size: 48px;
            }
            ha-card:active {
              transform: scale(0.925);
              transition: 0s;
            }
card_mod:
  style: |
    ha-card {
      --ha-card-border-width: 0px;
    }

1 Like

Umm, that’s how it’s supposed to work…

With no offense intended, why would that be the intended? As stated, that’s the opposite of how it’s been since I started using the mushroom cards.

Try:

card_mod:
  style: |
    ha-card {
      overflow: visible !important;
    } 

Good morning everyone. First of all, it’s a great thread and I love reading it every day. I have little knowledge of HA, and I wanted to ask some questions about a card I made but I can’t modify it. It’s about the Alarm card. Here are my questions: 1. Could you change the color of the blue icon? I know that later it turns green when putting it together but that doesn’t matter to me. 2. The home arm icon is not visible because of the background image and the primary and secondary text is black. Can I modify it? 3. Below are 5 scenes of opening shutters/garage. They are conventional chips. I want to put a circle of color according to state, and the arrows that accompany it that are label: name, I wanted them to be located where they are. I hope I have explained myself well. Thanks for everything.

Came across you post and thought it still might be helpful for you or someone else although it’s nearly a year old.
I managed to get it working by putting card-mod: style| directly directly under the mushroom-chips-card instead of the indiviual chips.

- type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0px;
          }
    chips: ...

If its on a single line you need to enclose it in quotes:

icon_color: "{{ 'amber' if is_state(switch.shellyplugs_coffee_switch_0,'on') else 'grey' }}"

I was looking something to animate my Spotify banner on my new design. I wanted to give it an ambilight kind of effect. Then I decided to use @rhysb multimedia card. I tweaked it and the result seems amazing.

These 2 pictures are when something playing on Spotify.

and this is when nothing is playing.

Also the Tv card that I shared lately fitted my new dashboard perfectly.

10 Likes

Hello, I want to be able to open an android app that is on my wall tablet from the browsermod dash. I have been able to do this with fully kiosk, but it keeps crashing and reloading, hence using browser mod. I can put up with the devices top bar on show, and control the screen on and off with an external motion sensor (inbuilt one does not work), but I need the “app launch” from a button. I have tried lots of examples including the Android Webview . Any help would be greatly appreciated, Thanks.

May I ask if you have any idea how to implement such an animation as an icon? Have tried several things to implement but unfortunately without success

EDIT: Well… It was in my themes file. I’ll use layout-card to get around this :slight_smile:

    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }

As always awesome job! I have a some trouble implementing this and I’m not sure where it breaks for me. I have this padding that I cant get rid of. Its not shown whenever I’m in edit mode but is there when leaving it. I made the background black to make it stick out more.

image

1 Like

Had the same problem and was able to fix it by adjusting the code by setting padding to 0

    :host {
      padding-left: 0px!important; /* <- new styling */
      padding-bottom: 0px!important; /* <- new styling */
      padding-right: 0px!important; /* <- new styling */
      /* Add background to host to prevent transparent card */
      border-radius: var(--ha-card-border-radius, 12px);
      background: var(--card-background-color);

      /* Assign album art color to variable used in sticky media player */
      {% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
        --album-art-color: {{ states('sensor.muted_color') }};
      {% else %}
      
        /* Hide the sticky media player when it is idle */
        display: none !important;
      {% endif %}

      /* Make the media player sticky at the bottom of the page */
      position: sticky;
      bottom: 12px;
    }
1 Like

That was it! Thank you!

I managed to adapt a climate card i found in this tread for my system. It is working well for my. My next step ist now to spin the fan icon in the chips area.

Unfortunatly even with @rhysb examples i did not manage to spin the icon.

Could someone please help.

type: custom:vertical-stack-in-card
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        entity: climate.rb_lr_wallthermostat
        primary: Wohnzimmer
        secondary: '{{ states(''sensor.rb_lr_climatesensor_temperature'') }}°C'
        icon: mdi:thermostat
        icon_color: grey
        badge_icon: none
        badge_color: none
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-climate-card
        entity: climate.rb_lr_wallthermostat
        icon_type: none
        primary_info: none
        secondary_info: none
        show_temperature_control: true
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          --chip-border-width: 0px;
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: none;
          --chip-height: 40px;
          margin-top: 0px;
          margin-right: 5px;
        }
    alignment: end
    chips:
      - type: template
        entity: fan.rb_lr_ceilingfan_state
        content: Ventilator
        icon: mdi:fan
        icon_color: >-
          {{ 'orange' if is_state('fan.rb_lr_ceilingfan_state', 'on') else
          'grey' }}
        tap_action:
          action: toggle
      - type: template
        content: Auto
        icon: mdi:thermostat-auto
        icon_color: >-
          {{ 'orange' if is_state('climate.rb_lr_wallthermostat', 'auto') else
          'grey' }}
        tap_action:
          action: call-service
          service: climate.set_hvac_mode
          data:
            hvac_mode: auto
          target:
            entity_id: climate.rb_lr_wallthermostat
      - type: template
        content: Manu
        icon: mdi:thermostat
        icon_color: >-
          {{ 'orange' if is_state('climate.rb_lr_wallthermostat', 'heat') else
          'grey' }}
        tap_action:
          action: call-service
          service: climate.set_hvac_mode
          data:
            hvac_mode: heat
          target:
            entity_id: climate.rb_lr_wallthermostat

Did you also have problem with the max-width: fit-content setting on the first layer of the card? Mine is getting pushed together like this image

When removing it I get the intended image

4 Likes

If you remove it, longer titles will be truncated. You can add a min-width to .actions to correct:

      min-width: calc(2 * var(--mush-spacing, 12px) + 3 * var(--mush-control-height, 42px));

I’ve updated the original post if you have problems.

2 Likes