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

[SoulAssassin (Anton Stolov)]

U can set size of chip with this code and your adjustments:

      style: |
        ha-card {
          justify-content: center;
          --chip-icon-size: 64px;
          --chip-height: 64px;
          width: var(--chip-height) !important;
          border-radius: 50% !important;
          --chip-background: rgba(var(--rgb-green), 0.2);
        }

And look at this my post Mushroom Cards - Build a beautiful dashboard easily 🍄 - #10113 by SoulAssassin, today @LiQuid_cOOled gived a best tip for my case, as I understood, u have similiar issue.

[tombom (tom)]

thank you very much! that works splendidly

[_Mitch07]

I’m also interested in the .yaml code of the custom mushroom-template-card you made for the washing machine. Looks great.
Can you share the total .yaml code with us please

[Markus99 (Mark)]

tap_action: using a template

Possible to do this? This is my code, but doesn’t appear to be working:

  de_mushroom_entity:
    card:
      type: custom:mushroom-template-card
      primary: '[[name]]'
      secondary: ''
      icon: '[[icon]]'
      entity: '[[entity]]'
      icon_color: '{{ ''amber'' if is_state(''[[entity]]'', ''on'') else ''#44739e'' }}'
      layout: vertical
      tap_action:
        action: >-
          {% if 'sensor' in [[entity]] %}
            more-info
          {% else %}
            toggle
          {% endif %}
      double_tap_action:
        action: more-info

Worth noting, I’m also using the ‘decluttering-card’

Thx!

[image969 (James Scialdone)]

Hello,

Can someone tell me how to make a mushroom card wider?

I have a vertical layout Im doing for my daughter’s ipad. Full screen is a bit much and distorted, but veritcal layout isn’t quite wide enough. Is there a way to do this based off of a percentage?

[LiQuid_cOOled]

This question seems more appropriate for the decluttering topic

Lovelace: Decluttering Card

Hey, I’ve created a new card that helps you declutter your LL config if you use multiple times the same block of cards with small differences (like an entity for example) to display things in LL. Visit github for installation instructions, up to date documentation and troubleshooting guide [GitHub Release] [GitHub Activity] [custom_updater] [Project Maintenance] decluttering-card This card is for Lovelace on Home Assistant. We all use multiple times the same block of configuration acros…

[LiQuid_cOOled]

explore the @media screen and (max-width: 600px) { settings.

It’s used is to apply different styles for different media types/devices and will not adjust your PC settings.

An example of it’s use

        card_mod:
            style: |
                ha-card {
                  --icon-size: 40px;
                  --icon-symbol-size: 35px ;
                }
               
                @media screen and (max-width: 600px) {
                ha-card {
                  --icon-size: 60px;
                  --icon-symbol-size: 45px ;
                }
                 }

[LiQuid_cOOled]

You can set height and width of the card

type: custom:mushroom-fan-card
entity: fan.bedroom_fan
card_mod:
  style: |
    ha-card{ 
     width: 150% !important;
     height: 300px !important;
      }

[Markus99 (Mark)]

Possibly. Haven’t seen any other issues with that card at all using templates, so why I posted here.

In searching this thread I wasn’t able to find anyone trying to use a template in a tap_action.

[LiQuid_cOOled]

It’s an interesting concept, I’ll do some testing. I do believe the call service with a script is probably easier.

[LiQuid_cOOled]

Very similar question

How to use service_template with tap_action?

Hello, I am currently trying to have a script triggered by a button. Only I need here service_template or similar. This seems not to work directly on the button. The script should definitely not be outsourced. Does anyone have an idea? type: button tap_action: action: call-service service: climate.set_temperature service_data: entity_id: climate.hz_ankleidezimmer_group temperature: >- {{ state_attr('climate.hz_ankleidezimmer_group', 'temperature') | float + 0.5 | float…

Straight from the HA website

[Diegocampy]

I would like to change the color of the icon at the change of state, I use 4 states, but I don’t know how to compose the command. 3 I would like 4 of states, not only 2 but also with two nothing.

type: custom:mushroom-select-card
entity: input_select.modalita_posizione
icon_color: '{% if is_state(entity, ''Assente'') %} grey {%else %} blue {% endif %}'
fill_container: true

[andreadannibale (Andrea)]

try this:

card_mod:
  style: |
    ha-state-icon {
      {% if is_state(entity, ''Assente'') %} yellow {%else %} blue {% endif %}'
    }

[Diegocampy]

I try but not work. The icon are Blu (the standard color). I try whitout card mode and the icon is only white. I’m not sure if is possible with this card

[andreadannibale (Andrea)]

Sorry, try this:

type: custom:mushroom-select-card
entity: input_select.selettore_irrigazione
fill_container: true
card_mod:
  style: |
    ha-state-icon {
      color: {{ 'var(--red)' if is_state('input_select.selettore_irrigazione', 'Giardino') else 'var(--contrast2)' }};
    }

[Diegocampy]

Sorry, I wrote wrong entities, I wrote the correct code below but it doesn’t work.
I would like 4 different colors for 4 modes:
Red Absent
Green House
Purple Nanna children
Night blue

type: custom:mushroom-select-card
entity: input_select.modalita_posizione
fill_container: true
card_mod:
  style: |
    ha-state-icon {
      color: {{ 'var(--red)' if is_state('input_select.modalita_posizione', 'Casa') else 'var(--contrast2)' }};
    }

I really don’t know how to do it, I’ve done other similar things but without card mode, directly in the icon color settings for example like this:

icon: >-
      {% set humid = states(entity) | float%} {% if humid < 40 %} 
      mdi:water-percent-alert {% elif humid > 60 %} mdi:water-percent-alert
      {%else %} mdi:water-percent {% endif %}
    icon_color: >-
      {% set humid = states(entity) | float%} {% if humid < 40 %}  blue {% elif
      humid > 60 %} red {% else %} green {% endif %} 

[dimitri.landerloos]

@Diegocampy

icon: >-
      {% set humid = states(entity) | float%} {% if humid < 40 %} 
      mdi:water-percent-alert {% elif humid > 60 %} mdi:water-percent-alert
      {%else %} mdi:water-percent {% endif %}
    icon_color: >-
      {% set humid = states(entity) | float%} {% if humid < 40 %}  blue {% elif
      humid > 60 %} red {% else %} green {% endif %} 

This only works in the template card, template chip, and the title card.

if you need to use templates - i suggest you use the template card or chip. if you cant for whatever reason use that, then you do need to use card mod. for example this:

type: custom:mushroom-select-card
entity: input_select.speaker_group_dropdown
fill_container: true
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state('input_select.speaker_group_dropdown', 'Upstairs Speakers') %}
          --shape-color: rgba(var(--rgb-red),0.2) !important;
        {% else %}
          --shape-color: rgba(var(--rgb-blue), 0.2) !important;
        {% endif %}
      }
    .: |
      ha-state-icon {
        {% if is_state('input_select.speaker_group_dropdown', 'Upstairs Speakers') %}
          color: rgba(var(--rgb-red), 1) !important;
        {% else %}
          color: rgba(var(--rgb-blue), 1) !important;
        {% endif %}
      }

[Diegocampy]

Thank you very much, at least I understood why it didn’t work. Now I’ll have to understand how to use this, I’m trying, but I’m missing some notions, I haven’t understood how to decide 4 different colors for 4 different states of the entity. The example only has 2 that reason, “if so” do this, “otherwise” do that. At least I think that’s how I understood it.
Could you give me an example?
I’ve gotten this far, then I’ll also have to understand how to define the colors, but I think that will be a minor problem, I should find some information online

type: custom:mushroom-select-card
entity: input_select.modalita_posizione
fill_container: true
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state('input_select.modalita_posizione', 'Casa') %}
          --shape-color: rgba(var(--rgb-red),0.0) !important;
        {% else %}
          --shape-color: rgba(var(--rgb-blue), 0.2) !important;
        {% endif %}
      }
    .: |
      ha-state-icon {
        {% if is_state('input_select.modalita_posizione', 'Assente') %}
          color: rgba(var(--rgb-red), 1) !important;
        {% else %}
          color: rgba(var(--rgb-blue), 1) !important;
        {% endif %}
      }

[dimitri.landerloos]

Sure. just use elseif like this:

        {% if is_state('input_select.modalita_posizione', 'Casa') %}
          --shape-color: rgba(var(--rgb-red),0.0) !important;
        {% elif is_state('input_select.modalita_posizione', 'Assente') %}
          --shape-color: rgba(var(--rgb-blue), 0.2) !important;
        {% else %}
          --shape-color: rgba(var(--rgb-green), 0.2) !important;
        {% endif %}

and keep going with more elif if you need

[Diegocampy]

many thanks!
so in your example there are not 2 different possibilities indicated but two things to change, the shape and the color? correct?

Sorry for the many stupid questions, I’m trying to learn slowly