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

[LiQuid_cOOled]

@distante

{{ states("sensor.esp_ventilation_controller_label_fan_1") }}

You’ll have to use card_mod if using the fan card.

type: custom:mushroom-fan-card
entity: fan.esp_ventilation_controller_fan_1
show_percentage_control: false
fill_container: false
icon_animation: true
card_mod:
  style: 
    mushroom-state-info$: |
      .primary {
        color: transparent !important;
        position: relative;
              }
      .primary:after {
        content: "{{ states('sensor.esp_ventilation_controller_label_fan_1') }}";
        position: absolute;
        left: 0px;
        color: white;
              }

[thorstenniemann.tn]

I keep having connection problems and found a suggestion here in the forum to take a look at the client side. So I opened the developer tools in the Chrome browser and when I opened my dashboard, this error always came up

I then removed a few cards and the error no longer occurs when opening the dashboard, but at some point later. Since there is something about mushroom everywhere, I would say that it affects this extension.
Does anyone know what the cause could be?

[distante]

Thank you! this works, I just need to figure out how to make it follow the current theme main color so I works thru different users.

[LiQuid_cOOled]

Try color: var(--primary-text-color);

[distante]

@LiQuid_cOOled

var(–primary-text-color)

Thanks a lot!

[LiQuid_cOOled]

No problem, happy to assist!!

[varzaman]

My bad. Call to Action, anything that is actionable. So buttons I can press etc.

[lilp69 (lilp)]

Hi, I’m using mushroom card for my mobile dashboard.
But I’ve an issue on mobile.

The card not displaying full information like on laptop.

The code :

type: vertical-stack
cards:
  - type: custom:expander-card
    gap: 1em
    padding: 0em
    clear: false
    expanded: false
    title: Exterior
    overlay-margin: 1em
    child-padding: 0.5em
    button-background: transparent
    title-card-button-overlay: true
    title-card:
      type: vertical-stack
      cards:
        - type: custom:mushroom-template-card
          primary: Radiateur
          entity: climate.radiateur_salon
          icon: mdi:radiator
          icon_color: |
            {% if is_state(entity, 'on') %}
              orange
            {% else %}  
              white
            {% endif %}
          layout: horizontal
          secondary: null
          tap_action:
            action: more-info
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:tabbed-card
            options: {}
            tabs:
              - card:
                  type: custom:versatile-thermostat-ui-card
                  entity: climate.radiateur_salon
                  disable_name: false
                  disable_window: false
                  disable_overpowering: false
                  disable_heat: false
                  disable_heat_cool: true
                  disable_cool: true
                  disable_auto: false
                  disable_dry: true
                  disable_off: false
                  disable_fan_only: true
                  disable_menu: false
                  disable_security_warning: false
                  set_current_as_main: false
                  disable_buttons: false
                  disable_power_infos: false
                  disable_auto_fan_infos: true
                attributes:
                  label: Thermostat
              - card:
                  type: custom:scheduler-card
                  include:
                    - climate
                  exclude:
                    - Masterbedroom
                  title: Salon
                  tags:
                    - Hiver
                    - Salon
                  exclude_tags: Masterbedroom
                  sort_by:
                    - state
                    - title
                  display_options:
                    primary_info: default
                    secondary_info:
                      - time
                    icon: action
                  show_header_toggle: false
                  time_step: 10
                  discover_existing: true
                attributes:
                  label: Programmes
              - card:
                  type: custom:apexcharts-card
                  update_interval: 60sec
                  header:
                    show: true
                    show_states: true
                    colorize_states: true
                    title: Historique
                  graph_span: 1d
                  yaxis:
                    - id: temperature
                    - id: pourcentage
                      opposite: true
                      min: 0
                      max: 100
                      decimals: 0
                  series:
                    - entity: sensor.temperature_salon_temperature
                      name: Temperature
                      type: area
                      curve: smooth
                      color: "#FFB53C"
                      stroke_width: 3
                      group_by:
                        duration: 30 min
                      show:
                        extremas: true
                        legend_value: false
                      yaxis_id: temperature
                    - entity: sensor.home_realfeel_temperature
                      name: Temperature EXT
                      type: line
                      curve: smooth
                      color: "#0E6655"
                      stroke_width: 2
                      group_by:
                        duration: 30 min
                      show:
                        extremas: true
                        legend_value: false
                      yaxis_id: temperature
                    - entity: climate.radiateur_salon
                      attribute: temperature
                      name: Consigne
                      unit: °C
                      stroke_width: 3
                      curve: stepline
                      color: "#2E86C1"
                      yaxis_id: temperature
                      show:
                        extremas: true
                        legend_value: false
                    - entity: climate.radiateur_salon
                      attribute: on_percent
                      name: Puissance
                      unit: "%"
                      transform: return x * 100;
                      opacity: 0.4
                      type: area
                      color: "#FF5733"
                      stroke_width: 1
                      curve: stepline
                      yaxis_id: pourcentage
                      show:
                        legend_value: false
                attributes:
                  label: Statistiques

Thanks for the help.

[LiQuid_cOOled]

Unfortunately, your issue is most likely not Mushroom related

I do see issues with your Mushroom code…

type: custom:mushroom-template-card
primary: Radiateur
entity: climate.radiateur_salon
icon: mdi:radiator
icon_color: |
  {% if is_state(config.entity, 'heat') %}
    orange
  {% else %}  
    white
  {% endif %}
layout: horizontal
tap_action:
  action: more-info

Verify your device state in Developer Tools and use config.entity vs entity

[lilp69 (lilp)]

Same issue with the correction code.

[LiQuid_cOOled]

As I said earlier…

@LiQuid_cOOled

Unfortunately, your issue is most likely not Mushroom related

[codedmind]

Hello trying to fix some cards, based in previous examples… i’m able to fix it, but can’t fix the style… can anyone help?

This is what i’m trying to fix

Icon align is messy

The align inside the box i want is this one

But now i have a big box shadow that is divided … i want all the box have the shadow and rounded corners.

Here is the code

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Divisões
  - type: custom:vertical-stack-in-card
    cards:
      - square: false
        columns: 2
        type: grid
        card_mod:
          style: |
            ha-card {
              border-radius:10px;
            }
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Suite
                secondary: >-
                  🌡️{{ states('sensor.suite_temperature_xiaomi') }}💧{{
                  states('sensor.suite_humidity_xiaomi') }}🔋{{
                  states('sensor.suite_battery_xiaomi') }}
                icon: mdi:bed-king
                tap_action:
                  action: navigate
                  navigation_path: suite
                hold_action:
                  action: toggle
                icon_color: >-
                  {{ 'deep-orange' if is_state('binary_sensor.suite_motion',
                  'on') else 'disabled' }}
                fill_container: false
                layout: horizontal
                multiline_secondary: false
                card_mod:
                  style: |
                    ha-card {
                      {% if is_state('binary_sensor.suite_motion', 'on') %}
                         background: rgba(255, 152, 0, 0.1);
                      {% endif %}
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.suite_motion
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states(entity) %}
                        {% if state=='open'  or state=='on' %}
                        yellow
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: mdi:motion-sensor
                      entity: binary_sensor.suite_motion
                  - type: conditional
                    conditions:
                      - entity: cover.estore_suite
                        state_not: closed
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states('cover.estore_suite') %}
                        {% if state=='open'  or state=='on' %}
                        yellow
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: |-
                        {% set state=states('cover.estore_suite') %} 
                        {% if state=='open' or state=='on' %}
                        mdi:window-shutter-open
                        {% else %}
                        mdi:window-shutter-alert
                        {% endif %}
                      entity: cover.estore_suite
                      tap_action:
                        action: more-info
                      hold_action:
                        action: toggle
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.suite_window
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states('binary_sensor.suite_window') %} 
                        {% if state=='on' %}
                        yellow
                        {% elif state=='off' %}
                        disabled
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: mdi:window-open
                  - type: conditional
                    conditions:
                      - entity: climate.suite_ac
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: disabled
                      entity: climate.suite_ac
                      icon: |-
                        {% if is_state(entity, 'heat_cool') %}
                          mdi:sync 
                        {% elif is_state(entity, 'heat') %}
                          mdi:fire
                        {% elif is_state(entity, 'cool') %}
                          mdi:snowflake
                        {% elif is_state(entity, 'dry') %}
                          mdi:water-percent
                        {% elif is_state(entity, 'fan_only') %}
                          mdi:fan
                        {% else %}
                          mdi:air-conditioner
                        {% endif %}  
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      --chip-box-shadow: none;
                      --chip-background: none;
                      margin-top:-10px
                    }
            card_mod:
              style: |
                ha-card {
                  height: 85px;
                  /*box-shadow:var(--ha-card-border-width,1px) !important;
                  border-radius:var(--ha-card-border-radius,12px) !important;
                  border-width:var(--ha-card-border-width,1px) !important;
                  border-style:solid !important;
                  border-color:var(--ha-card-border-color,var(--divider-color,#e0e0e0)) !important;*/
                }
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Suite
                secondary: >-
                  🌡️{{ states('sensor.suite_temperature_xiaomi') }}💧{{
                  states('sensor.suite_humidity_xiaomi') }}🔋{{
                  states('sensor.suite_battery_xiaomi') }}
                icon: mdi:bed-king
                tap_action:
                  action: navigate
                  navigation_path: suite
                hold_action:
                  action: toggle
                icon_color: >-
                  {{ 'deep-orange' if is_state('binary_sensor.suite_motion',
                  'on') else 'disabled' }}
                fill_container: false
                layout: horizontal
                multiline_secondary: false
                card_mod:
                  style: |
                    ha-card {
                      {% if is_state('binary_sensor.suite_motion', 'on') %}
                         background: rgba(255, 152, 0, 0.1);
                      {% endif %}
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.suite_motion
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states(entity) %}
                        {% if state=='open'  or state=='on' %}
                        yellow
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: mdi:motion-sensor
                      entity: binary_sensor.suite_motion
                  - type: conditional
                    conditions:
                      - entity: cover.estore_suite
                        state_not: closed
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states('cover.estore_suite') %}
                        {% if state=='open'  or state=='on' %}
                        yellow
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: |-
                        {% set state=states('cover.estore_suite') %} 
                        {% if state=='open' or state=='on' %}
                        mdi:window-shutter-open
                        {% else %}
                        mdi:window-shutter-alert
                        {% endif %}
                      entity: cover.estore_suite
                      tap_action:
                        action: more-info
                      hold_action:
                        action: toggle
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.suite_window
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states('binary_sensor.suite_window') %} 
                        {% if state=='on' %}
                        yellow
                        {% elif state=='off' %}
                        disabled
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: mdi:window-open
                  - type: conditional
                    conditions:
                      - entity: climate.suite_ac
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: disabled
                      entity: climate.suite_ac
                      icon: |-
                        {% if is_state(entity, 'heat_cool') %}
                          mdi:sync 
                        {% elif is_state(entity, 'heat') %}
                          mdi:fire
                        {% elif is_state(entity, 'cool') %}
                          mdi:snowflake
                        {% elif is_state(entity, 'dry') %}
                          mdi:water-percent
                        {% elif is_state(entity, 'fan_only') %}
                          mdi:fan
                        {% else %}
                          mdi:air-conditioner
                        {% endif %}  
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      --chip-box-shadow: none;
                      --chip-background: none;
                      margin-top:-10px
                    }
            card_mod:
              style: |
                ha-card {
                  height: 85px;
                }
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Suite
                secondary: >-
                  🌡️{{ states('sensor.suite_temperature_xiaomi') }}💧{{
                  states('sensor.suite_humidity_xiaomi') }}🔋{{
                  states('sensor.suite_battery_xiaomi') }}
                icon: mdi:bed-king
                tap_action:
                  action: navigate
                  navigation_path: suite
                hold_action:
                  action: toggle
                icon_color: >-
                  {{ 'deep-orange' if is_state('binary_sensor.suite_motion',
                  'on') else 'disabled' }}
                fill_container: false
                layout: horizontal
                multiline_secondary: false
                card_mod:
                  style: |
                    ha-card {
                      {% if is_state('binary_sensor.suite_motion', 'on') %}
                         background: rgba(255, 152, 0, 0.1);
                      {% endif %}
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.suite_motion
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states(entity) %}
                        {% if state=='open'  or state=='on' %}
                        yellow
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: mdi:motion-sensor
                      entity: binary_sensor.suite_motion
                  - type: conditional
                    conditions:
                      - entity: cover.estore_suite
                        state_not: closed
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states('cover.estore_suite') %}
                        {% if state=='open'  or state=='on' %}
                        yellow
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: |-
                        {% set state=states('cover.estore_suite') %} 
                        {% if state=='open' or state=='on' %}
                        mdi:window-shutter-open
                        {% else %}
                        mdi:window-shutter-alert
                        {% endif %}
                      entity: cover.estore_suite
                      tap_action:
                        action: more-info
                      hold_action:
                        action: toggle
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.suite_window
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states('binary_sensor.suite_window') %} 
                        {% if state=='on' %}
                        yellow
                        {% elif state=='off' %}
                        disabled
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: mdi:window-open
                  - type: conditional
                    conditions:
                      - entity: climate.suite_ac
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: disabled
                      entity: climate.suite_ac
                      icon: |-
                        {% if is_state(entity, 'heat_cool') %}
                          mdi:sync 
                        {% elif is_state(entity, 'heat') %}
                          mdi:fire
                        {% elif is_state(entity, 'cool') %}
                          mdi:snowflake
                        {% elif is_state(entity, 'dry') %}
                          mdi:water-percent
                        {% elif is_state(entity, 'fan_only') %}
                          mdi:fan
                        {% else %}
                          mdi:air-conditioner
                        {% endif %}  
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      --chip-box-shadow: none;
                      --chip-background: none;
                      margin-top:-10px
                    }
            card_mod:
              style: |
                ha-card {
                  height: 85px;
                }
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Suite
                secondary: >-
                  🌡️{{ states('sensor.suite_temperature_xiaomi') }}💧{{
                  states('sensor.suite_humidity_xiaomi') }}🔋{{
                  states('sensor.suite_battery_xiaomi') }}
                icon: mdi:bed-king
                tap_action:
                  action: navigate
                  navigation_path: suite
                hold_action:
                  action: toggle
                icon_color: >-
                  {{ 'deep-orange' if is_state('binary_sensor.suite_motion',
                  'on') else 'disabled' }}
                fill_container: false
                layout: horizontal
                multiline_secondary: false
                card_mod:
                  style: |
                    ha-card {
                      {% if is_state('binary_sensor.suite_motion', 'on') %}
                         background: rgba(255, 152, 0, 0.1);
                      {% endif %}
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.suite_motion
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states(entity) %}
                        {% if state=='open'  or state=='on' %}
                        yellow
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: mdi:motion-sensor
                      entity: binary_sensor.suite_motion
                  - type: conditional
                    conditions:
                      - entity: cover.estore_suite
                        state_not: closed
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states('cover.estore_suite') %}
                        {% if state=='open'  or state=='on' %}
                        yellow
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: |-
                        {% set state=states('cover.estore_suite') %} 
                        {% if state=='open' or state=='on' %}
                        mdi:window-shutter-open
                        {% else %}
                        mdi:window-shutter-alert
                        {% endif %}
                      entity: cover.estore_suite
                      tap_action:
                        action: more-info
                      hold_action:
                        action: toggle
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.suite_window
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states('binary_sensor.suite_window') %} 
                        {% if state=='on' %}
                        yellow
                        {% elif state=='off' %}
                        disabled
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: mdi:window-open
                  - type: conditional
                    conditions:
                      - entity: climate.suite_ac
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: disabled
                      entity: climate.suite_ac
                      icon: |-
                        {% if is_state(entity, 'heat_cool') %}
                          mdi:sync 
                        {% elif is_state(entity, 'heat') %}
                          mdi:fire
                        {% elif is_state(entity, 'cool') %}
                          mdi:snowflake
                        {% elif is_state(entity, 'dry') %}
                          mdi:water-percent
                        {% elif is_state(entity, 'fan_only') %}
                          mdi:fan
                        {% else %}
                          mdi:air-conditioner
                        {% endif %}  
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      --chip-box-shadow: none;
                      --chip-background: none;
                      margin-top:-10px
                    }
            card_mod:
              style: |
                ha-card {
                  height: 85px;
                }
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Suite
                secondary: >-
                  🌡️{{ states('sensor.suite_temperature_xiaomi') }}💧{{
                  states('sensor.suite_humidity_xiaomi') }}🔋{{
                  states('sensor.suite_battery_xiaomi') }}
                icon: mdi:bed-king
                tap_action:
                  action: navigate
                  navigation_path: suite
                hold_action:
                  action: toggle
                icon_color: >-
                  {{ 'deep-orange' if is_state('binary_sensor.suite_motion',
                  'on') else 'disabled' }}
                fill_container: false
                layout: horizontal
                multiline_secondary: false
                card_mod:
                  style: |
                    ha-card {
                      {% if is_state('binary_sensor.suite_motion', 'on') %}
                         background: rgba(255, 152, 0, 0.1);
                      {% endif %}
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.suite_motion
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states(entity) %}
                        {% if state=='open'  or state=='on' %}
                        yellow
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: mdi:motion-sensor
                      entity: binary_sensor.suite_motion
                  - type: conditional
                    conditions:
                      - entity: cover.estore_suite
                        state_not: closed
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states('cover.estore_suite') %}
                        {% if state=='open'  or state=='on' %}
                        yellow
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: |-
                        {% set state=states('cover.estore_suite') %} 
                        {% if state=='open' or state=='on' %}
                        mdi:window-shutter-open
                        {% else %}
                        mdi:window-shutter-alert
                        {% endif %}
                      entity: cover.estore_suite
                      tap_action:
                        action: more-info
                      hold_action:
                        action: toggle
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.suite_window
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states('binary_sensor.suite_window') %} 
                        {% if state=='on' %}
                        yellow
                        {% elif state=='off' %}
                        disabled
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: mdi:window-open
                  - type: conditional
                    conditions:
                      - entity: climate.suite_ac
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: disabled
                      entity: climate.suite_ac
                      icon: |-
                        {% if is_state(entity, 'heat_cool') %}
                          mdi:sync 
                        {% elif is_state(entity, 'heat') %}
                          mdi:fire
                        {% elif is_state(entity, 'cool') %}
                          mdi:snowflake
                        {% elif is_state(entity, 'dry') %}
                          mdi:water-percent
                        {% elif is_state(entity, 'fan_only') %}
                          mdi:fan
                        {% else %}
                          mdi:air-conditioner
                        {% endif %}  
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      --chip-box-shadow: none;
                      --chip-background: none;
                      margin-top:-10px
                    }
            card_mod:
              style: |
                ha-card {
                  height: 85px;
                }
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Suite
                secondary: >-
                  🌡️{{ states('sensor.suite_temperature_xiaomi') }}💧{{
                  states('sensor.suite_humidity_xiaomi') }}🔋{{
                  states('sensor.suite_battery_xiaomi') }}
                icon: mdi:bed-king
                tap_action:
                  action: navigate
                  navigation_path: suite
                hold_action:
                  action: toggle
                icon_color: >-
                  {{ 'deep-orange' if is_state('binary_sensor.suite_motion',
                  'on') else 'disabled' }}
                fill_container: false
                layout: horizontal
                multiline_secondary: false
                card_mod:
                  style: |
                    ha-card {
                      {% if is_state('binary_sensor.suite_motion', 'on') %}
                         background: rgba(255, 152, 0, 0.1);
                      {% endif %}
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.suite_motion
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states(entity) %}
                        {% if state=='open'  or state=='on' %}
                        yellow
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: mdi:motion-sensor
                      entity: binary_sensor.suite_motion
                  - type: conditional
                    conditions:
                      - entity: cover.estore_suite
                        state_not: closed
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states('cover.estore_suite') %}
                        {% if state=='open'  or state=='on' %}
                        yellow
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: |-
                        {% set state=states('cover.estore_suite') %} 
                        {% if state=='open' or state=='on' %}
                        mdi:window-shutter-open
                        {% else %}
                        mdi:window-shutter-alert
                        {% endif %}
                      entity: cover.estore_suite
                      tap_action:
                        action: more-info
                      hold_action:
                        action: toggle
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.suite_window
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: |-
                        {% set state=states('binary_sensor.suite_window') %} 
                        {% if state=='on' %}
                        yellow
                        {% elif state=='off' %}
                        disabled
                        {% elif state=='unavailable' %}
                        red
                        {% endif %}
                      icon: mdi:window-open
                  - type: conditional
                    conditions:
                      - entity: climate.suite_ac
                        state_not: "off"
                    chip:
                      type: template
                      icon_color: disabled
                      entity: climate.suite_ac
                      icon: |-
                        {% if is_state(entity, 'heat_cool') %}
                          mdi:sync 
                        {% elif is_state(entity, 'heat') %}
                          mdi:fire
                        {% elif is_state(entity, 'cool') %}
                          mdi:snowflake
                        {% elif is_state(entity, 'dry') %}
                          mdi:water-percent
                        {% elif is_state(entity, 'fan_only') %}
                          mdi:fan
                        {% else %}
                          mdi:air-conditioner
                        {% endif %}  
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      --chip-box-shadow: none;
                      --chip-background: none;
                      margin-top:-10px
                    }
            card_mod:
              style: |
                ha-card {
                  height: 85px;
                }
    card_mod:
      style: |
        ha-card {
          border:none;
          background:none;
          /*box-shadow:none;*/
        }

[psjnr84]

Hi All,

Can anyone potentially offer some advice for a query I have?

On the image below, is there any way to align the text on the right mushroom entity card to be the same as the mushroom light card, on the vertical column, so the text / icons on both cards are in the same spot (but on the right there would be white space at the bottom of the card)?

From this…

To this…

type: horizontal-stack
cards:
  - type: custom:mushroom-light-card
    entity: light.hue_bulb_dining_room
    name: Corner Lamp
    icon: mdi:lamp
    layout: vertical
    primary_info: name
    secondary_info: none
    use_light_color: true
    show_brightness_control: true
    hold_action:
      action: more-info
    double_tap_action:
      action: none
    collapsible_controls: false
    fill_container: true
    icon_type: icon
    tap_action:
      action: toggle
    card_mod:
      style:
        mushroom-state-info$: |
          .container {
           --card-primary-font-size: 20px !important;
           --card-secondary-font-size: 16px !important;
          }
        .: |
          ha-card {
           --card-primary-line-height: 25px !important;
           --card-secondary-line-height: 20px !important;
          }
  - type: custom:mushroom-entity-card
    entity: switch.hue_plug_dining_room
    name: Display Unit
    icon: mdi:power-plug
    hold_action:
      action: more-info
    double_tap_action:
      action: none
    icon_color: primary
    primary_info: name
    fill_container: true
    tap_action:
      action: toggle
    layout: vertical
    secondary_info: none
    card_mod:
      style:
        mushroom-state-info$: |
          .container {
           --card-primary-font-size: 20px !important;
           --card-secondary-font-size: 16px !important;
          }
        .: |
          ha-card {
           --card-primary-line-height: 25px !important;
           --card-secondary-line-height: 20px !important;
          }

[LiQuid_cOOled]

Please post your card code to expedite a solution.

[psjnr84]

Have updated my post to include the current code which reflects the first image. I’m hopeful, additional code via card_mod may be able to give me the results I’m hoping for in the second image.

[LiQuid_cOOled]

I simplified the code a bit…

type: horizontal-stack
cards:
  - type: custom:mushroom-light-card
    entity: light.hue_bulb_dining_room
    name: Corner Lamp
    icon: mdi:lamp
    layout: vertical
    primary_info: name
    secondary_info: none
    use_light_color: true
    show_brightness_control: true
    hold_action:
      action: more-info
    double_tap_action:
      action: none
    collapsible_controls: false
    fill_container: true
    icon_type: icon
    tap_action:
      action: toggle
    card_mod:
      style: |
        ha-card {
         --card-primary-line-height: 25px !important;
         --card-secondary-line-height: 20px !important;
         --card-primary-font-size: 20px !important;
         --card-secondary-font-size: 16px !important;
          }
  - type: custom:mushroom-entity-card
    entity: switch.hue_plug_dining_room
    name: Display Unit
    icon: mdi:power-plug
    hold_action:
      action: more-info
    double_tap_action:
      action: none
    icon_color: primary
    primary_info: name
    fill_container: true
    tap_action:
      action: toggle
    layout: vertical
    secondary_info: none
    card_mod:
      style: |
          ha-card {
           --card-primary-line-height: 25px !important;
           --card-secondary-line-height: 20px !important;
           --card-primary-font-size: 20px !important;
           --card-secondary-font-size: 16px !important;
           padding-bottom: 50px
          }

[LiQuid_cOOled]

@codedmind

sensor.suite_temperature_xiaomi

I didn’t go through all your code because it’s a lot. Try something like this with the Layout-Card and Stack-in-Card

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 1fr 1fr
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card { border: none;
             }
        primary: Suite
        secondary: >-
          🌡️{{ states('sensor.suite_temperature_xiaomi') }}💧{{
          states('sensor.suite_humidity_xiaomi') }}🔋{{
          states('sensor.suite_battery_xiaomi') }}
        icon: mdi:bed-king
        tap_action:
          action: navigate
          navigation_path: suite
        hold_action:
          action: toggle
        icon_color: >-
          {{ 'deep-orange' if is_state('binary_sensor.suite_motion', 'on') else
          'disabled' }}
        fill_container: false
        layout: horizontal
        multiline_secondary: false
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: binary_sensor.suite_motion
                state_not: "off"
            chip:
              type: template
              icon_color: |-
                {% set state=states(entity) %}
                {% if state=='open'  or state=='on' %}
                yellow
                {% elif state=='unavailable' %}
                red
                {% endif %}
              icon: mdi:motion-sensor
              entity: binary_sensor.suite_motion
          - type: conditional
            conditions:
              - entity: cover.estore_suite
                state_not: closed
            chip:
              type: template
              icon_color: |-
                {% set state=states('cover.estore_suite') %}
                {% if state=='open'  or state=='on' %}
                yellow
                {% elif state=='unavailable' %}
                red
                {% endif %}
              icon: |-
                {% set state=states('cover.estore_suite') %} 
                {% if state=='open' or state=='on' %}
                mdi:window-shutter-open
                {% else %}
                mdi:window-shutter-alert
                {% endif %}
              entity: cover.estore_suite
              tap_action:
                action: more-info
              hold_action:
                action: toggle
          - type: conditional
            conditions:
              - entity: binary_sensor.suite_window
                state_not: "off"
            chip:
              type: template
              icon_color: |-
                {% set state=states('cover.estore_suite') %} 
                {% if state=='on' %}
                yellow
                {% elif state=='off' %}
                disabled
                {% elif state=='unavailable' %}
                red
                {% endif %}
              icon: mdi:window-open
          - type: conditional
            conditions:
              - entity: climate.suite_ac
                state_not: "off"
            chip:
              type: template
              icon_color: disabled
              entity: climate.suite_ac
              icon: |-
                {% if is_state(entity, 'heat_cool') %}
                  mdi:sync 
                {% elif is_state(entity, 'heat') %}
                  mdi:fire
                {% elif is_state(entity, 'cool') %}
                  mdi:snowflake
                {% elif is_state(entity, 'dry') %}
                  mdi:water-percent
                {% elif is_state(entity, 'fan_only') %}
                  mdi:fan
                {% else %}
                  mdi:air-conditioner
                {% endif %}  
        alignment: end
    card_mod:
      style: |
        ha-card { border: none;
         }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card { border: none;
             }
        primary: Suite
        secondary: >-
          🌡️{{ states('sensor.suite_temperature_xiaomi') }}💧{{
          states('sensor.suite_humidity_xiaomi') }}🔋{{
          states('sensor.suite_battery_xiaomi') }}
        icon: mdi:bed-king
        tap_action:
          action: navigate
          navigation_path: suite
        hold_action:
          action: toggle
        icon_color: >-
          {{ 'deep-orange' if is_state('binary_sensor.suite_motion', 'on') else
          'disabled' }}
        fill_container: false
        layout: horizontal
        multiline_secondary: false
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: binary_sensor.suite_motion
                state_not: "off"
            chip:
              type: template
              icon_color: |-
                {% set state=states(entity) %}
                {% if state=='open'  or state=='on' %}
                yellow
                {% elif state=='unavailable' %}
                red
                {% endif %}
              icon: mdi:motion-sensor
              entity: binary_sensor.suite_motion
          - type: conditional
            conditions:
              - entity: cover.estore_suite
                state_not: closed
            chip:
              type: template
              icon_color: |-
                {% set state=states('cover.estore_suite') %}
                {% if state=='open'  or state=='on' %}
                yellow
                {% elif state=='unavailable' %}
                red
                {% endif %}
              icon: |-
                {% set state=states('cover.estore_suite') %} 
                {% if state=='open' or state=='on' %}
                mdi:window-shutter-open
                {% else %}
                mdi:window-shutter-alert
                {% endif %}
              entity: cover.estore_suite
              tap_action:
                action: more-info
              hold_action:
                action: toggle
          - type: conditional
            conditions:
              - entity: binary_sensor.suite_window
                state_not: "off"
            chip:
              type: template
              icon_color: |-
                {% set state=states('cover.estore_suite') %} 
                {% if state=='on' %}
                yellow
                {% elif state=='off' %}
                disabled
                {% elif state=='unavailable' %}
                red
                {% endif %}
              icon: mdi:window-open
          - type: conditional
            conditions:
              - entity: climate.suite_ac
                state_not: "off"
            chip:
              type: template
              icon_color: disabled
              entity: climate.suite_ac
              icon: |-
                {% if is_state(entity, 'heat_cool') %}
                  mdi:sync 
                {% elif is_state(entity, 'heat') %}
                  mdi:fire
                {% elif is_state(entity, 'cool') %}
                  mdi:snowflake
                {% elif is_state(entity, 'dry') %}
                  mdi:water-percent
                {% elif is_state(entity, 'fan_only') %}
                  mdi:fan
                {% else %}
                  mdi:air-conditioner
                {% endif %}  
        alignment: end
    card_mod:
      style: |
        ha-card { border: none;
         }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card { border: none;
             }
        primary: Suite
        secondary: >-
          🌡️{{ states('sensor.suite_temperature_xiaomi') }}💧{{
          states('sensor.suite_humidity_xiaomi') }}🔋{{
          states('sensor.suite_battery_xiaomi') }}
        icon: mdi:bed-king
        tap_action:
          action: navigate
          navigation_path: suite
        hold_action:
          action: toggle
        icon_color: >-
          {{ 'deep-orange' if is_state('binary_sensor.suite_motion', 'on') else
          'disabled' }}
        fill_container: false
        layout: horizontal
        multiline_secondary: false
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: binary_sensor.suite_motion
                state_not: "off"
            chip:
              type: template
              icon_color: |-
                {% set state=states(entity) %}
                {% if state=='open'  or state=='on' %}
                yellow
                {% elif state=='unavailable' %}
                red
                {% endif %}
              icon: mdi:motion-sensor
              entity: binary_sensor.suite_motion
          - type: conditional
            conditions:
              - entity: cover.estore_suite
                state_not: closed
            chip:
              type: template
              icon_color: |-
                {% set state=states('cover.estore_suite') %}
                {% if state=='open'  or state=='on' %}
                yellow
                {% elif state=='unavailable' %}
                red
                {% endif %}
              icon: |-
                {% set state=states('cover.estore_suite') %} 
                {% if state=='open' or state=='on' %}
                mdi:window-shutter-open
                {% else %}
                mdi:window-shutter-alert
                {% endif %}
              entity: cover.estore_suite
              tap_action:
                action: more-info
              hold_action:
                action: toggle
          - type: conditional
            conditions:
              - entity: binary_sensor.suite_window
                state_not: "off"
            chip:
              type: template
              icon_color: |-
                {% set state=states('cover.estore_suite') %} 
                {% if state=='on' %}
                yellow
                {% elif state=='off' %}
                disabled
                {% elif state=='unavailable' %}
                red
                {% endif %}
              icon: mdi:window-open
          - type: conditional
            conditions:
              - entity: climate.suite_ac
                state_not: "off"
            chip:
              type: template
              icon_color: disabled
              entity: climate.suite_ac
              icon: |-
                {% if is_state(entity, 'heat_cool') %}
                  mdi:sync 
                {% elif is_state(entity, 'heat') %}
                  mdi:fire
                {% elif is_state(entity, 'cool') %}
                  mdi:snowflake
                {% elif is_state(entity, 'dry') %}
                  mdi:water-percent
                {% elif is_state(entity, 'fan_only') %}
                  mdi:fan
                {% else %}
                  mdi:air-conditioner
                {% endif %}  
        alignment: end
    card_mod:
      style: |
        ha-card { border: none;
         }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card { border: none;
             }
        primary: Suite
        secondary: >-
          🌡️{{ states('sensor.suite_temperature_xiaomi') }}💧{{
          states('sensor.suite_humidity_xiaomi') }}🔋{{
          states('sensor.suite_battery_xiaomi') }}
        icon: mdi:bed-king
        tap_action:
          action: navigate
          navigation_path: suite
        hold_action:
          action: toggle
        icon_color: >-
          {{ 'deep-orange' if is_state('binary_sensor.suite_motion', 'on') else
          'disabled' }}
        fill_container: false
        layout: horizontal
        multiline_secondary: false
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: binary_sensor.suite_motion
                state_not: "off"
            chip:
              type: template
              icon_color: |-
                {% set state=states(entity) %}
                {% if state=='open'  or state=='on' %}
                yellow
                {% elif state=='unavailable' %}
                red
                {% endif %}
              icon: mdi:motion-sensor
              entity: binary_sensor.suite_motion
          - type: conditional
            conditions:
              - entity: cover.estore_suite
                state_not: closed
            chip:
              type: template
              icon_color: |-
                {% set state=states('cover.estore_suite') %}
                {% if state=='open'  or state=='on' %}
                yellow
                {% elif state=='unavailable' %}
                red
                {% endif %}
              icon: |-
                {% set state=states('cover.estore_suite') %} 
                {% if state=='open' or state=='on' %}
                mdi:window-shutter-open
                {% else %}
                mdi:window-shutter-alert
                {% endif %}
              entity: cover.estore_suite
              tap_action:
                action: more-info
              hold_action:
                action: toggle
          - type: conditional
            conditions:
              - entity: binary_sensor.suite_window
                state_not: "off"
            chip:
              type: template
              icon_color: |-
                {% set state=states('cover.estore_suite') %} 
                {% if state=='on' %}
                yellow
                {% elif state=='off' %}
                disabled
                {% elif state=='unavailable' %}
                red
                {% endif %}
              icon: mdi:window-open
          - type: conditional
            conditions:
              - entity: climate.suite_ac
                state_not: "off"
            chip:
              type: template
              icon_color: disabled
              entity: climate.suite_ac
              icon: |-
                {% if is_state(entity, 'heat_cool') %}
                  mdi:sync 
                {% elif is_state(entity, 'heat') %}
                  mdi:fire
                {% elif is_state(entity, 'cool') %}
                  mdi:snowflake
                {% elif is_state(entity, 'dry') %}
                  mdi:water-percent
                {% elif is_state(entity, 'fan_only') %}
                  mdi:fan
                {% else %}
                  mdi:air-conditioner
                {% endif %}  
        alignment: end
    card_mod:
      style: |
        ha-card { border: none;
         }

[psjnr84]

@LiQuid_cOOled

padding-bottom: 50px

Can’t believe it was that simple. Should have caught that myself, but perhaps was too immersed in it to notice what the right answer was. Cheers for sorting that.

[varzaman]

So just to clarify, there is ZERO interactive styles, and we have to add any using card_mod?

I’m not trying to customize anything. I’m just surprised that there are no interaction styles. I just want to make sure this is intended.

[LiQuid_cOOled]

Yes, from my knowledge. I think that is a good question, but is more suited via the Mushroom Github