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

check out some examples here:

something like this work for you?

Code
type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Woonkamer
        icon: mdi:sofa
        tap_action:
          action: navigate
          navigation_path: null
        icon_color: blue
        multiline_secondary: false
        card_mod:
          style: |
            ha-card {
              --ha-card-background: none;
              --ha-card-box-shadow: none;
              --ha-card-border-width: 0;
              z-index: 1;
            }
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.bedroom_temperature_humidity_temperature
            name: Temperature
        hours_to_show: 24
        line_width: 3
        font_size: 50
        points_per_hour: 2
        animate: true
        show:
          name: false
          icon: false
          state: false
          legend: false
          fill: fade
        color_thresholds:
          - value: 17
            color: '#ffcd05'
          - value: 19
            color: '#f39c12'
          - value: 21
            color: '#d35400'
          - value: 22.5
            color: '#c0392b'
          - value: 40
            color: '#91f4ff'
          - value: 50
            color: '#2ae0f5'
          - value: 58
            color: '#18b3f5'
          - value: 65
            color: '#005bd1'
          - value: 70
            color: '#000399'
        card_mod:
          style: |
            ha-card {
              position: absolute !important;
              top: -10px;
              width: 100% !important;
              height: 122% !important;
              left: 0px;
            }
            ha-card:after {
              content: "";
              position: absolute;
              width: 100%;
              height: 100%;
              background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.living
        icon: none
        show_temperature_control: false
        primary_info: none
        secondary_info: none
        layout: horizontal
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape:after {
                content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}°";
                font-size: 14px;
                font-weight: bolder;
                color: white;
                position: absolute;
              }
              .shape {
                {% set mode = state_attr(config.entity, 'hvac_action') %}
                --shape-color: rgba(var(--rgb-
                {%- if mode == 'heating' -%}
                  orange
                {%- elif mode == 'cooling' -%}
                  blue
                {%- else -%}
                  grey
                {% endif %}));
              }
            mushroom-badge-icon$: |
              .badge {
                {{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
              }
            .: |
              mushroom-badge-icon:after {
                content: "{{ states('sensor.alpha2_heat_control_ezr012b5_glv_1_valve_opening') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-green));
                color: rgb(var(--rgb-white));
                border-radius: 50%;
                border-width: 0;
                top: 0;
                width: 100%;
                height: 100%;
                font-size: 0.7em; 
              }
              ha-card {
                border: none !important;
              }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:lightbulb
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count
          > 0 %} amber {% else %} grey {% endif %}
        entity: light.all_lights
        badge_icon: none
        badge_color: transparent
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            ha-card {
              --ha-card-border-width: 0;  
            }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:window-shutter-open
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
          count > 0 %} blue {% else %} grey {% endif %}
        entity: light.all_lights
        badge_icon: none
        badge_color: transparent
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            ha-card {
              --ha-card-border-width: 0;  
            }

FYI the fading of the graph to the left doesnt work on Firefox.

5 Likes

I learned all this and successfully apply it

Thank you

but in my case it doesn’t work

Show me the code you used to apply it where it doesnt work please.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:power-standby
        icon_color: red
        hold_action:
          action: none
        tap_action:
          confirmation:
            text: Power OFF?
          action: call-service
          service: homeassistant.stop
          service_data: {}
          target: {}
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: power 1.5s infinite; 
              }
              .shape {
                  --shape-color: none;
              }                  
              @keyframes power {
                0%, 100% { clip-path: inset(0 0 0 0); }
                50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
              }


square: false
type: grid
cards:
  - type: horizontal-stack
    cards:
      - type: custom:stack-in-card
        cards:
          - type: custom:button-card
            entity: sensor.termometr_kukhnia_temperature
            show_icon: false
            name: Living
            styles:
              card:
                - border-style: none
                - box-shadow: 0px 0px 10px -9px black
              custom_fields:
                temp:
                  - filter: opacity(100%)
                  - justify-self: start
                  - margin-left: 10px
                  - margin-top: 20px
                  - padding-bottom: 10%
                  - font-size: 65%
                graph:
                  - padding-top: 0%
                  - width: 100%
                  - height: 100%
                  - margin-bottom: '-3%'
              icon:
                - width: 25px
                - color: auto
              name:
                - font-size: 87%
                - font-weight: var(--mcg-title-font-weight, 500)
                - justify-self: start
                - margin-top: 6px
                - margin-left: 12px
                - opacity: 0.65
              grid:
                - grid-template-areas: '"n n" "temp temp" "graph graph"'
                - grid-template-columns: 1fr min-content
                - grid-template-rows: 1fr min-content min-content min-content
            custom_fields:
              temp: |
                [[[
                  return `<ha-icon
                    icon="mdi:thermometer"
                    style="width:18px; height: 18px; color:#ff8c00;">
                    </ha-icon><span style="font-size:120%; font-weight: 300;"> 
                    ${states['sensor.termometr_kukhnia_temperature'].state}°C </span> 
                    <ha-icon
                    icon="mdi:water-percent"
                    style="width: 18px; height: 18px; color: #3399ff;">
                    </ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
                    ${states['sensor.termometr_kukhnia_humidity'].state}%</span>`
                ]]]
            card_mod:
              style: |
                ha-card {
                  z-index: 1;
                  height: 70px !important;
                }
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.termometr_kukhnia_temperature
                name: Temperature
                color: '#ff8c00'
              - entity: sensor.termometr_kukhnia_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);
                }
          - type: custom:mushroom-chips-card
            chips:
              - type: light
                entity: light.verkhnii_svet_gostinaia
                content_info: none
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none !important;
                      background: none !important;
                    }
            alignment: end
            card_mod:
              style: |
                ha-card {
                  position: absolute !important;
                  height: 100%;
                  width: 100%;
                  top: 0px;
                  z-index: 1;
                }
          - type: custom:mushroom-chips-card
            chips:
              - type: light
                entity: light.svetilnik_kukhnia
                content_info: none
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none !important;
                      background: none !important;
                    }
            alignment: end
            card_mod:
              style: |
                ha-card {
                  position: absolute !important;
                  height: 100%;
                  width: 95%;
                  top: 0px;
                  z-index: 1;
                }        
      - type: custom:stack-in-card
        cards:
          - type: custom:button-card
            entity: sensor.termometr_kukhnia_temperature
            show_icon: false
            name: Kitcten
            styles:
              card:
                - border-style: none
                - box-shadow: 0px 0px 10px -9px black
              custom_fields:
                temp:
                  - filter: opacity(100%)
                  - justify-self: start
                  - margin-left: 10px
                  - margin-top: 20px
                  - padding-bottom: 10%
                  - font-size: 65%
                graph:
                  - padding-top: 0%
                  - width: 100%
                  - height: 100%
                  - margin-bottom: '-3%'
              icon:
                - width: 25px
                - color: auto
              name:
                - font-size: 87%
                - font-weight: var(--mcg-title-font-weight, 500)
                - justify-self: start
                - margin-top: 6px
                - margin-left: 12px
                - opacity: 0.65
              grid:
                - grid-template-areas: '"n n" "temp temp" "graph graph"'
                - grid-template-columns: 1fr min-content
                - grid-template-rows: 1fr min-content min-content min-content
            custom_fields:
              temp: |
                [[[
                  return `<ha-icon
                    icon="mdi:thermometer"
                    style="width:18px; height: 18px; color:#ff8c00;">
                    </ha-icon><span style="font-size:120%; font-weight: 300;"> 
                    ${states['sensor.termometr_kukhnia_temperature'].state}°C </span> 
                    <ha-icon
                    icon="mdi:water-percent"
                    style="width: 18px; height: 18px; color: #3399ff;">
                    </ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
                    ${states['sensor.termometr_kukhnia_humidity'].state}%</span>`
                ]]]
            card_mod:
              style: |
                ha-card {
                  z-index: 1;
                  height: 70px !important;
                }
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.termometr_kukhnia_temperature
                name: Temperature
                color: '#ff8c00'
              - entity: sensor.termometr_kukhnia_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);
                }
          - type: custom:mushroom-chips-card
            chips:
              - type: light
                entity: light.verkhnii_svet_gostinaia
                content_info: none
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none !important;
                      background: none !important;
                    }
            alignment: end
            card_mod:
              style: |
                ha-card {
                  position: absolute !important;
                  height: 100%;
                  width: 100%;
                  top: 0px;
                  z-index: 1;
                }
          - type: custom:mushroom-chips-card
            chips:
              - type: light
                entity: light.svetilnik_kukhnia
                content_info: none
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none !important;
                      background: none !important;
                    }
            alignment: end
            card_mod:
              style: |
                ha-card {
                  position: absolute !important;
                  height: 100%;
                  width: 95%;
                  top: 0px;
                  z-index: 1;
                }        
columns: 1

how to make the entire card clickable?


square: false
type: grid
cards:
  - type: horizontal-stack
    cards:
      - type: custom:stack-in-card
        cards:
          - type: custom:button-card
            entity: sensor.termometr_kukhnia_temperature
            show_icon: false
            name: Living
            tap_action:
              action: url
              url_path: http://google.com

this does not work

1 Like

See. you havent applied it in the way it should be. you cant apply icon animations to chips in the same way as a normal card. take a look at the chip section.

not the right place to ask this question. you are asking about the button card. ask this question in that thread.

Hi Dimitri, i’ve copied your room card code and it’s great but i have one small issue with it.

As you can see in the screenshot my “woonkamer” label with the graph has a border around it. it does not show in your example and it do not want it in mine either.

Could you help me to get rid of this? Tried lot’s of modifications to the code but the border remains.

Thxn

Sure, again not showing in mine because i use minimalist :slight_smile:

Code
type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {
          border: none !important;
        }
    cards:
      - type: custom:mushroom-template-card
        primary: Woonkamer
        icon: mdi:sofa
        tap_action:
          action: navigate
          navigation_path: null
        icon_color: blue
        multiline_secondary: false
        card_mod:
          style: |
            ha-card {
              --ha-card-background: none;
              --ha-card-box-shadow: none;
              --ha-card-border-width: 0;
              z-index: 1;
            }
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.bedroom_temperature_humidity_temperature
            name: Temperature
        hours_to_show: 24
        line_width: 3
        font_size: 50
        points_per_hour: 2
        animate: true
        show:
          name: false
          icon: false
          state: false
          legend: false
          fill: fade
        color_thresholds:
          - value: 17
            color: '#ffcd05'
          - value: 19
            color: '#f39c12'
          - value: 21
            color: '#d35400'
          - value: 22.5
            color: '#c0392b'
          - value: 40
            color: '#91f4ff'
          - value: 50
            color: '#2ae0f5'
          - value: 58
            color: '#18b3f5'
          - value: 65
            color: '#005bd1'
          - value: 70
            color: '#000399'
        card_mod:
          style: |
            ha-card {
              position: absolute !important;
              top: -10px;
              width: 100% !important;
              height: 122% !important;
              left: 0px;
            }
            ha-card:after {
              content: "";
              position: absolute;
              width: 100%;
              height: 100%;
              background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.living
        icon: none
        show_temperature_control: false
        primary_info: none
        secondary_info: none
        layout: horizontal
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape:after {
                content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}°";
                font-size: 14px;
                font-weight: bolder;
                color: white;
                position: absolute;
              }
              .shape {
                {% set mode = state_attr(config.entity, 'hvac_action') %}
                --shape-color: rgba(var(--rgb-
                {%- if mode == 'heating' -%}
                  orange
                {%- elif mode == 'cooling' -%}
                  blue
                {%- else -%}
                  grey
                {% endif %}));
              }
            mushroom-badge-icon$: |
              .badge {
                {{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
              }
            .: |
              mushroom-badge-icon:after {
                content: "{{ states('sensor.alpha2_heat_control_ezr012b5_glv_1_valve_opening') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-green));
                color: rgb(var(--rgb-white));
                border-radius: 50%;
                border-width: 0;
                top: 0;
                width: 100%;
                height: 100%;
                font-size: 0.7em; 
              }
              ha-card {
                border: none !important;
              }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:lightbulb
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count
          > 0 %} amber {% else %} grey {% endif %}
        entity: light.all_lights
        badge_icon: none
        badge_color: transparent
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            ha-card {
              --ha-card-border-width: 0;  
            }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:window-shutter-open
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
          count > 0 %} blue {% else %} grey {% endif %}
        entity: light.all_lights
        badge_icon: none
        badge_color: transparent
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            ha-card {
              --ha-card-border-width: 0;  
            }
1 Like

Hi @dimitri.landerloos thanks! :clap:
Working great now with following code:

Code
type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {
          border: none !important;
          --ha-card-border-width: 0;
        }
    cards:
      - type: custom:mushroom-template-card
        primary: Woonkamer
        icon: mdi:sofa
        tap_action:
          action: navigate
          navigation_path: null
        icon_color: blue
        multiline_secondary: true
        card_mod:
          style: |
            ha-card {
              --ha-card-background: none;
              --ha-card-box-shadow: none;
              --ha-card-border-width: 0;
              z-index: 1;
            }
            :host {
              --mush-icon-border-radius: 12px;
            }
      - type: custom:mini-graph-card
        entities:
          - entity: climate.living
            attribute: current_temperature
            name: null
        hours_to_show: 24
        line_width: 3
        font_size: 50
        points_per_hour: 2
        animate: true
        show:
          name: false
          icon: false
          state: false
          legend: false
          fill: fade
        color: orange
        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) 25%, transparent);
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.living
        icon: none
        show_temperature_control: false
        primary_info: none
        secondary_info: none
        layout: horizontal
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape:after {
                content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}°";
                font-size: 14px;
                font-weight: bolder;
                color: white;
                position: absolute;
              }
              .shape {
                {% set mode = state_attr(config.entity, 'hvac_action') %}
                --shape-color: rgba(var(--rgb-
                {%- if mode == 'heating' -%}
                  orange
                {%- elif mode == 'cooling' -%}
                  blue
                {%- else -%}
                  grey
                {% endif %}));
              }
            mushroom-badge-icon$: |
              .badge {
                {{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
              }
            .: |
              mushroom-badge-icon:after {
                content: "{{ states('sensor.alpha2_heat_control_ezr012b5_glv_1_valve_opening') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-green));
                color: rgb(var(--rgb-white));
                border-radius: 50%;
                border-width: 0;
                top: 0;
                width: 100%;
                height: 100%;
                font-size: 0.7em; 
              }
              ha-card {
                border: none !important;
              }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:lightbulb
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count
          > 0 %} amber {% else %} grey {% endif %}
        entity: light.all_lights
        badge_icon: none
        badge_color: transparent
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            ha-card {
              --ha-card-border-width: 0;  
            }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:window-shutter-open
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
          count > 0 %} blue {% else %} grey {% endif %}
        entity: light.all_lights
        badge_icon: none
        badge_color: transparent
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            ha-card {
              --ha-card-border-width: 0;  
            }

@snoekieboe
How did you got the primary “Woonkamer” name higher? Or is that because you use a secondary?
I want to have it on top of the icon so there is place enough for the mini-graph card.

Thx!

1 Like

Try and just make your secondary a blank symbol. Like this:

secondary: '‎ '

Copy this exactly as it contains a symbol that is blank. Not just a space.

1 Like

@dimitri.landerloos

Can you replicate the minimalist room card from minimalist?
chrome_KuyaJjBEdL

i cant. but you can :slight_smile:
image

Code
type: grid
square: false
columns: 2
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: Achtertuin
        secondary: '{{states(''sensor.home_realfeel_temperature'')}}°C'
        icon: mdi:tree
        icon_color: orange
        card_mod:
          style:
            mushroom-state-item$: |
              .container {
                flex-direction: column !important;
              }
            .: |
              ha-card {
                width: 100%;
              }
              mushroom-state-info {
                padding-top: 10px !important;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:lightbulb
            icon_color: orange
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  height: 40px !important;
                  border: 1 !important;
                  box-shadow: none !important;
                  border-radius: 12px !important;
                  background: rgba(var(--rgb-{{config.icon_color}}), 0.2) !important;
                }
                .content {
                  flex-direction: column !important;
                  gap: 2px;
                }
        alignment: center
        card_mod:
          style:
            .: |
              mushroom-template-chip {
                width: 100%;
              }
              div.chip-container {
                justify-content: center;
              }
              ha-card {
                margin: 10px 12px 12px;
                --chip-spacing: 0px !important;
              }
1 Like

this is almost perfect! Can i change icon color based on state of the template? For ex light.beneden > on = orange. When light.beneden > off = white

Thanks very much in advance! You are the goat of templating mushroom :slight_smile:

Yes you can. they are all template cards so just something like this:

icon_color: >
  {% if states('light.yourentity') == 'on' %}
    orange
  {% else %}
    disabled
  {% endif %}

both in the main template card and in the chip.

yea i tried it before but for some reason the background doesnt change…

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Achtertuin
    secondary: '{{states(''sensor.temperature_humidity_sensor_slaapkamer_temperature'')}}°C'
    icon: mdi:tree
    icon_color: blue
    card_mod:
      style:
        mushroom-state-item$: |
          .container {
            flex-direction: column !important;
          }
        .: |
          ha-card {
            width: 100%;
          }
          mushroom-state-info {
            padding-top: 10px !important;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:lightbulb
        icon_color: >
          {% if states('light.beneden') == 'on' %}
            orange
          {% else %}
            disabled
          {% endif %}
        entity: light.beneden
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              height: 40px !important;
              border: 1 !important;
              box-shadow: none !important;
              transition: 0.5s;
              border-radius: 12px !important;
              background: rgba(var(--rgb-{{config.icon_color}}), 0.2) !important;
            }
            .content {
              flex-direction: column !important;
              gap: 2px;
            }
    alignment: center
    card_mod:
      style:
        .: |
          mushroom-template-chip {
            width: 100%;
          }
          div.chip-container {
            justify-content: center;
          }
          ha-card {
            margin: 10px 12px 12px;
            --chip-spacing: 0px !important;
          }

The background of what? The chip/button to the right?

the background of the chip doesnt change!
chrome_1owJVZ5I7b
chrome_fhGK4rrkPX

Ok. sometimes using {{config.icon_color}} in the card mod section doesnt work well. so we will just use a template there too instead then.

      - type: template
        icon: mdi:lightbulb
        entity: light.office_main_light
        icon_color: |
          {% if states('light.office_main_light') == 'on' %}
            orange
          {% else %}
            disabled
          {% endif %}
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              height: 40px !important;
              border: 1 !important;
              box-shadow: none !important;
              border-radius: 12px !important;
              {% if states('light.office_main_light') == 'on' %}
                background: rgba(var(--rgb-orange), 0.2) !important;
              {% else %}
                background: rgba(var(--rgb-disabled), 0.2) !important;
              {% endif %}
            }
            .content {
              flex-direction: column !important;
              gap: 2px;
            }

just update this section with your entity and the color you want to use.

              {% if states('light.office_main_light') == 'on' %}
                background: rgba(var(--rgb-orange), 0.2) !important;
              {% else %}
                background: rgba(var(--rgb-disabled), 0.2) !important;
              {% endif %}