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

If you only want to affect the background just use rgba instead for your color. then you can set an alpha channel which affects opacity of the color.

card_mod:
  style: |
    ha-card {
      background: rgba(var(--rgb-card-background-color), 0.5);
    }

you can technically also do this with hex color like you have, but you then need to include an alpha channel in your color.

so (#00ff44):

with an alpha channel for hex color, is this (#00ff4450) for 50% opacity.

there is 1 problem with using hex with alpha channel, and it is that not all browsers support it. namely Internet Explorer. not too big of an issue - but for consistencies sake i recommend just using rgba instead :slight_smile:

you can look at the colors section of the guide in my profile, its in the original post :slight_smile:

1 Like

Thank you for the explanation, going to play around with this :slight_smile:

Hi Dimitri, do you know how to change the secondary information of an input_number card?

Change what exactly?

Senza titolo

@dimitri.landerloos I have to change the orange temperature to this “{{state_attr(‘climate.stufa’, current_temperature)}}”


I just want to combine it all into one big card to reduce the space and make it look more beautiful.
Can you suggest any options?)

Ah, you need to replace text. there would be 2 ways to do this. my favourite is actually combining 2 cards together, but it can also be done with just 1 card and card mod :slight_smile:

  1. Combine 2 cards + some card mod:
    image
Code
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:test-tube
    primary: TEST
    secondary: '{{state_attr(''climate.office_heating'', ''current_temperature'')}}'
    card_mod:
      style: |
        ha-card {
          border: none !important;
          box-shadow: none !important;
          padding-bottom: 0px !important;
        }
  - type: custom:mushroom-number-card
    entity: input_number.dishwasher_pod_add
    display_mode: buttons
    card_mod:
      style: |
        mushroom-state-item {
          display: none;
        }
        ha-card {
          border: none !important;
          box-shadow: none !important;
        }

Now the top bit is fully templatable, like a normal mushroom template card (because it is).

  1. Card mod only on original card.
    image
Code
type: custom:mushroom-number-card
entity: input_number.dishwasher_pod_add
display_mode: buttons
card_mod:
  style:
    mushroom-state-info$: |
      .secondary {
        color: transparent !important;
        position: relative;
      }
      .secondary:after {
        content: '{{state_attr('climate.office_heating', 'current_temperature')}}';
        position: absolute;
        left: 0px;
        color: var(--secondary-text-color);
      }
1 Like

Not really a designer - i just try and help people get their ideas into reality.

but you can move them closer if thats what you are looking for as well.
--chip-spacing: 0px;

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.dimitri_landerloos
card_mod:
  style: |
    ha-card {
      --chip-background: none;
      --chip-border: none !important;
      --chip-box-shadow: none !important;
      --chip-spacing: 0px;
    }

you can even use negative values to overlap the chips.

it’s already better, but it looks like balls))
But what if you create an empty chip, and make a large outline for it, and remove the outline for other chips?)


in principle, this option suits me, thank you)

Fantastic!!!

Can you tell me how to create a similar card but using the fan_modes feature of the climate card?

You cant have 1 chip with multiple icons. but if you just want it to look like it is the case you can just style the container that the chips live in to look like a chip instead like this:
image

card_mod:
  style: |
    ha-card {
      border: 1px solid lightgrey !important;
      border-radius: 20px !important;
      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2) !important;
      background: var(--card-background-color) !important;
      --chip-background: none;
      --chip-border: none !important;
      --chip-box-shadow: none !important;
      --chip-spacing: 0px;
    }

same way as i put as my 1st example. just replace the bottom with the fan card you want to use.

so replace this:

  - type: custom:mushroom-number-card
    entity: input_number.dishwasher_pod_add
    display_mode: buttons
    card_mod:
      style: |
        mushroom-state-item {
          display: none;
        }
        ha-card {
          border: none !important;
          box-shadow: none !important;
        }

with for example this:

  - type: custom:mushroom-fan-card
    entity: fan.ensuite_relay_l1
    show_percentage_control: true
    show_oscillate_control: true
    collapsible_controls: false
    card_mod:
      style: |
        mushroom-state-item {
          display: none;
        }
        ha-card {
          border: none !important;
          box-shadow: none !important;
        }

Sorry Dimitri, I didn’t explain myself well.

I have a climate entity that supports fan mods functionality.

For this I would like to create a card similar to the other so as to set the fan speed.

Turns out its Firefox not getting the styling right. happened to look on Edge and it looks the same now. So i had a look to see if i can find a solution and i think i found one.

you should just be able to change the background-position: right; to background-position: 96%; in the stack in card (that contains all other cards) it will then be nudged ever so slightly to the left allowing to show all 4 corners :slight_smile:

Screenshot 2023-12-12 164720

oh and if you wanted to swap only artist and track whilst music is playing you can do this instead (i admit it is a bit weird for it to say Idle and then Office Speaker for example underneath swapping the default way):

Code to replace current mushroom media player card
  - type: custom:mushroom-media-player-card
    entity: media_player.office_speaker
    icon: mdi:play
    use_media_info: true
    use_media_artwork: false
    show_volume_level: false
    fill_container: false
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            {% if not states(config.entity) in ['idle', 'off'] %}
              color: transparent !important;
              position: relative;
            {% endif %}
          }
          .secondary {
            {% if not states(config.entity) in ['idle', 'off'] %}
              color: transparent !important;
              position: relative;
            {% endif %}
          }
          .secondary:after {
            {% if not states(config.entity) in ['idle', 'off'] %}
              content: '{{state_attr(config.entity, 'media_artist')}}';
            {% endif %}
            position: absolute;
            left: 0px;
            color: black;
          }
          .primary:after {
            {% if not states(config.entity) in ['idle', 'off'] %}
              content: '{{state_attr(config.entity, 'media_title')}}';
            {% endif %}
            position: absolute;
            left: 0px;
            color: black;
          }
        .: |
          mushroom-shape-icon {
            display: flex;
            {% set media_type = state_attr(config.entity, 'media_content_type') %}
            {% if  media_type == 'music' %}
              --card-mod-icon: mdi:music;
              animation: beat 1.3s ease-out infinite both;
            {% elif media_type == 'playlist' %}
              --card-mod-icon: mdi:music;
              animation: beat 1.3s ease-out infinite both;
            {% else %}
              --card-mod-icon: mdi:play;
            {% endif %}

            {{ 'animation: none;' if not is_state(config.entity, 'playing') }}

          }
          @keyframes flicker {
            0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
            32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
          }
          @keyframes beat {
            0%, 60% { --icon-symbol-size: 21px; }
            5%, 17%, 57% { --icon-symbol-size: 22px; }
            10%, 20%, 51% { --icon-symbol-size: 23px; }
            25%, 45% { --icon-symbol-size: 24px; }
            30%, 39% { --icon-symbol-size: 25px; }
            33% { --icon-symbol-size: 26px; }
          }
          ha-card {
            --ha-card-border-width: 0;
          }

Hello

I want to change background color of template card but i can’t

What i’m doing wrong :pensive:

type: custom:stack-in-card
mode: horizontal
style: |
  ha-card {
    width: 370px;
    border: none;
    background-color: #FAFAFA!important;   
    margin-left: -6px;
   }
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: JanelaBanca
        secondary: '{{ states("binary_sensor.contact_sensor")}}'
        icon: mdi:window-closed-variant
        entity: binary_sensor.contact_sensor_2
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-color: red!important;
                --shape-color: #FBD7D4!important;
               }
        sytle: |
          ha-card {
            width: 110px;
            border-style: none;
            background-color: #E2E2E2!important;
          }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: JanelaFogao
        secondary: '{{ states ("binary_sensor.contact_sensor_3")}}'
        icon: mdi:window-closed-variant
        entity: binary_sensor.contact_sensor_3
        card_mod: null

to start…“sytle:” should be “style:”


Just a quick THANKS!!..the contributors on this site have taught me so much!! I was able to create icons with colors based on the actual hue color state!

8 Likes

Good morning,

I hope my topic is right here.

I created the mushroom tiles like in the screenshot.

When I open the dashboard for the first time, you can see the frame around the horizontal stack. If I change the dashboard briefly and then open it again, you can no longer see the frame. (That’s how it should be.)

Can someone give me a tip where I still have an error?

Have a nice day everyone.

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-template-card
            primary: Küche
            icon: mdi:countertop
            tap_action:
              action: navigate
              navigation_path: mobile_küche
            hold_action:
              action: toggle
            icon_color: ''
            fill_container: true
            layout: horizontal
            multiline_secondary: false
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: binary_sensor.fenstersensor_kuche_unten_iaszone
                state: 'on'
            chip:
              type: template
              icon: mdi:window-open-variant
              content: DF Unten
        alignment: end
        style: |
          ha-card {
            --chip-border-width: 2px;
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: none;
            --chip-height: 40px;
            margin-top: 15px;
            margin-right: 5px;
          }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        alignment: end
        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: 0px;
          }
        chips:
          - type: template
            content: Licht
            icon: mdi:lightbulb
            entity: light.lichtschalter_kuche
            icon_color: |-
              {% if is_state('light.lichtschalter_kuche', 'on') %}
                yellow
              {% else %}
                disabled
              {% endif %}
            tap_action:
              action: toggle
            hold_action:
              action: navigate
              navigation_path: mobile_küche

hello

You have right :man_facepalming::man_facepalming::man_facepalming:, but didn’t work

Thanks