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

[Umbrella]

Hello can somebody help me with this please :

I want to create a
custom:mushroom-template-card with a 5 custom:mushroom-entity-card inside
is it the right way to do it?

this is what i want to be looks like (just without that background)

and this is what I have now, and don’t know what to do with.

here is a code I get from this topic (thanks) and I just want to modify it for myself.

      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: custom:mushroom-template-card
            primary: Room 
            secondary: param
            icon: mdi:alert-decagram-outline
            tap_action:
              action: navigate
              navigation_path: home
            icon_color: orange
            multiline_secondary: true
          - square: false
            columns: 5
            type: grid
            cards:      
              - type: custom:auto-entities
                card:
                  type: entities
                  show_header_toggle: false
                filter:
                  include:
                  - domain: binary_sensor
                    state: 'on'
                    attributes:
                      device_class: 'motion'
                    options:
                        secondary_info: 
                        state_color: true
                  - domain: binary_sensor
                    state: 'on'
                    attributes:
                      device_class: 'presence'
                    options:
                        secondary_info: 
                        state_color: true
              - type: custom:mushroom-template-card
                primary: door
                secondary: |-
                  {% if is_state("binary_sensor.0x00150119378d_contact", "off") %}
                  close
                  {% else %}
                  open
                  {% endif %}
                layout: horizontal
                entity: binary_sensor.0x00158d000119378d_contact
                icon: |-
                  {% if is_state("binary_sensor.0x001500119378d_contact", "off") %}
                  phu:panel-frontdoor-close
                  {% else %}
                  phu:panel-frontdoor-open
                  {% endif %}
                multiline_secondary: true
                icon_color: |-
                  {% if is_state("binary_sensor.0x0010119378d_contact", "off") %}
                  grey
                  {% else %}
                  amber
                  {% endif %} 
                tap_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: sensor.room1_temperature1
                primary_info: none
                secondary_info: none
                layout: horizontal
                icon_color: orange
              - type: custom:mushroom-entity-card
                entity: sensor.room1_humidity1
                primary_info: none
                secondary_info: none
                layout: horizontal
                icon_color: orange
              - type: custom:mushroom-entity-card
                entity: sensor.room1_co2_1
                primary_info: none
                secondary_info: none
                layout: horizontal
                icon_color: orange

and if I do it with a custom:mushroom-chips-card then I have this result and cannot move it closer and adjust it, motion icon have a content_info: none but this “none” still taking space…

@rhysb please help

[daphatty]

Is there a built in way to colorize a mushroom entity card (or any mushroom card for that matter) based on the On/Off state of the entity? Or do I have to use something like card-mod to accomplish this?

[rhysb (Rhys)]

Try like this:

      - square: false
        columns: 2
        type: grid
        cards:
          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: template
                icon: mdi:new-box
                card_mod:
                  style:
                    mushroom-state-info$: |
                      .primary {
                        font-size: 20px !important;
                        position: absolute;
                        top: 0px;
                        left: 75px;
                        overflow: visible !important;
                        white-space: normal !important;
                      }
                    mushroom-shape-icon$: |
                      .shape {
                        left: -30px;
                        top: -0px;
                        {% if is_state('switch.template_tv', 'on') %}
                          --shape-color: rgba(var(--rgb-blue), 0.5);
                          --icon-color: rgba(var(--rgb-white), 1);
                        {% elif is_state('light.template_carriage_leds', 'on') %}
                          --shape-color: rgba(var(--rgb-orange), 0.25);
                          --icon-color: rgba(var(--rgb-white), 1);
                        {% elif is_state('light.template', 'on') %}
                          --shape-color: rgba(var(--rgb-orange), 0.25);
                          --icon-color: rgba(var(--rgb-white), 1);
                        {% endif %}
                      }
                    .: |
                      :host {
                        --mush-icon-size: 120px;
                        --primary-text-color: #a0a0a0
                      }
                      ha-card {
                        height: 75px !important;
                      }
              - type: conditional
                conditions:
                  - entity: media_player.kodi_living_room
                    state: 'playing'
                card:
                    type: custom:mushroom-media-player-card
                    entity: media_player.kodi_living_room
                    icon: mdi:play
                    use_media_info: true
                    use_media_artwork: false
                    show_volume_level: false
                    fill_container: false
                    card_mod:
                      style: |
                        ha-card {
                          {% if not is_state(config.entity, 'off') %}
                            background: rgba(var(--rgb-card-background-color), 0.6) url( '{{ state_attr(config.entity, "entity_picture") }}' ) center no-repeat !important;
                            background-size: cover;
                            background-blend-mode: overlay;
                          {% endif %}  
                        }
                card_mod:
                  style: |
                    :host {
                      --ha-card-box-shadow: 0px;
                      --ha-card-border-radius: 0px
                    }
      - type: grid
        square: false
        columns: 1
        cards:
          - type: conditional
            conditions:
              - entity: media_player.kodi_living_room
                state: 'playing'
            card:
                type: custom:mushroom-media-player-card
                entity: media_player.kodi_living_room
                icon: mdi:play
                use_media_info: true
                use_media_artwork: false
                show_volume_level: false
                fill_container: false
                card_mod:
                  style: |
                    ha-card {
                      {% if not is_state(config.entity, 'off') %}
                        background: rgba(var(--rgb-card-background-color), 0.6) url( '{{ state_attr(config.entity, "entity_picture") }}' ) center no-repeat;
                        background-size: cover;
                        background-blend-mode: overlay;
                      {% endif %}  
                    }

[danwooller]

Thanks, that dropped it out of my card, but I think I’ve worked it out.

Your help is much appreciated.

[rhysb (Rhys)]

For Chips it would be:

card_mod:
  style: |
    ha-card {
      --chip-background: rgba(255,255,255,0.05);
      --chip-border-width: 0;
    }

[sarnaone]

Is it possible to make it animate like it’s just that cicrle in middle of icon rotating like it’s spinning ? My poor CSS skills was supported by ChatGPT, but it’s still not working. Also it is possible to make invisible borders in chips ? So here is my code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        content: ' {{ states(entity) }}°C '
        icon: >
          {% set temperature_level = (states(entity) | int / 10) | round(0) |
          int * 10 %} {% if is_state('sensor.temp_lazienka_temperature', 'on' )
          %}
            {% if temperature_level > 0 %}
              mdi:battery-charging-{{ temperature_level }}
            {% else %}
              mdi:thermometer
            {% endif %}
          {% else %}
            {% if temperature_level > 23 %}
              mdi:thermometer-high
            {% elif temperature_level < 22 %}
              mdi:thermometer
            {% elif temperature_level < 21 %}
              mdi:thermometer-low
            {% elif temperature_level < 20 %}
              mdi:snowflake-thermometer
            {% else %}
              mdi:thermometer-alert
            {% endif %}
          {% endif %}
        icon_color: |-
          {% set temperature_level = states(entity) | int %}
          {% if temperature_level > 23 %} 
            red
          {% elif temperature_level > 22,5 %}
            green
          {% elif temperature_level > 22 %}
            light-green
          {% elif temperature_level > 21,5 %}
            lime
          {% elif temperature_level > 21 %}
            light-blue
          {% elif temperature_level > 20,5 %}
            blue
          {% else %}
            white
          {% endif %}
        card_mod:
          style: |
            ha-card {
              --chip-margin-top: 0px;
              --chip-border-radius: 0px;
              --chip-font-size: 0.4em;
              --chip-padding: 0 0.3em;
              --chip-spacing: 0px;
              --chip-icon-size: 0.6em;
              --chip-box-shadow: none;
              --chip-background: none
              --chip-text-color:#F1F1F2;
            :host([dark-mode]) {
                  --text-color: #F1F1F2;
                  }
        tap_action:
          action: none
        entity: sensor.temp_lazienka_temperature
      - type: template
        icon: |
          {% if is_state('input_select.washer_status', 'Zakończone') %}
            mdi:washing-machine
          {% elif is_state('input_select.washer_status', 'Wirowanie') %}
            mdi:washing-machine
          {% elif is_state('input_select.washer_status', 'W trakcie') %}
            mdi:washing-machine
          {% else %}
            mdi:washing-machine-off
          {% endif %}
        icon_color: |
          {% if is_state('input_select.washer_status', 'Zakończone') %}
            blue
          {% elif is_state('input_select.washer_status', 'Wirowanie') %}
            orange
          {% elif is_state('input_select.washer_status', 'W trakcie') %}
            orange
          {% elif is_state('input_select.washer_status', 'Off') %}
            #646464
          {% else %}
            white
          {% endif %}
    card_mod:
      style:
        mushroom-template-chip:nth-child(2)$: |
          ha-icon {
            {{
              'animation: wash 1s ease-in-out infinite, drum 1.5s ease infinite;' if is_state('input_select.washer_status', 'W trakcie')
              else 'animation: boing 2s ease infinite;' if is_state('input_select.washer_status', 'Zakończone')
              else 'animation: shake 0.3s ease-in-out infinite,  drum 0.7s ease infinite;' if is_state('input_select.washer_status', 'Wirowanie')
              else 'none'
            }}
            transform-origin: 50% 110%;
          }
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
          @keyframes shake {
            0%, 100% { transform: translate(0, 0) rotate(0); }
            20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
            40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
            60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
            80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
          }
          @keyframes wash {
            0%, 100% { transform: translate(0, 0) rotate(0); }
            20%  { transform: translate(0.2px, -0.2px) rotate(-2deg); }
            40%  { transform: translate(-0.2px, 0.2px) rotate(2deg); }
            60%  { transform: translate(0.2px, 0.2px) rotate(-2deg); }
            80%  { transform: translate(-0.2px, -0.2px) rotate(2deg); }
          }          
          @keyframes drum {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
          }
          @keyframes boing {
            0% { transform: scale3d(1, 1, 1); }
            7% { transform: scale3d(1.25, 0.75, 1); }
            10% { transform: scale3d(0.75, 1.25, 1); }
            12% { transform: scale3d(1.15, 0.85, 1); }
            16% { transform: scale3d(0.95, 1.05, 1); }
            19% { transform: scale3d(1.05, 0.95, 1); }
            25% { transform: scale3d(1, 1, 1); }
          }
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
          } 
    alignment: center
view_layout:
  grid-column: 1
  grid-row: 3
card_mod:
  style: |
    ha-card {
      color: ;
      border-radius: 0px 0px 15px 15px;
      height: 35px;
      margin-top: -13px;
      outline-color: red;
      --chip-spacing: 0px;
      --ha-card-background: #A57C65;
    }
  card_mod:
    style: |
      ha-card {
        background: none;
        --ha-card-box-shadow: 0px;
      }

[dogo_uk (Darren Doggett)]

Hi how do i make a second copy of this, i would like two people in one card… hope that makes sense?

Thanks

type: custom:vertical-stack-in-card
mode: vertical
card_mod:
  style: |
    ha-card {
      height: 220px;
    }
cards:
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          --chip-font-size: 0.3em;
          --chip-icon-size: 0.6em;
          --chip-border-width: 0;
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-border: none;
          --chip-font-weight: normal;
        }
    alignment: justify
    chips:
      - type: template
        entity: person.fred
        content: |-
          {% if is_state('person.fred','home') %}
            {% set last_changed = states('sensor.tmp_person_time_arrived_home_fred') | as_datetime %}
          {% else %}
            {% set last_changed = states('sensor.tmp_person_time_left_home_fred') | as_datetime %}
          {% endif %}  {% if last_changed == None %}
            {{ '-' }}
          {% else %}
            {% if last_changed < today_at() - timedelta(days=1) %}
              {{ as_timestamp(last_changed) | timestamp_custom('%d.%m. %H:%M') }}
            {% elif last_changed < today_at() %}
              {{ as_timestamp(last_changed) | timestamp_custom('G. %H:%M') }}
            {% else %}
              {{ as_timestamp(last_changed) | timestamp_custom('%H:%M')}}
            {% endif %}
          {% endif %}
        icon: |-
          {% if is_state('person.fred','home') %}
            mdi:airplane-landing
          {% else %}
            mdi:airplane-takeoff
          {% endif %}
        icon_color: |-
          {% if is_state('person.fred','home') %}
            green
          {% else %}
            red
          {% endif %}
        tap_action:
          action: none
      - type: template
        entity: sensor.tmp_person_distance_from_home_fred
        content: >-
          {{- states('sensor.tmp_person_distance_from_home_fred') -}} {{- " "
          -}}  {{-
          state_attr('sensor.tmp_person_distance_from_home_fred','unit_of_measurement')
          -}}
        icon: mdi:map-marker-distance
        icon_color: >-
          {% set km = states('sensor.tmp_person_distance_from_home_fred') |
          int %} {% if km > 50 %} red {% elif km > 10 %} orange {% elif km > 5
          %} yellow {% elif km >= 0 %} green {% else %} grey {% endif %}
        tap_action:
          action: more-info
  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-card {
          --icon-size: 5em;  
          --badge-icon-size: 1.2em;
          --badge-size: 1.4em;
          --spacing: none;
          --card-secondary-font-size: 0.8em;
          --card-secondary-font-weight: normal;
        }
        mushroom-badge-icon {
          --icon-color: rgb(var(--rgb-card-background-color));
        }
    fill_container: true
    entity: person.fred
    layout: vertical
    multiline_secondary: true
    picture: /local/pictures/Emojifred.png
    primary: '{{- states(''sensor.tmp_person_zonestatus_fred'') -}}'
    secondary: >-
      {{- states('sensor.tmp_person_lastseen_fred') -}} {{- " | " -}}  {{-
      states('sensor.tmp_person_lastseenlocation_fred') -}}
    badge_icon: '{{- state_attr(''sensor.tmp_person_zonestatus_fred'',''icon'') -}}'
    badge_color: |-
      {% if is_state('sensor.tmp_person_zonestatus_fred','Home') %}
        green
      {% elif is_state('sensor.tmp_person_zonestatus_fred','Unbekannt') %}
        red
      {% else %}
        orange
      {% endif %}
    tap_action:
      action: more-info
    hold_action:
      action: navigate
      navigation_path: /home/view_fred
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          --chip-font-size: 0.3em;
          --chip-icon-size: 0.6em;
          --chip-border-width: 0;
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-border: none;
          --chip-font-weight: normal;
        }
    alignment: center
    chips:
      - type: template
        entity: sensor.dogosm_g998b_battery_state
        icon: |-
          {% if is_state('sensor.dogosm_g998b_battery_state','Charging') %}
            mdi:power-plug
          {% else %}
            mdi:power-plug-off
          {% endif %}
        icon_color: |-
          {% if is_state('sensor.dogosm_g998b_battery_state','Charging') %}
            green
          {% else %}
            grey
          {% endif %}
        tap_action:
          action: more-info
      - type: template
        entity: sensor.dogosm_g998b_battery_level
        icon: >-
          {% set bl = states('sensor.dogosm_g998b_battery_level') | int %} {% if
          bl < 10 %} mdi:battery-outline {% elif bl < 20 %} mdi:battery-10 {%
          elif bl < 30 %} mdi:battery-20 {% elif bl < 40 %} mdi:battery-30 {%
          elif bl < 50 %} mdi:battery-40 {% elif bl < 60 %} mdi:battery-50 {%
          elif bl < 70 %} mdi:battery-60 {% elif bl < 80 %} mdi:battery-70 {%
          elif bl < 90 %} mdi:battery-80 {% elif bl < 100 %} mdi:battery-90 {%
          elif bl == 100 %} mdi:battery {% else %} mdi:battery-unknown {% endif
          %}
        icon_color: >-
          {% set bl = states('sensor.dogosm_g998b_battery_level') | int %} {% if
          bl < 10 %} red {% elif bl < 20 %} red {% elif bl < 30 %} orange {%
          elif bl < 40 %} orange {% elif bl < 50 %} yellow {% elif bl < 60 %}
          yellow {% elif bl < 70 %} green {% elif bl < 80 %} green {% elif bl <
          90 %} green {% elif bl < 100 %} green {% elif bl == 100 %} green {%
          else %} grey {% endif %}
        tap_action:
          action: more-info
      - type: template
        entity: sensor.tmp_person_homewlan_fred
        icon: |-
          {% if is_state('sensor.tmp_person_homewlan_fred','on') %}
            mdi:wifi
          {% else %} 
            mdi:wifi-off
          {% endif %}
        icon_color: |-
          {% if is_state('sensor.tmp_person_homewlan_fred','on') %}
            green
          {% else %} 
            grey
          {% endif %}
        tap_action:
          action: none

[Jarne_Roussard]

hello @rhysb I have a question about your media card that you have put together very nicely, but I have discovered 1 problem when I play media, the bar of the time of, for example, the song does not come when I put it on pause, it does come, I think it is very weird and can’t immediately find the error, do you know this? thanks in advance!

picture:

code :

type: custom:stack-in-card
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.sonos_beam
    icon: mdi:play
    use_media_info: true
    use_media_artwork: true
    show_volume_level: true
    media_controls:
      - play_pause_stop
      - previous
      - next
    volume_controls:
      - volume_buttons
      - volume_set
    fill_container: false
    card_mod:
      style: |
        mushroom-shape-icon {
          display: flex;
          {% set media_type = state_attr(config.entity, 'media_title') %}
          {% if media_type == 'TV' %}
            --card-mod-icon: mdi:television-classic;
            animation: flicker 1s linear infinite alternate;
          {% else %}
            --card-mod-icon: mdi:play;
          {% endif %}
        }
        @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;
        }
        ha-card:before {
          transform: translate3d(0,0,0);
          -webkit-transform: translate3d(0,0,0);
          content: "";

          background: url('/local/idle_art.png') center no-repeat;
          {% if not is_state(config.entity, 'idle') %}
            background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
          {% endif %}

          background-size: contain;
          margin: 4px 4px 16px;
          filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
          border-radius: var(--control-border-radius);

          {% set media_type = state_attr(config.entity, 'media_content_type') %}
          {% if media_type == 'TV' %}
            aspect-ratio: 16 / 9;
          {% else %}
            aspect-ratio: 1 / 1;
          {% endif %}
        }
  - type: conditional
    conditions:
      - entity: media_player.sonos_beam
        state_not: 'off'
      - entity: media_player.sonos_beam
        state_not: idle
    card:
      entity: media_player.sonos_beam
      hide:
        icon: true
        name: true
        runtime: true
        source: true
        power: true
        state_label: true
        volume: true
        info: true
        progress: false
        controls: true
      more_info: false
      type: custom:mini-media-player
      toggle_power: false
      group: true
      card_mod:
        style:
          mmp-progress$: |
            paper-progress {
              {{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
            }
          .: |
            ha-card {
              margin: 0px 12px 12px;
              --mmp-progress-height: 12px !important;
              height: var(--mmp-progress-height);
              --mmp-accent-color: rgb(var(--rgb-indigo-color));
              --mmp-border-radius: 12px !important;
              --ha-card-border-width: 0;
            }
card_mod:
  style: |
    ha-card:before {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;

      background: url('/local/idle_art.png') center no-repeat;
      {% if not is_state('media_player.currently_playing', 'idle') %}
        background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
      {% endif %}

      filter: blur(150px) saturate(200%);
      background-size: 100% 100%;
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
    }

[berkans (Berkan Sezer)]

A modified version of Mushroom Climate Card :

• Shows the temperature
• You can add room photo or icon
• Card is glowing in red if the heater (or any other device) is working. In my example 5 degrees is the minumum so it means its turned off.
• Can comment on room temperature. For example, as you can see in my picture, the word “Not Bad” appears for the current room temperature. Comments are dynamic and changes according to room temperature.
• This card was made for the honeycombs in my house, but with a little adjustment, it can be used in air conditioners or any other climate devices.
• I have also added swipe card so that you can even add additional info as a second card in this area.

Edit:

• I have also added window check option. If the windows are open while the thermostat are working a window icon will appear and the red glowing light will turn into white indicating that there is a window open in the room.

Code:

type: custom:vertical-stack-in-card
square: false
columns: 1
cards:
  - type: grid
    columns: 1
    square: false
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-template-card
                primary: Ev Genel
                secondary: '{{ states(''sensor.genel_sicaklik'')  }} °C'
                picture: /local/png/eskiler/guest1.png
                card_mod:
                  style: |
                    ha-card {
                      background: none; } 
        card_mod:
          style: |
            ha-card {
              background: none;
              height: auto;
              width: auto !important;
              --primary-text-color: white;
              --secondary-text-color: white; 
              --card-secondary-font-weight: 300;
              --card-secondary-font-size: 20px;
              box-shadow: none !important;
              margin-left: -5px;
              margin-right: -5px;
            } 
  - type: grid
    columns: 2
    square: false
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:vertical-stack-in-card
                cards:
                  - type: horizontal-stack
                    cards:
                      - type: custom:mushroom-climate-card
                        entity: climate.sokak_termostat
                        show_temperature_control: true
                        collapsible_controls: false
                        tap_action:
                          action: more-info
                        layout: vertical
                        name: Salon Arka Orta
                        secondary_info: last-updated
                        card_mod:
                          style: |
                            ha-card {
                              background: none;
                              height: 180px !important;
                              width: auto !important;
                            --primary-text-color: white;
                              --secondary-text-color: white; 
                              --card-primary-font-weight: 500;
                              --card-primary-font-size: 18px;
                              --card-secondary-font-weight: 300;
                              --card-secondary-font-size: 15px;
                              box-shadow: none !important;
                              margin-left: -5px;
                              margin-right: -5px;
                            } 
                card_mod:
                  style: |
                    ha-card {
                      background: none;
                      height: 180px !important;
                      width: auto !important;
                    --primary-text-color: white;
                      --secondary-text-color: white; 
                      --card-secondary-font-weight: 300;
                      --card-secondary-font-size: 2px;
                      box-shadow: none !important;
                      margin-left: -5px;
                      margin-right: -5px;
                      margin-top: 20px !important;
                    } 
          - type: custom:swipe-card
            parameters: null
            spaceBetween: 8
            scrollbar: null
            hide: false
            draggable: true
            snapOnRelease: true
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-template-card
                    primary: |
                      {{ states('sensor.hue_motion_temp_salon') }} °C
                    picture: |
                      {% if state_attr('climate.sokak_termostat',
                        'temperature') | float > 5 and is_state('binary_sensor.salon_cam_sensor_cb529e23_ias_zone', 'on') %}
                       /local/png/konum/window_open3.png
                      {% else %}
                       /local/png/konum/arka_orta.JPG
                      {%- endif %}
                    secondary: >
                      {% if states('sensor.hue_motion_temp_salon') | float > 17
                      and states('sensor.hue_motion_temp_salon') | float < 22 %}
                       Cold
                      {% elif states('sensor.hue_motion_temp_salon') | float >
                      21 and states('sensor.hue_motion_temp_salon') | float < 23
                      %}
                       Getting cold
                      {% elif states('sensor.hue_motion_temp_salon') | float >
                      22 and states('sensor.hue_motion_temp_salon') | float < 24
                      %}
                       Not Bad
                      {% elif states('sensor.hue_motion_temp_salon') | float >
                      23 and states('sensor.hue_motion_temp_salon') | float < 25
                      %}
                       Warm
                      {% elif states('sensor.hue_motion_temp_salon') | float >
                      24 and states('sensor.hue_motion_temp_salon') | float < 35
                      %}
                       Turn it off
                      {% else %}
                       Off
                      {%- endif %}
                    alignment: center
                    entity: entity.entity
                    tap_action:
                      action: toggle
                    fill_container: false
                    layout: horizontal
                    multiline_secondary: true
                    card_mod:
                      style:
                        .: |
                          ha-card { 
                            background: none;
                            margin-left: auto;
                            --icon-size: 90px;
                          --primary-text-color: orange;
                          --secondary-text-color: white; 
                            --card-primary-font-weight: 500;
                            --card-primary-font-size: 15px;
                            --card-secondary-font-weight: 500;
                            --card-secondary-font-size: 15px;
                          } 
        card_mod:
          style: |
            ha-card {                                 
             {% if state_attr('climate.sokak_termostat',
               'temperature') | float > 5 and is_state('binary_sensor.salon_cam_sensor_cb529e23_ias_zone', 'on') %}
                background-color: rgba(40, 13, 12, 0.85); 
                box-shadow: 0px 0px 38px 6px rgba(213, 245, 247,0.96) !important;
                position: relative;
             {% elif state_attr('climate.sokak_termostat',
               'temperature') | float > 5 and is_state('binary_sensor.salon_cam_sensor_cb529e23_ias_zone', 'off') %}
                background-color: rgba(40, 13, 12, 0.85); 
                box-shadow: 0px 0px 38px 6px rgba(156,27,12,0.96) !important;
                position: relative;
              {% else %}  
              background: #1a1a1a;
              {% endif %} 
              height: auto;
              margin-top: 10px;
              margin-left: 10px;
              margin-bottom: 10px;
              margin-right: 10px;
              }
               ha-card:active {
                box-shadow: 0 0 90px red;
              } 
      - type: custom:vertical-stack-in-card
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:vertical-stack-in-card
                cards:
                  - type: horizontal-stack
                    cards:
                      - type: custom:mushroom-climate-card
                        entity: climate.salin_bilfen_thermostat
                        show_temperature_control: true
                        collapsible_controls: false
                        tap_action:
                          action: more-info
                        layout: vertical
                        name: Bilfen
                        secondary_info: last-updated
                        card_mod:
                          style: |
                            ha-card {
                              background: none;
                              height: 180px !important;
                              width: auto !important;
                            --primary-text-color: white;
                              --secondary-text-color: white; 
                              --card-primary-font-weight: 500;
                              --card-primary-font-size: 18px;
                              --card-secondary-font-weight: 300;
                              --card-secondary-font-size: 15px;
                              box-shadow: none !important;
                              margin-left: -5px;
                              margin-right: -5px;
                            } 
                card_mod:
                  style: |
                    ha-card {
                      background: none;
                      height: 180px !important;
                      width: auto !important;
                    --primary-text-color: white;
                      --secondary-text-color: white; 
                      --card-secondary-font-weight: 300;
                      --card-secondary-font-size: 2px;
                      box-shadow: none !important;
                      margin-left: -5px;
                      margin-right: -5px;
                      margin-top: 20px !important;
                    } 
          - type: custom:swipe-card
            parameters: null
            spaceBetween: 8
            scrollbar: null
            hide: false
            draggable: true
            snapOnRelease: true
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-template-card
                    primary: |
                      {{ states('sensor.hue_motion_temp_salon') }} °C
                    picture: /local/png/konum/bilfen.JPG
                    secondary: >
                      {% if states('sensor.hue_motion_temp_salon') | float > 17
                      and states('sensor.hue_motion_temp_salon') | float < 22 %}
                       Cold
                      {% elif states('sensor.hue_motion_temp_salon') | float >
                      21 and states('sensor.hue_motion_temp_salon') | float < 23
                      %}
                       Getting cold
                      {% elif states('sensor.hue_motion_temp_salon') | float >
                      22 and states('sensor.hue_motion_temp_salon') | float < 24
                      %}
                       Not Bad
                      {% elif states('sensor.hue_motion_temp_salon') | float >
                      23 and states('sensor.hue_motion_temp_salon') | float < 25
                      %}
                       Warm
                      {% elif states('sensor.hue_motion_temp_salon') | float >
                      24 and states('sensor.hue_motion_temp_salon') | float < 35
                      %}
                       Turn it off
                      {% else %}
                       Off
                      {%- endif %}
                    alignment: center
                    entity: entity.entity
                    tap_action:
                      action: toggle
                    fill_container: false
                    layout: horizontal
                    multiline_secondary: true
                    card_mod:
                      style:
                        .: |
                          ha-card { 
                            background: none;
                            margin-left: auto;
                            --icon-size: 90px;
                          --primary-text-color: orange;
                          --secondary-text-color: white; 
                            --card-primary-font-weight: 500;
                            --card-primary-font-size: 15px;
                            --card-secondary-font-weight: 500;
                            --card-secondary-font-size: 15px;
                          } 
        card_mod:
          style: |
            ha-card {                                 
              {% if state_attr('climate.salin_bilfen_thermostat',
              'temperature') | float > 5  %}
                background-color: rgba(40, 13, 12, 0.85); 
                box-shadow: 0px 0px 38px 6px rgba(156,27,12,0.96) !important;
                position: relative;
              {% else %}  
              background: #1a1a1a;
              {% endif %} 
              height: auto;
              margin-top: 10px;
              margin-left: 10px;
              margin-bottom: 10px;
              margin-right: 10px;
              }
               ha-card:active {
                box-shadow: 0 0 90px red;
              } 

card_mod:
  style: |
    ha-card {
      background: none;
      margin-top: px;
      margin-left: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      box-shadow: none;
    }

İcon:

[amfdlhe]

i wait your one page setup can you share it

[cretzu8523 (8523tiberiu)]

Hello i tried to use background: url(’/local/rooms/vanna.jpg’ ), linear-gradient(to left, transparent, rgb(var(–rgb-card-background-color)) 50%); but nothing hapened, can you post the code in yaml?

[berkans (Berkan Sezer)]

It is not finished yet. Might take some time.

[amfdlhe]

I appreciate your work and I cant wait
to see your work.

[kakarotto185]

Hi guys,
Could someone be kind enough and help me to figure out why icon size is no being applied? I’ve tried different things for the last 2 days but it just wont make the icon any bigger than the default one.

type: custom:mushroom-entity-card
entity: switch.double_switch_2
name: Pond
layout: vertical
fill_container: false
icon: mdi:fountain
tap_action:
  action: toggle
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{  '--icon-animation: fountain 1.5s ease infinite;' if is_state('switch.double_switch_2', 'on') }}
      }
      @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 {
         --icon-size: 100px;
      }

[c0rnflake]

Does this work?

--mush-icon-size: 100px;

[kakarotto185]

Unfortunately same result. replaced --icon-size with your code but it doesn’t change anything. Almost like the whole ha-card entry is ignored.

[c0rnflake]

This is what I use per card and the icon size works

card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -2px !important;
          background-image: url('/local/media/poly_1.jpg');
        }

[kakarotto185]

Done it. Thank you for all your help “|” symbol was in a wrong place. Mine was after “mushroom-shape-icon$: |”
Yours was after “style: |”
Does anyone know what does that symbol do “|” in that formula? Just for the future reference as it will help me to understand the code a bit better

Thank you so much for all your ideas and pointing me in the right direction.

Posting a revised code example if anyone will have that problem in the future:

type: custom:mushroom-entity-card
entity: switch.double_switch_2
name: Pond
layout: vertical
fill_container: false
icon: mdi:fountain
tap_action:
  action: toggle
card_mod:
  style: |
    mushroom-shape-icon$:
      ha-icon {
        {{  '--icon-animation: fountain 1.5s ease infinite;' if is_state('switch.double_switch_2', 'on') }}
      }
      @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 {
        --icon-size: 300px;
      }

Wrong… Icon is bigger but unfortunately animation stopped working… still looking for solution

[c0rnflake]

https://stackoverflow.com/questions/3790454/how-do-i-break-a-string-in-yaml-over-multiple-lines

[Sylwester (Sylwester Olik)]

I have question. I have problem with browser popup. Your popup is in the middle of screen. My is always on top. Did you changed something? This happend to me after recently update.