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

Sorry I didn’t get that. Which code do you mean by 154 ?

Sorry, but where do i put this code?

It’s not showing the frog images.

afbeelding

I want to use the wind direction map. I have a sensor sensor.wind_direction. The sensor shows the degree. Code but it doesn’t work

please help

type: custom:mushroom-template-card
entities:
  - sensor.wind_direction
card_mod:
  style: |
    ha-card {
      background-color: transparent;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);
    }
  content_template: |
    <ha-icon
      icon="mdi:arrow-up-bold"
      style="transform: rotate({{ states['sensor.wind_direction'].state }}deg);"
    ></ha-icon>

Found already what the issue is. In which config file i have to configure the template?

Hello everyone!

I am almost happy with my 3D printing front end.
Unfortunately the 2 buttons for pause and stop are not working. Can anyone tell me what I have done wrong?

filament

Code
type: custom:vertical-stack-in-card
cards:
  - type: grid
    square: false
    columns: 4
    cards:
      - type: custom:mushroom-template-card
        primary: '{{ state_attr(''sensor.ams_tray_1'',''type'') }}'
        secondary: ''
        icon: mdi:circle
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        icon_color: |-
          {% if state_attr('sensor.ams_tray_1','empty') == false %} 
          {{ state_attr('sensor.ams_tray_1','color') }}
          {% endif %}
        badge_icon: ''
        badge_color: ''
        multiline_secondary: false
        entity: sensor.ams_tray_1
        layout: vertical
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-symbol-size: 50px;
                {% if state_attr('sensor.ams_tray_1','active') == true %}
                --shape-animation: ping 2s infinite;
                {% endif %}
              }
              @keyframes ping {
                  0% {box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.3);}
                  70% {box-shadow: 0 0 0 10px transparent;}
                  100% {box-shadow: 0 0 0 0 transparent;}
              }
      - type: custom:mushroom-template-card
        primary: '{{ state_attr(''sensor.ams_tray_2'',''type'') }}'
        secondary: ''
        icon: mdi:circle
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        icon_color: |-
          {% if state_attr('sensor.ams_tray_2','empty') == false %} 
          {{ state_attr('sensor.ams_tray_2','color') }}
          {% endif %}
        badge_icon: ''
        badge_color: ''
        multiline_secondary: false
        entity: sensor.ams_tray_2
        layout: vertical
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-symbol-size: 50px;
                {% if state_attr('sensor.ams_tray_2','active') == true %}
                --shape-animation: ping 2s infinite;
                {% endif %}
              }
              @keyframes ping {
                  0% {box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.3);}
                  70% {box-shadow: 0 0 0 10px transparent;}
                  100% {box-shadow: 0 0 0 0 transparent;}
              }
      - type: custom:mushroom-template-card
        primary: '{{ state_attr(''sensor.ams_tray_3'',''type'') }}'
        secondary: ''
        icon: mdi:circle
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        icon_color: |-
          {% if state_attr('sensor.ams_tray_3','empty') == false %} 
          {{ state_attr('sensor.ams_tray_3','color') }}
          {% endif %}
        badge_icon: ''
        badge_color: ''
        multiline_secondary: false
        entity: sensor.ams_tray_3
        layout: vertical
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-symbol-size: 50px;
                {% if state_attr('sensor.ams_tray_3','active') == true %}
                --shape-animation: ping 2s infinite;
                {% endif %}
              }
              @keyframes ping {
                  0% {box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.3);}
                  70% {box-shadow: 0 0 0 10px transparent;}
                  100% {box-shadow: 0 0 0 0 transparent;}
              }
      - type: custom:mushroom-template-card
        primary: '{{ state_attr(''sensor.ams_tray_4'',''type'') }}'
        secondary: ''
        icon: mdi:circle
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        icon_color: |-
          {% if state_attr('sensor.ams_tray_4','empty') == false %} 
          {{ state_attr('sensor.ams_tray_4','color') }}
          {% endif %}
        badge_icon: ''
        badge_color: ''
        multiline_secondary: false
        entity: sensor.ams_tray_4
        layout: vertical
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-symbol-size: 50px;
                {% if state_attr('sensor.ams_tray_4','active') == true %}
                --shape-animation: ping 2s infinite;
                {% endif %}
              }
              @keyframes ping {
                  0% {box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.3);}
                  70% {box-shadow: 0 0 0 10px transparent;}
                  100% {box-shadow: 0 0 0 0 transparent;}
              }

Print

Code
type: custom:vertical-stack-in-card
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Bambulab X1C
        secondary: |-
          {% set status = states('sensor.y1_print_status') %}
          {% if is_state('sensor.y1_print_status','running') %}
            {{ (states("sensor.y1_print_progress") |float ) | round(0) }}% |
            {% if status == 'finish' %} Fertig {% endif %}
            {% if status == 'running' %} Drucken {% endif %} 
            {% if status == 'idle' %} Standby {% endif %} 
            {% if status == 'pause' %} Pause {% endif %}
            {% if status == 'failed' %} Fehler {% endif %} 
            {% if status == 'prepair' %} Vorbereiten {% endif %} 
          {% else %} 
            {% if status == 'finish' %} Fertig {% endif %}
            {% if status == 'running' %} Drucken {% endif %} 
            {% if status == 'idle' %} Standby {% endif %} 
            {% if status == 'pause' %} Pause {% endif %}
            {% if status == 'failed' %} Fehler {% endif %} 
            {% if status == 'prepair' %} Vorbereiten {% endif %} 
          {% endif %} 
        icon: mdi:printer-3d-nozzle
        icon_color: |-
          {% if is_state('sensor.y1_print_status','running') %}
            blue
          {% endif %}
        badge_color: red
        badge_icon: null
        entity: light.y1_chamber_light
        collapsible_controls: true
        tap_action:
          action: none
        fill_container: true
        layout: horizontal
        multiline_secondary: false
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                /* Radial progress bar */
                {% if is_state('sensor.y1_print_status','running') %}
                  background: radial-gradient(var(--card-background-color) 60%, 
                  transparent calc(60% + 1px)), 
                  conic-gradient(rgb(var(--rgb-blue)) {{ states('sensor.y1_print_progress') }}% 0%, 
                  var(--card-background-color) 0% 100%);
                {% endif %}
                z-index: 1;
              } 
              .shape:after {
                {% if is_state('sensor.y1_print_status','running') %}
                  content: '';
                  height: 100%;
                  width: 100%;
                  position: absolute;
                  border-radius: var(--icon-border-radius);
                  background: var(--shape-color);
                {% endif %}
              }
            .: |
              mushroom-state-info {
                z-index: 1;
              }
              mushroom-badge-icon {
                z-index: 1;
              }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: button.y1_pause_printing
        icon_color: white
        icon: mdi:pause
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-grey' }}), 0.7);
              --icon-color: rgb(var(--rgb-white));
            } 
      - type: entity
        entity: button.y1_stop_printing
        icon_color: white
        icon: mdi:alert-octagon
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-red' }}), 1);
            } 
    card_mod:
      style: |
        ha-card {
            --chip-box-shadow: none;
            top: 16px;
            width: -webkit-fill-available;
            right: 12px;
            position: absolute;
        } 
        .chip-container {
            right: 0px;
            position: absolute;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.y1_nozzle_temperature
        icon: mdi:printer-3d-nozzle-heat
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var(--rgb-grey), 0.2)
            }
      - type: entity
        entity: sensor.y1_bed_temperature
        icon: mdi:heating-coil
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var(--rgb-grey), 0.2)
            }
      - type: template
        content: >-
          {% set ct = states('sensor.y1_remaining_time') | int %}

          {{ (ct | float // 60) | round(0) }}h {{ (ct | float % 60) | round(0)
          }}m
        icon: mdi:alarm
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var(--rgb-grey), 0.2)
            }

Try:

type: custom:mushroom-template-card
entity: sensor.wind_direction
icon: mdi:arrow-up-bold
card_mod:
  style: |
    ha-card {
      background-color: transparent;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);
      rotate: 90
    }
    ha-state-icon {
      transform:  rotate({{ states['sensor.wind_direction'].state }}deg);
    }

image
Has anyone tried to restyle the basic more-info windows using card_mod to look more like mushroom? Can you please share your code?

bottom-nav:
dynamic or static menu?

You need to use conditions for that.

For example in my code at line 153

You can use it like this

                  secondary: |
                    {% if is_state('weather.forecast_home', 'partlycloudy') %}
                      deels bewolkt
                    {% elif is_state('weather.forecast_home', 'sunny') %}
                      zonnig
                    {% else %}  
                      none
                    {% endif %}  

And the result will look like this

image

and of course there are some other ways but this is the easiest.

Sorry, I am confused. I wanted the person card as in the following pictures:
image
Maybe you have imbedded in the input_boolean.notififiche.

Thank you again :smiley:

1 Like

The location sensor only refreshes at 4 AM, after that it should work. All three template sensors should be added to configuration.yaml.

Not sure what you mean

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.pupetti
    content_info: none
    use_entity_picture: true
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Rhys
          content:
            type: vertical-stack
            cards:
              - type: custom:mushroom-entity-card
                entity: person.pupetti
                layout: horizontal
                icon_type: entity-picture
                primary_info: state
                secondary_info: last-changed
                tap_action:
                  action: none
                hold_action:
                  action: none
                card_mod:
                  style:
                    mushroom-shape-avatar$: |
                      .picture {

                        /* Style shadow ring around person avatar */                              
                        box-shadow: 0px 0px 4px 2px var(--state-person);
                        margin-right: var(--mush-title-spacing, 12px);
                      }
                    .: |
                      ha-card {

                        /* Remove default card styling */
                        --ha-card-background: none;
                        box-shadow: none;
                        --ha-card-border-width: 0;

                        /* Increase icon size */
                        --icon-size: 72px;

                        /* Center card */
                        margin: auto;
                        width: fit-content;

                        /* Add padding to bottom of card */
                        padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
                        
                        /* Make card non-responsive to select and pointer */
                        user-select: none;
                        pointer-events: none;
                        
                        transition: all 0s;
                      }
                      :host {

                        /* Define Person State colors. Can be added to theme */
                        --state-person-home: var(--green-color);
                        --state-person-not-home: var(--red-color);
                        --state-person-zone: var(--blue-color);
                        --state-person-unknown: var(--grey-color);

                        /* Set Person State color */
                        --state-person:
                        {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                          var(--state-person-{{ states(config.entity) | replace('_', '-') }})
                        {% else %}
                          var(--state-person-zone)
                        {% endif %};

                        /* Match styling to Mushroom Title */
                        --mush-card-primary-font-size: var(--mush-title-font-size, 24px);
                        --mush-card-primary-font-weight: var(--mush-title-font-weight, normal);
                        --mush-card-primary-line-height: var(--ush-title-line-height, 1.2);
                        --mush-card-secondary-font-size: var(--mush-title-font-size, 16px);
                        --mush-card-secondary-font-weight: var(--mush-title-font-weight, normal);
                        --mush-card-secondary-line-height: var(--ush-title-line-height, 1.2);
                      }
              - type: history-graph
                entities:
                  - entity: person.pupetti
                    name: ' '
                hours_to_show: 24
                title: Timeline
                card_mod:
                  style:
                    $: |
                      .card-header {

                        /* Style timeline title */
                        padding: 0px 24px !important;
                        font-size: var(--mush-card-primary-font-size, 14px) !important;
                        font-weight: var(--mush-card-primary-font-weight, bold) !important;
                        line-height: var(--mush-card-primary-line-height, 1.5) !important;
                        color: var(--primary-text-color) !important;
                      }
                    .: |
                      ha-card {

                        /* Remove default card styling */
                        --ha-card-box-shadow: none;
                        --ha-card-background: none;
                        --ha-card-border-width: 0;
                        user-select: none;
                      }
                      .content {

                        /* Add padding on right */
                        padding: 0px 24px !important;
                      }
              - type: horizontal-stack
                cards:
                  - type: conditional
                    conditions:
                      - entity: sensor.fede_l_16_average_active_pace_3
                        state_not: '0'
                    card:
                      type: custom:mushroom-template-card
                      primary: >-
                        {{ states(entity) }} {{ state_attr(entity,
                        'unit_of_measurement') }}
                      secondary: '{{ state_attr(entity, ''distance'') | round(1) }} km'
                      icon: mdi:map-marker-path
                      entity: sensor.fede_l_16_distance_3
                      layout: vertical
                      icon_color: purple
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      double_tap_action:
                        action: none
                      card_mod:
                        style:
                          mushroom-state-info$: |
                            .primary:after {

                              /* Add destination details */
                              content: "\Ato Home";
                              white-space: pre;
                              text-overflow: ellipsis;
                            }
                          .: |
                            ha-card {

                              /* Remove default card styling */
                              --ha-card-background: none;
                              --ha-card-box-shadow: none;
                              --ha-card-border-width: 0;

                              /* Center card on row */
                              width: fit-content;
                              margin: auto;

                              /* Make card non-responsive to select and pointer */
                              user-select: none;
                              pointer-events: none;
                            }
              - type: horizontal-stack
                cards:
                  - type: conditional
                    conditions:
                      - entity: sensor.fede_l_16_geocoded_location_3
                        state_not: '0'
                    card:
                      type: custom:mushroom-template-card
                      primary: >-
                        {{ states(entity) }} {{ state_attr(entity,
                        'unit_of_measurement') }}
                      secondary: '{{ state_attr(entity, ''distance'') | round(1) }} km'
                      icon: mdi:map-marker-path
                      entity: sensor.fede_l_16_distance_3
                      layout: vertical
                      icon_color: purple
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      double_tap_action:
                        action: none
                      card_mod:
                        style:
                          mushroom-state-info$: |
                            .primary:after {

                              /* Add destination details */
                              content: "\Ato Work";
                              white-space: pre;
                              text-overflow: ellipsis;
                            }
                          .: |
                            ha-card {

                              /* Remove default card styling */
                              --ha-card-background: none;
                              --ha-card-box-shadow: none;
                              --ha-card-border-width: 0;

                              /* Center card on row */
                              width: fit-content;
                              margin: auto;

                              /* Make card non-responsive to select and pointer */
                              user-select: none;
                              pointer-events: none;
                            }
                  - type: custom:mushroom-template-card
                    primary: '{{ states(entity) }}%'
                    secondary: >
                      {{ 'charging' if
                      is_state('sensor.fede_l_16_battery_state', 'on' ) else
                      'discharging' }}
                    icon: >
                      {% set battery_level = (states(entity) | int / 10) |
                      round(0) | int * 10 %}

                      {% if battery_level == 100 %}
                        mdi:battery
                      {% elif battery_level > 0 %}
                        mdi:battery-{{ battery_level }}
                      {% else %}
                        mdi:battery-alert-variant-outline
                      {% endif %}
                    icon_color: |-
                      {% set battery_level = states(entity) | int %}
                      {% if battery_level > 90 %} 
                        green
                      {% elif battery_level > 60 %}
                        light-green
                      {% elif battery_level > 50 %}
                        lime
                      {% elif battery_level > 40 %}
                        yellow
                      {% elif battery_level > 30 %}
                        amber
                      {% elif battery_level > 20 %}
                        orange
                      {% elif battery_level > 10 %}
                        deep-orange
                      {% else %}
                        red
                      {% endif %} 
                    entity: sensor.fede_l_16_battery_level_3
                    layout: vertical
                    badge_icon: >-
                      {% if is_state('sensor.fede_l_16_battery_state_3', 'on')
                      %}
                        mdi:lightning-bolt
                      {% elif states(entity) | int < 10 %} 
                        mdi:exclamation-thick
                      {% endif %}
                    badge_color: '{{ ''red'' if states(entity) | int < 10 else ''light-blue'' }}'
                    tap_action:
                      action: none
                    hold_action:
                      action: none
                    double_tap_action:
                      action: none
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          .shape {

                            /* Radial progress bar */
                            background: radial-gradient(var(--card-background-color) 60%, 
                                                        transparent calc(60% + 1px)), 
                                        conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%, 
                                                        var(--card-background-color) 0% 100%);
                          }
                          .shape:after {

                            /* Add back icon shape */
                            content: "";
                            height: 100%;
                            width: 100%;
                            position: absolute;
                            border-radius: var(--icon-border-radius);
                            background: var(--shape-color);
                          }
                          ha-icon {

                            /* Icon charging animation */
                            {{ '--icon-animation: charge 3s linear infinite;' if is_state('binary_sensor.rhys_phone_is_charging', 'on') }}
                          }
                          @keyframes charge {
                            0%, 80% { clip-path: inset(0 0 0 0); }
                            10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
                            20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
                            30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
                            40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
                            50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
                            60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
                            70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
                          }
                        .: |
                          ha-card {

                            /* Remove default card styling */
                            --ha-card-background: none;
                            --ha-card-box-shadow: none;
                            --ha-card-border-width: 0;

                            /* Center card on row */
                            width: fit-content;
                            margin: auto;

                            /* Make card non-responsive to select and pointer */
                            user-select: none;
                            pointer-events: none;
                          }
                  - type: conditional
                    conditions:
                      - entity: sensor.fede_l_16_connection_type_3
                        state_not: <not connected>
                    card:
                      type: custom:mushroom-template-card
                      primary: '{{ states(''sensor.fede_l_16_connection_type_3'') }}'
                      secondary: >-
                        {% set signal_level = states(entity) | int %} {% if
                        signal_level != -1 %} 
                          {{ signal_level }} dBm
                        {% endif %}
                      icon: >-
                        {% set signal_level = states(entity) | int | abs %} {%
                        if signal_level > 90 %} 
                          mdi:wifi-strength-outline
                        {% elif signal_level > 80 %} 
                          mdi:wifi-strength-1
                        {% elif signal_level > 70 %}
                          mdi:wifi-strength-2
                        {% elif signal_level > 60 %}
                          mdi:wifi-strength-3
                        {% elif signal_level > 1 %}
                          mdi:wifi-strength-4
                        {% else %}
                          mdi:wifi-strength-off
                        {% endif %}
                      entity: sensor.fede_l_16_connection_type
                      layout: vertical
                      fill_container: false
                      icon_color: cyan
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      double_tap_action:
                        action: none
                      card_mod:
                        style: |
                          ha-card {

                            /* Remove default card styling */
                            --ha-card-background: none;
                            --ha-card-box-shadow: none;
                            --ha-card-border-width: 0;

                            /* Center card on row */
                            width: fit-content;
                            margin: auto;

                            /* Make card non-responsive to select and pointer */
                            user-select: none;
                            pointer-events: none;
                          }
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    tap_action:
                      action: none;
                    hold_action:
                      action: call-service
                      service: notify.mobile_app_fede_l_16
                      data:
                        message: Ringing phone...
                        title: Find Phone
                        data:
                          ttl: 0
                          importance: high
                          priority: high
                          tag: Find
                          channel: alarm_stream
                    icon: mdi:target
                    icon_color: red
                    content: Find Phone
                alignment: center
                card_mod:
                  style: |
                    ha-card {

                      /* Style Chip like Mushroom button */
                      --chip-background: rgba(var(--rgb-red), 0.2);
                      --chip-border-radius: var(--mush-control-border-radius, 12px);
                      --chip-height: var(--mush-control-height, 42px);
                      --chip-box-shadow: none;
                      user-select: none;
                    }
                    ha-card:active {

                      /* Add effect to give feedback on button press */
                      --chip-background: rgba(var(--rgb-red), 0.4);
                    }
              - type: map
                entities:
                  - entity: person.pupetti
                dark_mode: false
                hours_to_show: 24
                aspect_ratio: '4:3'
                card_mod:
                  style:
                    ha-map $ ha-entity-marker $: |
                      .marker {

                        /* Style person marker & adjust position to avoid blocking waypoints */
                        border: 3px solid var(--state-person) !important;
                        border-radius: 50% 50% 50% 0px !important;
                        transform: rotate(-45deg) translate(50%, -50%);
                        overflow: visible !important;
                        background: var(--state-person) !important;
                      }
                      .entity-picture {

                        /* Correct orientation of person avatar */
                        transform: rotate(45deg);
                        border-radius: 50%;
                      }
                    ha-map $: |
                      path:first-child { 

                        /* Style accuracy radius */
                        stroke: var(--state-person);
                        fill: color-mix(in srgb, var(--state-person) 50%, transparent);
                        stroke-width: 0px;
                      }
                      path:nth-child(even) {

                        /* Styling for waypoints */
                        stroke: var(--purple-color);
                        stroke-width: 4px;
                      }
                      path:nth-child(odd):not(:first-child) { 

                        /* Styling for lines */
                        stroke: var(--purple-color);
                        stroke-width: 4px;
                      }

                      .leaflet-control-attribution {

                        /* Style attribution text */
                        background: rgba(var(--rgb-card-background-color), 0.4) !important;
                        font-size: 10px;
                      }
                      .leaflet-container a {

                        /* Set color of zoom icons & attribution text */
                        color: var(--secondary-text-color);
                      }

                      .leaflet-control-zoom-in,
                      .leaflet-control-zoom-out {

                        /* Style zoom buttons like Chips */
                        border-radius: var(--mush-chip-border-radius, 19px) !important;
                        padding: 3px;
                        background: rgb(var(--rgb-secondary-text-color), 0.2) !important;
                        margin: 8px 12px 0px;
                        border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
                      } 
                      .leaflet-top {

                        /* Move zoom buttons to bottom of map */
                        bottom: 0px !important;
                      }
                      .leaflet-control-zoom {

                        /* Allow buttons to be moved */
                        position: absolute !important;

                        /* Adjust spacing for border */
                        bottom: calc(2 * var(--ha-card-border-width, 1px) + 56px);
                        
                        /* Remove extra margin */
                        margin: 0px !important;

                        /* Remove zoom control border */
                        border: none !important;
                      }
                      .leaflet-container:after {

                        /* Fade out map at top */
                        content: "";
                        position: absolute;
                        height: 100%;
                        width: 100%;
                        background: linear-gradient(to top, transparent 65%, var(--card-background-color));
                      }
                    ha-icon-button $ mwc-icon-button $: |
                      button {

                        /* Size center button to match Chip */
                        height: var(--mush-chip-height, 36px) !important;
                        width: var(--mush-chip-height, 36px) !important;
                        --mdc-icon-size: 22px;
                      }
                    .: |
                      ha-card {

                        /* Remove default card styling without affecting child elements */
                        box-shadow: none;
                        border-width: 0;
                        border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
                        
                        transition: all 0s;
                      }
                      :host {

                        /* Define Person State colors. Can be added to theme */
                        --state-person-home: var(--green-color);
                        --state-person-not-home: var(--red-color);
                        --state-person-zone: var(--blue-color);
                        --state-person-unknown: var(--grey-color);

                        /* Set person state color */
                        --state-person:
                        {% if is_state(config.entities[0].entity, ['home', 'not_home', 'unknown']) %}
                          var(--state-person-{{ states(config.entities[0].entity) | replace('_', '-') }})
                        {% else %}
                          var(--state-person-zone)
                        {% endif %};
                      }
                      ha-icon-button {

                        /* Position center button */
                        bottom: 12px;
                        left: 12px !important;
                        top: auto !important;

                        /* Style center button to match Chip */
                        color: var(--deep-orange-color) !important;
                        background: color-mix(in srgb, var(--deep-orange-color) 20%, transparent);
                        border-radius: var(--mush-chip-border-radius, 19px);
                        border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
                      }
          card_mod:
            style: |
              :host {

                /* Remove border from poup */
                --popup-padding-x: 0px;
                --popup-padding-y: 0px;
                --popup-min-width: 450px;
              }
              .content {

                /* Remove extra bottom border */
                margin: -18px -24px -24px !important;
              }
    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;
        }

sorry i did not understand before, anyway remember to click on the card so you can see my modify…

1 Like

@hiddevanbrussel in the meantime, set the location sensor manually to state: city

then at 4 AM it will refresh again.

Okay, I tried numerous configs of code.
But I cant get this: image

To be transparent like this:image

I used this code… It works for the weather, but not for the chips. What am I doing wrong?

- type: custom:weather-card
style: |
ha-card {background: transparent;
border-style: none;
border: 0px;
box-shadow: none;
background: rgba(50,50,50,0.3);}
entity: weather.forecast_home
- type: horizontal-stack
entity: person.amy
cards:
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.living_room_2
use_light_color: true
name: Living
content_info: name
style: |
ha-card {
background-color: transparent;
box-shadow: none;
}

Thank for the tip. It works.

have a look at the guide in my profile. but essentially you need to target each chip. each chip is basically its own card.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.bedroom_temperature_humidity_temperature
    icon_color: |-
      {% if is_state('climate.master_bedroom', 'heat') %}
        orange
      {% else %}
        blue
      {% endif %}
    card_mod:
      style: |
        ha-card {
          background: none !important;
        }
  - type: template
    icon: mdi:thermometer
    card_mod:
      style: |
        ha-card {
          background: none !important;
        }

you can also do it globally for the chip card by changing the variable color instead:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.bedroom_temperature_humidity_temperature
    icon_color: |-
      {% if is_state('climate.master_bedroom', 'heat') %}
        orange
      {% else %}
        blue
      {% endif %}
  - type: template
    icon: mdi:thermometer
card_mod:
  style: |
    ha-card {
      --chip-background: none !important;
    }

Please do learn how to format your code. When you have blocks of code like i have above, put it on its own line and only then press the code block button. That is different from inline code which you have used. :slight_smile:

Difference between using:

code

And code

1 Like

maybe a better question for the main card mod topic as you arent modifying the mushroom card, but are trying to make the more info dialog look like mushroom using card mod.

but my 2 cents. i wouldnt bother trying to modify the more-info dialog unless you absolutely have no other option. i would just make a new card with mushroom elements and maybe a mini graph or apex graph and put them in a browser mod popup instead.

1 Like

could be that their z-index is not correct? so try and maybe set their z-index to 1 like this and maybe you can then press them?

    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          top: 16px;
          width: -webkit-fill-available;
          right: 12px;
          position: absolute;
          z-index: 1;
        } 
1 Like