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

[dimitri.landerloos]

For the same card i already provided you, or for an entirely new card?

Current Card

type: custom:mushroom-template-card
primary: Test
icon: mdi:fountain
icon_color: amber
entity: light.lounge_corner_lamp
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {% if states('sensor.washing_machine_washer_job_state') != 'none' %} {{(((((as_timestamp(states('sensor.washing_machine_washer_completion_time')) - as_timestamp(states('input_datetime.washing_machine_start_time')))) - (as_timestamp(now()) - (as_timestamp(states('input_datetime.washing_machine_start_time'))))) / (as_timestamp(states('sensor.washing_machine_washer_completion_time')) - as_timestamp(states('input_datetime.washing_machine_start_time')))) * 100) | round(0)}}% {% else %} 100% {% endif %} 0%, var(--card-background-color) 0% 100%);
      }
    .: |
      ha-state-icon {
        {% if is_state(config.entity, 'on') %}
          animation: fountain 1.5s ease infinite;
        {% endif %}  
      }  
      mushroom-shape-icon:after {
        content: '24';
        position: absolute;
        top: -11%;
        right: -11%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15px;
        height: 15px;
        font-size: 9px;
        font-weight: 700;
        background-color: rgba(var(--rgb-amber), 0.5);
        border-radius: 50%;
      }
      @keyframes fountain { 
        0%, 100% { clip-path: polygon(0 100%,0 0, 100% 0, 100% 100%); }
        50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
        60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
        70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
        80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
      }  
      ha-card {
         padding: 5px 0px 0px 0px !important;
      }    
      :host {
        --icon-size: 35px !important; 
        --card-primary-font-size: 9px !important;
        --card-secondary-font-size: 9px!important;
      }

New Card

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:fountain
entity: light.lounge_corner_lamp
card_mod:
  style: |
    ha-state-icon {
      {% if is_state(config.entity, 'on') %}
        animation: fountain 1.5s ease infinite;
      {% endif %}  
    }  
    @keyframes fountain { 
      0%, 100% { clip-path: polygon(0 100%,0 0, 100% 0, 100% 100%); }
      50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
      60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
      70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
      80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
    }  
    ha-card {
      padding: 5px 0px 0px 0px !important;
    }    
    :host {
      --icon-size: 35px !important; 
      --card-primary-font-size: 9px !important;
      --card-secondary-font-size: 9px!important;
    }

[dimitri.landerloos]

Its just using layout: vertical in the template cards. But things needed moving around after that. Its just playing around with the values in these sections until it looks the way it should:

        .: |
          ha-card {
            top: -118px;
            background: none !important;
          }

        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
            --icon-size: 20px;
            top: 16px;
            left: 18px;
          }
        .: |
          ha-card {
            top: -183px;
            right: 10px;

Its never easy to overlap cards, so its always a bit of playing around until it looks right.

[Intro_Verti]

Thank you. And yes, I already tried the vertical layout of course, and next to that … I already concluded that it is about playing with the values, but I couldn’t find which one(s)

Thanks for pointing out, I’ll go and play

[image969 (James Scialdone)]

How did you clear the text? What did you write In the script to do so?

[kbrown01]

@image969 I will answer here but see below note. This is two step process because what needs to be done is:

1. Erase the data on the Vizio TV search screen
2. Erase the content in the Home Assistant search box

For step (1), I send the “backspace” command via REST for every character that is in the Home Assistant search box. “Backspace” is codeset 0, code 8. For step (2) I set the Home Assistant search box to a blank.

clear_vizio_search:
  alias: Clear Vizio Search
  sequence:
  - repeat:
      count: '{{ states(''input_text.vizio_search'') | length }}'
      sequence:
      - service: rest_command.vizio_processkey
        data:
          ip: 192.168.1.232
          port: '7345'
          auth: XXXXXXXX
          codeset: '0'
          code: 8
  - service: input_text.set_value
    data:
      value: ' '
    target:
      entity_id: input_text.vizio_search
  mode: single
  icon: mdi:trash-can

NOTE: Getting a bit off topic for Mushroom. If you have future questions perhaps post here:

Vizio TV Integration

I just started a new addition to this code. I got “wife and kid” complaints when trying to search. They hate the OVER-OVER-DOWN-DOWN-SELECT to get “n”. As it turns out, you can use key_command to send the ACSII code of the letter and BAM it works. For example, this in my setup in Home Assistant will take a textbox and send each “letter” as the ord ASCII code: alias: Execute Vizio Search sequence: - repeat: sequence: - service: rest_command.vizio_processkey data: …

[image969 (James Scialdone)]

I appreciate the help, and I feel like I may have over complicated my last question. I didn’t realize your coding was specific to Vizio.

My goal is specifically having a visible text input on a mushroom card which you gave me and it works great for playing music on different Alexa devices in my house.

All I wanted to do as far as clearing when I click on the text box to type in a new song I don’t want to have to backspace the previous letters I typed in. I just want to click one button and it clears the text from the box. So I can start typing something new

[kbrown01]

Then the second part of the script works. Add a delete button and call:

  - service: input_text.set_value
    data:
      value: ' '
    target:
      entity_id: input_text.vizio_search

Of course using your entity input_text. Note that using ‘’ and not ’ ’ will not work, it also has been reported but you need a space which will clear the text field.

[image969 (James Scialdone)]

Awesome, thanks again for the help

[image969 (James Scialdone)]

I read your post, before you took it down. Def sounds cool. IF and when Im ready for that I might reach out.

I think I’d be more interested in something like that for my PLex library. But thats a project for another day. Im using PlexMeetsHomeassistant right now and its garbage.

And Im way off the Mushroom topic here. So thanks again

[Graves01 (JD)]

Does anyone have a solution for me? I do apriciatate any help?. I got it somewhat to work when off but it only shows an icon. How can i make it take up the whole space like a cover? The full layout is a few post up.

Code

type: custom:mushroom-template-card
entity: input_boolean.crucial_velocity_helper
layout: vertical
picture: '{{''/local/images/CrucialVelocityRadio.jpg'' if not is_state(entity, ''on'') }}'
fill_container: false
multiline_secondary: false
tap_action:
  action: call-service
  service: input_boolean.toggle
  target:
    entity_id: input_boolean.crucial_velocity_helper
double_tap_action:
  action: call-service
  service: input_boolean.toggle
  target:
    entity_id: input_boolean.crucial_velocity_helper
card_mod:
  style:
    .: |
      ha-card {
        {{ 'background: center / cover no-repeat url("/local/images/Music1.gif");' if is_state(config.entity, 'on') }}
        width: 100px;
        height: 100px;
        margin: auto;
      }
      mushroom-state-item {
        height: 96px;
        --icon-size: 100px;
      }

[quinquelhas (Marco)]

Hello,

I have edited this card with many if that I have used to change states and colors, when windows open and closed, etc…
My question is it possible to simply, or the way I made is correct

Thanks a lot

style: |
  ha-card {
    width: 360px;
    border: none;
    background-color: #E2E2E2;
    box-shadow: 2px 2px 4px 0px rgba(89,89,89,1);
  }    
cards:
  - type: custom:mushroom-cover-card
    entity: cover.velux_internal_cover_blinds_2
    show_buttons_control: true
    show_position_control: true
    name: CortinaVelux
    card_mod:
      style:
        mushroom-cover-position-control$: >
          mushroom-slider { {% if states('cover.velux_internal_cover_blinds_2')
          == 'open'%}
            --slider-bg-color: #89DF83!important;
          {% else %}
            --slider-bg-color: #FF483F!important;
          {% endif %}  {% if states('cover.velux_internal_cover_blinds_2') ==
          'opening'%}
            --slider-bg-color: #89DF83!important;
          {% endif%} {% if state_attr ('cover.velux_internal_cover_blinds_2',
          'current_position') == 100 %}
            --slider-color: #89DF83!important;
          {% else %}
            --slider-color: #B9B7B7!important;
          {% endif %} }
        mushroom-shape-icon$: >
          .shape {  {% if states ('cover.velux_internal_cover_blinds_2') ==
          'open'%}
            --icon-color: #008B19!important;
          {% else %}
            --icon-color: white!important;
          {% endif %} {% if states ('cover.velux_internal_cover_blinds_2') ==
          'open'%}
            --shape-color: #89DF83!important;
          {% else %}
            --shape-color: #FF483F!important;
          {% endif %} {% if states ('cover.velux_internal_cover_blinds_2') ==
          'opening'%}
            --shape-color: #89DF83!important;
          {% endif %} }
        mushroom-cover-buttons-control$:
          mushroom-button:nth-child(1):
            $: |
              .button {
                 background: white!important;
                 }
              ha-icon {
                --card-mod-icon-color: #FF9800;
              }
          mushroom-button:nth-child(2):
            $: |
              .button {
                background: white!important;
              }
              ha-icon {
                --card-mod-icon-color: #FF9800;
              }
        mushroom-button$: |
          .button {
             background: white!important;
           }
           ha-icon {
             --card-mod-icon-color: #FF9800;
           }
        mushroom-state-info$: |
          .container {
            --card-primary-font-size: 15px;
            --card-secondary-font-size: 15px;
            --primary-text-color: #FF9800;
            --secondary-text-color: #008CB6;
            font-family: Copperplate; 
          }
        style: |
          ha-card {
            border: none;
          }

[Vandana (Vandana Dass)]

type: custom:mushroom-template-card
primary: ''
icon: mdi:fountain
icon_color: amber
entity: switch.fountain
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {{  (states("counter.fountain_timer"))|int*100 }}% 0%, var(--card-background-color) 0% 100%);
      }
    .: |
      ha-state-icon {
        {% if is_state(config.entity, 'on') %}
          animation: fountain 1.5s ease infinite;
        {% endif %}  
      }  
      mushroom-shape-icon:after {
        content: '24';
        position: absolute;
        top: -11%;
        right: -11%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15px;
        height: 15px;
        font-size: 9px;
        font-weight: 700;
        background-color: rgba(var(--rgb-amber), 0.5);
        border-radius: 50%;
      }
      @keyframes fountain { 
        0%, 100% { clip-path: polygon(0 100%,0 0, 100% 0, 100% 100%); }
        50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
        60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
        70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
        80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
      }  
      ha-card {
         padding: 5px 0px 0px 0px !important;
      }    
      :host {
        --icon-size: 35px !important; 
        --card-primary-font-size: 9px !important;
        --card-secondary-font-size: 9px!important;
      }

please check the code, what am I doing wrong, The icon background colour is not showing like below icon

[dimitri.landerloos]

Nothing wrong. Thats what i showed you would happen.

You can get it back if you set a color like this:

--card-background-color: rgba(87, 72, 30, 1);

But you have to set a static color. Otherwise it will not work. The color also has to have 100% opacity (hence the 1 at the end).

type: custom:mushroom-template-card
primary: ''
icon: mdi:fountain
icon_color: amber
entity: switch.fountain
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --card-background-color: rgba(255, 255, 30, 0.5);
        background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {{  (states("counter.fountain_timer"))|int*100 }}% 0%, var(--card-background-color) 0% 100%);
      }
    .: |
      ha-state-icon {
        {% if is_state(config.entity, 'on') %}
          animation: fountain 1.5s ease infinite;
        {% endif %}  
      }  
      mushroom-shape-icon:after {
        content: '24';
        position: absolute;
        top: -11%;
        right: -11%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15px;
        height: 15px;
        font-size: 9px;
        font-weight: 700;
        background-color: rgba(var(--rgb-amber), 0.5);
        border-radius: 50%;
      }
      @keyframes fountain { 
        0%, 100% { clip-path: polygon(0 100%,0 0, 100% 0, 100% 100%); }
        50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
        60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
        70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
        80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
      }  
      ha-card {
         padding: 5px 0px 0px 0px !important;
      }    
      :host {
        --icon-size: 35px !important; 
        --card-primary-font-size: 9px !important;
        --card-secondary-font-size: 9px!important;
      }

[Mngsps]

Hello,

I’m not getting the icon shape color changed. I used the code form the mushroom style guide thread:

Any idea?

Thank you, a lot, for helping.
Kind regards
Benedikt

[Littlejoe (Vanhack)]

Can I see the code for the house temp card please? Thanks.

[Intro_Verti]

Found it and put celcius/percentage in it as well.
Thanks for the initial config @PskNorz !

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Kantoor
    secondary: >-
      {{ states('sensor.office_temperature') | round(1) }}°C  | {{
      states('sensor.office_humidity') }} %
    icon: mdi:thermometer-water
    card_mod:
      style: |
        ha-card {
          z-index: 1;
          --ha-card-border-width: 0;
        }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.office_temperature
        name: Temperature
        color: green
      - entity: sensor.office_humidity
        name: Humidity
        color: '#3399ff'
        y_axis: secondary
    height: 50
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 100%;
          top: 0px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
        }

[dimitri.landerloos]

Hopefully this should clear it up

@dimitri.landerloos

Yes, we have found that for some it only applies the color using the --shape-color variable when the state is on for the entity in the card. can you test if this is the case?

if you want to change the color regardless of state just do this instead:

entity: vacuum.dreamebot_l10s_ultra
type: custom:mushroom-vacuum-card
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: blue !important;
      }

[Mngsps]

This was the solution Thank you! Didn’t see this post berfore… Once we’re in touch: Is it possible to have a shadow for the icon itself (not the shape)?

[Vandana (Vandana Dass)]

Thank you so very much.

How can i achieve the same thing if i use mushroom chip?

Can you plz share the code.

Regards

[Littlejoe (Vanhack)]

Love it, thank you.