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

although you’ve deleted your post, if your after a radial dial with mushroom you could do it like this.
Screenshot_20241031_165639_Home Assistant

type: custom:mushroom-template-card
                primary: Memory
                icon: none
                layout: horizontal
                icon_color: pink
                entity: sensor.system_monitor_memory_usage
                badge_icon: mdi:memory
                badge_color: pink
                secondary: ""
                tap_action:
                  action: more-info
                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      .shape {
                        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 {
                        content: '';
                        height: 100%;
                        width: 100%;
                        position: absolute;
                        border-radius: var(--icon-border-radius);
                        background: var(--shape-color);
                      }
                    .: |
                      ha-state-icon:after {
                        content: "{{ states(config.entity) | round(0)  }}%";
                        font-size: var(--card-primary-font-size);
                        position: absolute;
                        top: 19px;
                        left: 8px;
                      }
                      ha-card {
                        margin-left: 20px;
                        margin-top: 7px;

Change float to int. Should give you 5 instead of 5.00

Would like to have 5.00 as value. But mushroom card cuts the 0s at the end. Default value format for the entity is 5.00` (two decimal places). Default entity card is showing correct. Only mushroom card is cutting trailing zeros.

Hi,

I currently updated my Home assistant from 2.6 → 2.10 and since then my Cards didn´t work anymore.

Normally when I click the light bulb there is a detaile window with the single lights in it that opens. But now if I press it, it just opens sensor stats.

The Card:
image

The Code:

type: custom:vertical-stack-in-card
horizontal: true
card_mod:
  style: |
    ha-card {
      padding: 15px;
    }
cards:
  - type: custom:mushroom-template-card
    primary: Schlafzimmer
    secondary: |-
      {{state_attr('climate.','current_temperature') }} °C
      {{states('sensor.schlafzimmer_heizung_humidity') | round(0) }}%
    icon: mdi:bed-double-outline
    multiline_secondary: true
    badge_color: blue
    fill_container: true
    layout: horizontal
  - type: vertical-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.total_active_lights_schlafzimmer
            icon: mdi:lightbulb
            card_mod:
              style: |
                ha-card {
                  {% if states('sensor.total_active_lights_schlafzimmer') < '0.0' %}
                    --card-mod-icon-color: grey;
                  {% elif states('sensor.total_active_lights_schlafzimmer') > '0.9' %}
                    --card-mod-icon-color: orange;
                  {% endif %}
                }
          - type: entity
            entity: cover.schlafzimmer_jalousie
            content: sensor.schlafzimmer_jalousie_status
            icon: mdi:window-shutter
            card_mod:
              style: |
                ha-card {
                  {%- if is_state('sensor.schlafzimmer_jalousie_status','Schließt') or is_state('sensor.schlafzimmer_jalousie_status','Öffnet') -%}
                    --card-mod-icon: mdi:window-shutter-open;
                    --card-mod-icon-color: grey;
                  {% elif is_state('sensor.schlafzimmer_jalousie_status','Offen') -%}
                    --card-mod-icon: mdi:window-shutter-open;
                    --card-mod-icon-color: orange;
                  {% elif is_state('sensor.schlafzimmer_jalousie_status','Geschlossen') -%}
                    --card-mod-icon: mdi:window-shutter;
                    --card-mod-icon-color: #012b6e;
                  {% elif states('sensor.schlafzimmer_jalousie_status').replace(' %','')|float > 1 -%}
                    --card-mod-icon: mdi:window-shutter-open;
                    --card-mod-icon-color: #b38b50;
                  {% endif %}
                }
          - type: template
            entity: climate.schlafzimmer_heizung
            content: >-
              {{ state_attr('climate.schlafzimmer_heizung','target_temp_low') }}
              °C
            icon: mdi:thermometer
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card {
                  {%- if state_attr('climate.schlafzimmer_heizung','hvac_action') == 'idle' or (state_attr('climate.schlafzimmer_heizung','target_temp_low') < state_attr('climate.schlafzimmer_heizung','current_temperature')) -%}
                    --card-mod-icon: mdi:thermometer-off;
                    --card-mod-icon-color: #144380;
                  {% elif state_attr('climate.schlafzimmer_heizung','hvac_action') == 'heating' and (state_attr('climate.schlafzimmer_heizung','target_temp_low') > state_attr('climate.schlafzimmer_heizung','current_temperature')) -%}
                    --card-mod-icon: mdi:thermometer-chevron-up;
                    --card-mod-icon-color: #b30505;
                  {% endif %}
                }
        card_mod:
          style: |
            ha-card {
              right:10%;
            }

The Code:

type: custom:popup-card
entity: sensor.total_active_lights_wohnzimmer
title: Licht Wohnzimmer
dismissable: true
size: normal
card:
  type: horizontal-stack
  cards:
    - type: vertical-stack
      cards:
        - type: custom:mushroom-light-card
          name: Stehlampe Fenster
          icon: mdi:floor-lamp-dual
          use_light_color: true
          show_brightness_control: true
          show_color_temp_control: true
          show_color_control: true
          collapsible_controls: false
          hold_action:
            action: more-info
          double_tap_action:
            action: more-info
          entity: light.wohnzimmer_stehlampe_fenster
        - type: custom:mushroom-light-card
          name: Stehlampe Sofa
          icon: mdi:floor-lamp-dual
          use_light_color: true
          show_brightness_control: true
          show_color_temp_control: true
          show_color_control: true
          collapsible_controls: false
          hold_action:
            action: more-info
          double_tap_action:
            action: more-info
          entity: light.wohnzimmer_stehlampe_sofa
        - type: custom:mushroom-light-card
          name: Ambiente Licht
          icon: hue:play-bar-two
          use_light_color: true
          show_brightness_control: true
          show_color_temp_control: true
          show_color_control: true
          collapsible_controls: false
          hold_action:
            action: more-info
          double_tap_action:
            action: more-info
          entity: light.wohnzimmer_ambiente_licht
        - type: custom:mushroom-light-card
          name: Esstisch
          icon: mdi:chandelier
          use_light_color: true
          show_brightness_control: true
          show_color_temp_control: true
          show_color_control: true
          collapsible_controls: false
          hold_action:
            action: more-info
          double_tap_action:
            action: more-info
          entity: light.wohnzimmer_esstisch_deckenlampe
        - type: custom:mushroom-light-card
          name: Marokkanisches Licht
          icon: mdi:lamp
          use_light_color: true
          show_brightness_control: true
          show_color_temp_control: true
          show_color_control: true
          collapsible_controls: false
          hold_action:
            action: more-info
          double_tap_action:
            action: more-info
          entity: light.wohnzimmer_marokkanische_lampen

I cant figure out why HA is not able to open the Detailed Window like it did before…
Can anyone help?

Quick question regarding card-mod in themes…

I’m building a dashboard with Mushroom Cards and I’d like to have 2 different fonts for the primary & secondary info. Right now I can achieve this by adding the following to each mushroom card manually:

  style:
    mushroom-state-info$: |
      span.primary {
        font-family: Inter-Bold;
      }
      span.secondary {
        font-family: Inter-Light;
      }

I’d like to be able to apply this through a theme so it kicks in on all Mushroom cards. How can I achieve this?

Thanks in advance.