Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

nothing specialā€¦

type: custom:mushroom-entity-card
entity: scene.good_night
name: Gute Nacht
icon: mdi:weather-night
icon_color: purple
secondary_info: none
icon_type: icon
tap_action:
  action: call-service
  service: scene.turn_on
  target:
    entity_id: scene.good_night
  data:
    transition: 2
hold_action:
  action: none
double_tap_action:
  action: none
fill_container: true
layout: vertical
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        width: 490px !important;
        border-radius: 13px !important;
      }  

Something like this work for you?

Hard to tell as it seems like you are making it for a very different screen size to mine.

type: custom:mushroom-entity-card
entity: scene.good_night
name: Gute Nacht
icon: mdi:weather-night
icon_color: purple
secondary_info: none
icon_type: icon
tap_action:
  action: call-service
  service: scene.turn_on
  target:
    entity_id: scene.good_night
  data:
    transition: 2
hold_action:
  action: none
double_tap_action:
  action: none
fill_container: true
layout: vertical
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        position: relative;
        width: 490px !important;
        border-radius: 13px !important;
      }
    .: |
      ha-state-icon {
        position: absolute;
        left: 10px;
      }
      mushroom-state-info {
        position: absolute;
        top: 24px;
        left: -10px;
      }
1 Like

thank you a lot! worked! just tweaked arround with the numbers:

On:
image

any idea how i change the off-color?

Off:
image

Dont have scenes so not sure. Does a scene entity have an on/off state? If so something like this should work:

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        position: relative;
        width: 490px !important;
        border-radius: 13px !important;
        {% if states('scene.good_night') == 'on' %}
          background: rgba(var(--rgb-purple), 0.2) !important;
        {% else %}
          background: rgba(var(--rgb-blue), 0.2) !important;
        {% endif %}
      }
    .: |
      ha-state-icon {
        position: absolute;
        left: 10px;
        {% if states('scene.good_night') == 'on' %}
          color: rgba(var(--rgb-purple), 1) !important;
        {% else %}
          color: rgba(var(--rgb-blue), 1) !important;
        {% endif %}
      }
      mushroom-state-info {
        position: absolute;
        top: 24px;
        left: -10px;
      }

For more styling info check my guide:

1 Like

thank you sir! you just safed my weekend. time to redo my homescreen! haha

will definitely check out your guide

2 Likes

Thanks. That is much better. Scales also well on mobile. The only thing is that the background of the left card (EV disconnected etc) has a very slightly different background color vs the the rest of the card

Very nice. Please Share your Code. Thank You.

can anyone help with card-mod Pop ups. when I view them on android app, it does not fit on the screen?
What am I missing here??

tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    service: browser_mod.popup
    target:
      device_id:
        - 4064f034b49bd0d728645f51df0ec321
        - 2615813c7af26d27771116d33cd7399a
      title: Lights
    data:
      dismissable: true
      autoclose: false
      size: NORMAL
      content:
        type: custom:auto-entities
        filter:
          include:
            - group: light.total_light_switch_group
              state: 'on'
              options:
                features:
                  - type: light-brightness
                type: tile
                vertical: true
                color: accent
                tap_action:
                  action: toggle
                icon_tap_action:
                  action: more-info
            - group: light.total_light_bulb_group
              state: 'on'
              options:
                features:
                  - type: light-brightness
                type: tile
                vertical: true
                color: accent
                tap_action:
                  action: toggle
                icon_tap_action:
                  action: more-info
          exclude: []
        card:
          square: false
          type: grid
          columns: 2
        show_empty: true
        card_param: cards
        sort:
          method: friendly_name
          reverse: false
          numeric: true
          ignore_case: false
``

TOP BAR STICKY:

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: menu
        card_mod:
          style: |
            ha-card {
              --chip-icon-size: 23px;
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
            } 
      - type: custom:mushroom-template-card
        primary: HOME
        secondary: ''
        icon: mdi:shield-home
        icon_color: |-
          {% set alarm_status = states(entity) %}
          {% if alarm_status == 'armed_away' %} 
            green
          {% elif alarm_status == 'disarmed' %}
            disabled
          {% elif alarm_status == 'arming' %}
             yellow
          {% elif alarm_status == 'triggered' %}
             red
          {% endif %} 
        entity: alarm_control_panel.home
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              width: 110px;
              --spacing: 3px;
              padding-bottom: 0px !important;
              background: none;
              box-shadow: none;
              margin-left: auto;
              margin-right: auto;
              margin-top: -5px;
              transition: all 0s;
            }

            mushroom-shape-icon {
              --shape-color: none !important; 
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: input_boolean.menuconsumi
            icon: mdi:chart-bar
            card_mod:
              style: |
                ha-card:after {
                  position: absolute;
                  background: rgb(var(--rgb-red));
                  border-radius: 50%;
                  top: 6px;
                  right: 6px;
                  width: 8px;
                  height: 8px;
                }
          - type: template
            entity: input_boolean.menu
            icon: mdi:dots-vertical
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Impostazioni
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-select-card
                        entity: input_select.tema
                        layout: horizontal
                        secondary_info: none
                      - type: custom:stack-in-card
                        cards:
                          - type: horizontal-stack
                            cards:
                              - type: custom:mushroom-template-card
                                primary: 'Seleziona il tema:'
                                secondary: ''
                                icon: ''
                                tap_action:
                                  action: none
                                hold_action:
                                  action: none
                                double_tap_action:
                                  action: none
                                layout: horizontal
                              - type: custom:mushroom-template-card
                                secondary: ''
                                icon: mdi:white-balance-sunny
                                layout: vertical
                                icon_color: >-
                                  {% if is_state('input_select.chiaro_scuro',
                                  'Scuro') %}

                                  white

                                  {% elif is_state('input_select.chiaro_scuro',
                                  'Chiaro') %}

                                  black

                                  {% endif %}
                                tap_action:
                                  action: call-service
                                  service: input_select.select_option
                                  target:
                                    entity_id: input_select.chiaro_scuro
                                  data:
                                    option: Chiaro
                                entity: input_select.chiaro_scuro
                                card_mod:
                                  style: |
                                    ha-card {
                                      width: 0px;
                                      height: 0px !important;
                                      --spacing: 0px;
                                      background: var(--card-background-color) !important;
                                      box-shadow: var(--ha-card-box-shadow) !important;
                                      border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
                                      margin-top: 23px;
                                      margin-left: 160px;
                                      transition: all 0.5s;
                                    }
                                    mushroom-shape-icon {
                                      {% if is_state('input_select.chiaro_scuro', 'Scuro') %}
                                         --shape-color: none !important;     
                                      {% endif %}
                                    }
                              - type: custom:mushroom-template-card
                                secondary: ''
                                icon: mdi:weather-night
                                layout: vertical
                                icon_color: >-
                                  {% if is_state('input_select.chiaro_scuro',
                                  'Scuro') %}

                                  white

                                  {% elif is_state('input_select.chiaro_scuro',
                                  'Chiaro') %}

                                  black

                                  {% endif %}
                                tap_action:
                                  action: call-service
                                  service: input_select.select_option
                                  target:
                                    entity_id: input_select.chiaro_scuro
                                  data:
                                    option: Scuro
                                entity: input_select.chiaro_scuro
                                card_mod:
                                  style: |
                                    ha-card {
                                      width: 0px;
                                      height: 0px !important;
                                      --spacing: 0px;
                                      background: var(--card-background-color) !important;
                                      box-shadow: var(--ha-card-box-shadow) !important;
                                      border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
                                      margin-top: 23px;
                                      margin-left: 100px;
                                      transition: all 0.5s;
                                    }
                                    mushroom-shape-icon {
                                      {% if is_state('input_select.chiaro_scuro', 'Chiaro') %}
                                         --shape-color: none !important;     
                                      {% endif %}
                                    }
                        card_mod:
                          style: |
                            ha-card {
                              height: 50px;
                              padding: 0px;
                            }
                  card_mod:
                    style:
                      ha-header-bar$: |
                        .mdc-top-app-bar__section {
                          padding: 0px !important;
                        }
                        .mdc-top-app-bar__title {
                          --mdc-typography-headline6-font-size: 18px;
                          padding-left: 8px !important;
                        }
                        .mdc-top-app-bar__row {
                          height: var(--mdc-icon-button-size, 36px) !important;
                        }
                        .mdc-top-app-bar {
                          padding: 8px;
                        }
                      .: |
                        ha-icon-button {
                          position: absolute !important;
                          right: 0px;
                          background: color-mix(in srgb, var(--grey-color) 20%, transparent);
                          border-radius: 50%;
                          border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
                        }
                        :host {
                          --popup-min-width: 450px;
                          --mdc-icon-button-size: 36px;
                        }
            hold_action:
              action: none
        alignment: end
        card_mod:
          style: |
            ha-card {
              --chip-icon-size: 22px;
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
            } 
  - type: conditional
    conditions:
      - entity: input_boolean.menuconsumi
        state: 'on'
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: entity
          entity: sensor.cont_acqua_acqua_m3
          icon_color: blue
          tap_action:
            action: more-info
          alignment: end
          card_mod: null
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
              }
        - type: entity
          entity: sensor.energia
          icon: mdi:lightning-bolt
          icon_color: yellow
          tap_action:
            action: more-info
          alignment: end
          card_mod: null
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
              }
        - type: conditional
          conditions:
            - entity: group.luci
              state: 'on'
          chip:
            type: template
            icon: mdi:lightbulb
            entity: group.luci
            content: >
              {{ expand(states.group.luci) | selectattr('state', 'eq', 'on') |
              list | count }}
            icon_color: amber
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Lights On
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.luci
                          state: 'on'
                          options:
                            type: custom:mushroom-light-card
                            show_brightness_control: true
                            layout: horizontal
                            tap_action:
                              action: toggle
                            use_light_color: true
                        - entity_id: group.luci
                          state: 'on'
                          options:
                            type: custom:mushroom-light-card
                            layout: horizontal
                            secondary_info: none
                            tap_action:
                              action: toggle
                            card_mod:
                              style: |
                                /* Style & position All Lights button */
                                ha-card {
                                  background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
                                }
                                :host {
                                  margin: 0px 0px 12px !important;
                                }
                      exclude: []
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: group.luci
              state: 'on'
          chip:
            type: template
            icon_color: blue
            icon: mdi:window-open
            entity: group.luci
            content: >
              {{ expand(states.group.luci) | selectattr('state', 'eq', 'on') |
              list | count }}
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Windows Open
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.luci
                          state: 'on'
                          options:
                            type: custom:mushroom-entity-card
                            layout: horizontal
                            secondary_info: last-changed
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                      exclude: []
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: group.luci
              state: 'on'
          chip:
            type: template
            icon_color: light-blue
            icon: mdi:water-alert
            tap_action:
              action: more-info
            entity: group.luci
            card_mod:
              style: |
                .content {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                }
        - type: conditional
          conditions:
            - entity: group.luci
              state: 'on'
          chip:
            type: template
            icon_color: red
            icon: mdi:fire-alert
            tap_action:
              action: more-info
            entity: group.luci
            card_mod:
              style: |
                .content {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                }
      alignment: end
      card_mod:
        style: |
          /* Set margins on notification chips */
          ha-card {
            margin: var(--chip-spacing) calc(-1 * var(--chip-spacing)) 0px;
            transition: all 0s;
          }
card_mod:
  style: |
    /* Remove styling from top card with chips */
    ha-card {
      /* Allow pseudo elements to display outside card */
      overflow: visible !important;

      /* Remove gap at top of card */
      margin-top: calc(-1 * var(--mush-chip-spacing, 8px));

      /* Remove styling from card */
      box-shadow: none;
      border: none;
      background: none;
      padding: var(--mush-chip-spacing, 8px);
      transition: all 0s;
    }
    /* Make card sticky at top of page */
    :host {
      position: sticky;
      z-index: 4;
      top: 0px;
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";

      /* Make fixed so element scrolls up */
      position: absolute;
      top: 0px;

      /* Adjust height when notifications visible */
      height: {{ '104px' if is_state('input_boolean.menuconsumi', 'on') else '60px' }};

      /* Set width to match */
      width: 100%;
      max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));

      /* Center element on page */
      left: 50%;
      transform: translateX(-50%);

      /* Position between chips and background pseudo elemnt */
      z-index: -1;

      /* Match background to main card */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
    }
    /* Pseudo element for background & other card styling */
    ha-card:before {
      content: "";

      /* Position & size card behind chips */
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;

      /* Adjust width to account for border */
      width: 100%;

      /* Position card at back */
      z-index: -1;

      /* Blur content behind card */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      /* Adjust opacity of card */
      background: rgba(var(--rgb-card-background-color), 0.8);

      /* Set styling of card */
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
      //box-shadow: var(--ha-card-box-shadow);
      box-shadow: 30px;
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
    }

4 Likes

SECOND CARD:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto auto
      margin: 8px 4px 4px 4px;
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: person.mattia
            content_info: none
            use_entity_picture: true
            tap_action:
              action: none
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: entity
            entity: person.giulia
            content_info: none
            use_entity_picture: true
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Sarah
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-person-card
                        entity: person.giulia
                        icon_type: entity-picture
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: entity
            entity: person.angela
            content_info: none
            use_entity_picture: true
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Elijah
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-person-card
                        entity: person.angela
                        icon_type: entity-picture
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: entity
            entity: person.maurizio
            content_info: none
            use_entity_picture: true
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Michaela
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-person-card
                        entity: person.maurizio
                        icon_type: entity-picture
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
        alignment: end
        card_mod:
          style: |
            ha-card { 
              /* Overlap avatar Chips */
              --chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));

              /* Set size of border around Chips */
              --chip-avatar-padding: 2px;

              /* Reduce width to fit Chips & allow max space for weather */
              width: fit-content;
              transition: all 0s;
            }
      - type: custom:mushroom-template-card
        primary: '{{ state_attr(entity, ''temperature'') | round(1) }} Ā°C'
        secondary: >-
          {% set condition = state_attr(entity, 'forecast')[0]['conditions']%}
          {% set intensity = states('sensor.wupws_preciprate')%}

          {% if intensity != 'None' %}
            {% set condition = intensity + 'mm' %}
          {% endif %}

          {{ condition }}
        icon: none
        entity: weather.ifiugg2
        picture: >-
          {% set condition = states(entity) %} {% if condition == 'partlycloudy'
          and is_state('sun.sun', 'below_horizon') %} {% set condition =
          condition + '-night' %} {% endif %} /local/weather_icon/anim/{{
          condition }}.svg
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
                transform: scaleX(-1);
                text-align: right;
                width: fit-content;
               
              }
            .: |
              ha-card {
                transform: scaleX(-1);
                --icon-size: 40px;
                --icon-border-radius: 0;
                --card-secondary-font-weight: normal;
                --ha-card-background: none;
                --ha-card-box-shadow: none;
                --ha-card-border-width: 0;
                padding: 0px !important;
                transition: all 0s;
              }
  - type: horizontal-stack
    cards:
      - type: custom:mod-card
        card:
          type: custom:mushroom-title-card
          title: |-
            {% set time = now().hour %}
            {% if (time >= 18) %} 
             Buonasera, {{user}}!
            {% elif (time >= 22) %}
             Buonanotte, {{user}}!
            {% elif (time >= 12) %}
             Ciao, {{user}}!
            {% elif (time >= 5) %}
             Buongiorno, {{user}}!
            {% else %}
             Hello, {{user}}
            {% endif %}
          subtitle: All'interno ci sono {{ states('sensor.temperatura_soffitta')}}Ā°C
          alignment: start
        card_mod:
          style:
            mushroom-title-card$: |
              /* Style greeting */
              .title {
                --title-font-size: var(--mush-title-font-size, 25px);
                --title-font-weight: var(--mush-subtitle-font-weight, light);
                color: var(--primary-text-color) !important;
              }
              /* Style name */
              .subtitle {
                --subtitle-font-size: var(--mush-title-font-size, 12px);
                --subtitle-font-weight: var(--mush-title-font-weight, bold);
                color: var(--secondary-text-color) !important;
                padding-left: 2px;
              }
              /* Set spacing around greeting */
              .header {
                --title-padding: 5px 12px 24px;
                --title-spacing: 5px;
              }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        secondary: House
        icon: mdi:home
        layout: vertical
        icon_color: blue
        tap_action:
          action: navigate
          navigation_path: house
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: Lights
        icon: mdi:lightbulb
        icon_color: amber
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: lights
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        secondary: Secure
        icon: mdi:shield
        icon_color: green
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: security
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        secondary: Media
        icon: mdi:speaker
        layout: vertical
        icon_color: red
        tap_action:
          action: navigate
          navigation_path: media
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        secondary: Net
        icon: mdi:lan
        layout: vertical
        icon_color: cyan
        tap_action:
          action: navigate
          navigation_path: net
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }
            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
card_mod:
  style: |
    ha-card {
      /* Set padding of card */
      padding: 8px 8px 12px;

      /* Move card up to match header card */
      margin-top: -20px;
      /* Styling of card background */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);

      transition: all 0s;
    }

5 Likes

Got the same problem and it was driving me wildā€¦ But only on my light theme, dark was perfect. Tried all kind of tweaks but in the end i almost gave up. And now i think i found it!

Could you check your theme*.yaml for this typo?

theme fault

Change car.rd-background-color: to card-background-color:

After that go to developer-tools, Services, Home Assistant Frontend: Reload themes.
See if your problem is solved.

Edit: I will install UI Lovelace Minimalist. The code below will probably not fix the issue.
See if that fix it.

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: minmax(0, 1fr)
      grid-template-rows: auto
      grid-template-areas: |
        "a b"
    cards:
      - type: horizontal-stack
        view_layout:
          grid-area: a
        cards:
          - type: custom:mushroom-template-card
            primary: |
              {{ states("sensor.myenergi_zappi_plug_status") }}
            icon: >
              {% set battery_level = (states('sensor.t_616_rz_state_of_charge')
              | int / 10) | round(0) | int * 10 %}

              {% if is_state('sensor.myenergi_zappi_status', 'Charging' ) %}
                {% if battery_level > 0 %}
                  mdi:battery-charging-{{ battery_level }}
                {% else %}
                  mdi:battery-charging-outline
                {% endif %}
              {% else %}
                {% if battery_level == 100 %}
                  mdi:battery
                {% elif battery_level > 0 %}
                  mdi:battery-{{ battery_level }}
                {% else %}
                  mdi:battery-alert-variant-outline
                {% endif %}
              {% endif %}
            icon_color: |-
              {% set bl = states("sensor.t_616_rz_state_of_charge") | int %}
              {% if bl < 10 %} red 
              {% elif bl < 20 %} red 
              {% elif bl < 30 %} red 
              {% elif bl < 40 %} orange 
              {% elif bl < 50 %} orange 
              {% elif bl < 60 %} orange 
              {% elif bl < 70 %} green 
              {% elif bl < 80 %} green 
              {% elif bl < 90 %} green 
              {% elif bl < 100 %} green
              {% elif bl == 100 %} green 
              {% else %} grey 
              {% endif %}
            secondary: >
              {{ states("sensor.myenergi_zappi_status") }} {{
              states("sensor.myenergi_zappi_power_ct_internal_load") }}W
            entity: sensor.myenergi_zappi_plug_status
            layout: horizontal
            fill_container: true
            tap_action:
              action: more-info
            card_mod:
              style: |
                @keyframes blink {
                  50% {opacity: 0;}
                }
                ha-card {
                  padding: 0px !important;
                  margin: 0px !important;
                  border: none;
                  background: none !important;                          
                }            
                ha-state-icon:after {
                  content: "{{states('sensor.t_616_rz_state_of_charge')}}%";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: {% if is_state('switch.ev_smart_charging_ev_connected', 'off') %}
                  rgb(var(--rgb-red)) {% else %} rgb(var(--rgb-green)) {% endif %};
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 18px;
                  height: 18px;
                  font-size: 8px; 
                }
      - type: horizontal-stack
        view_layout:
          grid-area: b
        cards:
          - type: custom:mushroom-template-card
            primary: ''
            secondary: ''
            fill_container: true
            layout: vertical
            icon: mdi:play
            entity: button.ev_smart_charging_manually_start_charging
            icon_color: >
              {% if is_state('switch.ev_smart_charging_ev_connected', 'on') %}
              {% endif %}
            tap_action:
              action: toggle
            card_mod:
              style: |-
                ha-card {
                  padding: 0px !important;                
                  border: none;
                  background: none;              
                }          
          - type: custom:mushroom-template-card
            primary: ''
            secondary: ''
            fill_container: true
            layout: vertical
            icon: mdi:stop
            entity: button.ev_smart_charging_manually_stop_charging
            icon_color: >
              {% if is_state('switch.ev_smart_charging_ev_connected', 'on') %}
              {% endif %}
            tap_action:
              action: toggle
            card_mod:
              style: |-
                ha-card {
                  padding: 0px !important;
                  border: none;
                  background: none;              
                }
card_mod:
  style: |-
    ha-card {
      padding: 0px !important;                
      border: none;
    }          

Weā€™re almost thereā€¦loading :slight_smile:

VID-20230908-WA0097

17 Likes

What does it show when you tap on the chart icon? The one on the top bar.

image

Anybody got an Idea how to only display the icon with the badge (template card) (with or without the background but without the large space on the right).

If i dont have any primary or secondard text the chip card, it only uses the needed space for the icon. with the normal mushroom template card it still reserves the full space.

Did you find a solution yet? I have the same feeling :slight_smile:

Top is Mushroom, bottom is Tile
SchermĀ­afbeelding 2023-09-09 om 00.10.17

Any idea what the standard Tile font / icon settings are?

You can do it with card mod.

With shape background:
SmartSelect_20230909_001315_Home Assistant

Code
card_mod:
  style: |
    ha-card {
      width: fit-content;
    }

Without shape background:
SmartSelect_20230909_001702_Home Assistant

Code
card_mod:
  style: |
    ha-card {
      width: fit-content;
    }
    mushroom-shape-icon {
      --shape-color: none !important;
    }

No card background:
SmartSelect_20230909_005600_Home Assistant

Code
card_mod:
  style: |
    ha-card {
      width: fit-content;
      background: none;
      border: none !important;
      box-shadow: none !important;
    }

No card background or shape background:
SmartSelect_20230909_005831_Home Assistant

Code
card_mod:
  style: |
    mushroom-shape-icon {
      --shape-color: none !important;
    }
    ha-card {
      width: fit-content;
      background: none;
      border: none !important;
      box-shadow: none !important;
    }

And last one, no card background, shape background, or badge background:
SmartSelect_20230909_010059_Home Assistant

Code
card_mod:
  style: |
    mushroom-shape-icon {
      --shape-color: none !important;
    }
    ha-card {
      width: fit-content;
      background: none;
      border: none !important;
      box-shadow: none !important;
    }
    mushroom-badge-icon {
      --main-color: none !important;
    }
7 Likes

Not a different font. Different font weight and color.

You can change the font weight and color of the tile card like this (to match mushroom default):

Tile to Match Mushroom
card_mod:
  style:
    ha-tile-info$: |
      .primary {
        font-weight: bold !important;
        color: rgba(var(--rgb-primary-text-color), 1) !important;
      }
      .secondary {
        font-weight: bold !important;
        color: rgba(var(--rgb-secondary-text-color), 1) !important;
      }

And to do the opposite:

Mushroom Match Tile
card_mod:
  style:
    mushroom-state-info$: |
      .primary {
        font-weight: 400 !important;
        color: rgba(var(--rgb-primary-text-color), 1) !important;
      }
      .secondary {
        font-weight: 400 !important;
        color: rgba(var(--rgb-primary-text-color), 1) !important;
      }

For the icons the only real difference tends to be the icon size and color as well. Both can be changed like this (note that i have chosen blue as an example, can be any color, also please note any 0.2 or 1 in the rgba color, it shows the transparency of the color so it is important!):

Tile Match Mushroom
card_mod:
  style:
    ha-tile-icon$: |
      :host {
        --mdc-icon-size: 20px !important;
      }
      ha-icon {
        color: rgba(20, 160, 255, 1) !important;
      }
      .shape::before {
        background-color: rgba(20, 160, 255, 1) !important;
      }

And the opposite:

Mushroom Match Tile
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: rgba(var(--rgb-blue), 0.2) !important;
      }
    .: |
      ha-state-icon {
        color: rgba(var(--rgb-blue), 1);
        --icon-symbol-size: 25px;
      }

EDIT: just to add if the modification for the icon doesnt work for the tile card try and replace ha-icon with ha-svg-icon unfortunately the tiles use a mix depending on whether the icon is one that changes based on the state or not (so open or closed blinds etc.)

8 Likes

I donā€™t have this typo in my yaml file. So still have the issue.