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

[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

[dimitri.landerloos]

So 2 things are being changed seperately (because we have to) the icon background. and the icon itself.

icon background is the .shape {, and the ha-state-icon {, is the icon being changed.

each has 2 seperate colors being controlled by each of their if statements.

[Diegocampy]

Thanks thanks thank!
Solved

- 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;
            {% elif is_state('input_select.modalita_posizione', 'Assente') %}
              --shape-color: rgba(var(--rgb-blue), 0.0) !important;
            {% elif is_state('input_select.modalita_posizione', 'Linda Dorme') %}
              --shape-color: rgba(var(--rgb-blue), 0.0) !important;
            {% elif is_state('input_select.modalita_posizione', 'Notte') %}
              --shape-color: rgba(var(--rgb-blue), 0.0) !important;
            {% else %}
              --shape-color: rgba(var(--rgb-green), 0.0) !important;
            {% endif %}
        .: |
          ha-state-icon {
            {% if is_state('input_select.modalita_posizione', 'Casa') %}
              color: rgba(var(--rgb-green), 1) !important;
            {% elif is_state('input_select.modalita_posizione', 'Assente') %}
              color: rgba(var(--rgb-red), 1) !important;
            {% elif is_state('input_select.modalita_posizione', 'Linda Dorme') %}
              color: rgba(255, 0, 255, 1) !important;
            {% elif is_state('input_select.modalita_posizione', 'Notte') %}
              color: rgba(var(--rgb-blue), 1) !important;
            {% else %}
              color: rgba(var(--rgb-red), 1) !important;
            {% endif %}
          }

[Markus99 (Mark)]

Right, I get that HA has its limitations - similar to how you can’t use a template for the icon_color in a glance card - but using a mushroom-template-card you are able to do just this.

It’s why I was asking here, in mushroom thread, if anyone knows if mushroom could handle a template in the tap_action (or hold_action for that matter) section.

Appears it’s not able to from what I’m seen to date, so, at least for me,

+1 for this request: Add ability to use a template in tap_action section

[kman42 (Kurt)]

I am struggling to get the alarm card configured to match my other mushroom cards while still using the default Alarmo state icons, which provide more information at a glance. What I want is for the alarm card to look like the two cards on the left but with the Alarmo state icon (currently shown in the bottom right):

Here’s my code:

type: custom:button-card
entity: alarm_control_panel.alarmo
name: Security
styles:
  card:
    - padding-top: 0
  grid:
    - grid-template-areas: '"button1" "n" "s"'
    - grid-template-rows: min-content min-content
    - grid-template-columns: 1fr 1fr
  name:
    - font-size: 14px
    - font-weight: bold
    - color: '#e1e1e1'
    - margin-top: 4px
    - margin-bottom: 0px
  state:
    - font-size: 12px
    - font-weight: bolder
    - color: '#9b9b9b'
    - margin-top: 2px
    - margin-bottom: 8px
  button1:
    - padding: 0
custom_fields:
  button1:
    card:
      type: custom:mushroom-alarm-control-panel-card
      entity: alarm_control_panel.alarmo
      layout: vertical
      primary_info: none
      secondary_info: none
      icon: mdi:security
      card_mod:
        style: |
          ha-card {
            border: none;
            background: none;
          }

[dicekillsyou161]

I apologize if this was addressed in thread, I did search for an answer and tried a few things, but have so far not had success. I had color changes coded for the icons in the Chips card, but at some point in the past month the the icon color stopped updating from the theme value. Is my issue using the icon_color variable?

This is the YAML that I am using

  - type: vertical-stack
    cards:
      - type: conditional
        conditions:
          - entity: input_boolean.hvac_toggle
            state: 'on'
        card:
          type: custom:mushroom-chips-card
          alignment: center
          chips:
            - type: template
              entity: switch.the_fire
              icon: mdi:fire
              icon_color: |-
                {% set _state=states('switch.the_fire') %}
                {% if _state=="on" %}
                {{'#f92aad'}}
                {% elif _state=="off" %}
                {{'#475c31'}}
                {% else %}
                red
                {% endif %}
              tap_action:
                action: toggle
              double_tap_action:
                action: more-info
            - type: template
              entity: switch.living_room_fan
              icon: mdi:fan
              content: ''
              icon_color: |-
                {% set _state=states('switch.living_room_fan') %}
                {% if _state=="on" %}
                {{'#f92aad'}}
                {% elif _state=="off" %}
                {{'#475c31'}}
                {% else %}
                red
                {% endif %}
              tap_action:
                action: toggle
            - type: template
              entity: switch.the_ice
              icon: mdi:air-conditioner
              icon_color: |
                {% set _state=states('switch.the_ice') %}
                {% if _state=="on" %}
                {{'#f92aad'}}
                {% elif _state=="off" %}
                {{'#475c31'}}
                {% else %}
                red
                {% endif %}
              tap_action:
                action: toggle
            - type: template
              entity: switch.bedroom_fan
              icon: mdi:fan
              content: ''
              icon_color: |-
                {% set _state=states('switch.bedroom_fan') %}
                {% if _state=="on" %}
                {{'#f92aad'}}
                {% elif _state=="off" %}
                {{'#475c31'}}
                {% else %}
                red
                {% endif %}
              tap_action:
                action: toggle
            - type: template
              entity: switch.bed_ice
              icon: mdi:snowflake-check
              icon_color: |
                {% set _state=states('switch.bed_ice') %}
                {% if _state=="on" %}
                {{'#f92aad'}}
                {% elif _state=="off" %}
                {{'#475c31'}}
                {% else %}
                red
                {% endif %}
              tap_action:
                action: toggle
          card_mod:
            style:
              div:
                mushroom-template-chip:nth-child(2):
                  $:
                    mushroom-chip: |
                      ha-state-icon {
                        {% set _state = states('switch.living_room_fan') %}
                        {% if _state == "on" %}
                        animation: rotation 1s linear infinite;
                        {% endif %}
                      }
                      @keyframes rotation {
                        0% {
                          transform: rotate(0deg);
                        }
                        100% {
                          transform: rotate(360deg);
                        }
                      }
                mushroom-template-chip:nth-child(4):
                  $:
                    mushroom-chip: |
                      ha-state-icon {
                        {% set _state = states('switch.bedroom_fan') %}
                        {% if _state == "on" %}
                        animation: rotation 1s linear infinite;
                        {% endif %}
                      }
                      @keyframes rotation {
                        0% {
                          transform: rotate(0deg);
                        }
                        100% {
                          transform: rotate(360deg);
                        }
                      }