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

[Diegocampy]

really interesting, but my skills are so limited that I still don’t understand things and I can’t finish my cards. For the light having to choose between only two icons and two colors all solved. But now for the temperature on the card next to it, I wanted 3 icons and three colors, so I don’t understand how to write it. I tried but I don’t think entering the second option is correct.

I posted all the code because there are actually two problems:

1. just explained that I would like three icons and three colors, but something isn’t working
2. the second thermometer icon next to it does not show me the temperature

Thank you very much if you can give me some help this time too

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: binary_sensor.porta_ingresso_contact
    icon: >-
      {% if is_state('binary_sensor.porta_ingresso_contact', 'off') %}
      mdi:door-closed {%- else -%} mdi:door-open {% endif %}
    icon_color: >-
      {% if is_state('binary_sensor.porta_ingresso_contact', 'off') %} grey {%
      else %} red {% endif %}
    tap_action:
      action: more-info
  - type: template
    entity: sensore_ingresso_device_temperature
    content: '{{stastes.sensore_ingresso_device_temperature.state}} °C'
    icon: >-
      {% if states('sensor.sensore_ingresso_device_temperature') | int <= 17 %}
      mdi:thermometer-minus   {% else %}   mdi:thermometer-check  {% endif %}
    icon_color: |-
      {% if states('sensor.sensore_ingresso_device_temperature') | int <= 17 %}
      blue | int >= 20 %} red {% else %} green {% endif %}
    tap_action:
      action: more-info
  - type: template
    entity: sensore_ingresso_illuminance_lux
    content: '{{states.sensor.sensore_ingresso_illuminance_lux.state}} lux'
    icon: >-
      {% if states('sensor.sensore_ingresso_illuminance_lux') | int >= 20 %}
      mdi:brightness-5   {% else %}   mdi:brightness-4  {% endif %}
    icon_color: |-
      {% if states('sensor.sensore_ingresso_illuminance_lux') | int >= 20 %}
      yellow {% else %} grey {% endif %}
    tap_action:
      action: more-info
    use_entity_picture: true
  - type: template
    entity: binary_sensor.sensore_ingresso_occupancy
    icon: >-
      {% if is_state('binary_sensor.sensore_ingresso_occupancy', 'on') %}
      mdi:motion-sensor {%- else -%} mdi:motion-sensor-off {% endif %}
    icon_color: >-
      {% if is_state('binary_sensor.porta_ingresso_contact', 'on') %} grey {%
      else %} yellow {% endif %}
    tap_action:
      action: more-info

[dimitri.landerloos]

Template outputs (so entity states) are strings until you tell it otherwise.

So use | int, | float, | round(0) whatever you want, that tells jinja that its a number. Otherwise default assumption is that it is a string.

[Lewis_gio (Lewis)]

I have a problem with conditional chips, both with light.tavolo on and off it always shows me the icon. I emptied the cash, uninstalled and installed mushroom but nothing seems to be the conditions are not working

type: vertical-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - condition: state
            entity: light.tavolo
            state: 'on'
        chip:
          type: template
          icon: mdi:car-lifted-pickup
          icon_color: red
          card_mod:
            style: |
              ha-card 
                {
                  --chip-font-size: 0.25em;
                  --chip-height: 45px
                }      

[Diegocampy]

@Diegocampy

I posted all the code because there are actually two problems:

1. just explained that I would like three icons and three colors, but something isn’t working
2. the second thermometer icon next to it does not show me the temperature

I solved a problem 2 myself, and I’m writing it in case it might be useful to someone:
I got the logic wrong write correct “states” and “sensor”
wrong: ‘{{stastes.sensore_ingresso_device_temperature.state}} °C’
correct:‘{{states.sensor.sensore_ingresso_device_temperature.state}} °C’

the first problem remains and I have to figure out how to solve it: How can I set three different colors?

[FedeL16 (Federico)]

thank you it works for me now. I’ve found another solution with local conditional card too, but your its better.

states(‘sensor.temperature’) does not work and now I don’t understand to avoid states.sensor_xxxx.state

[raub21]

I am facing a challenge showing the icon of an entity that depends on its state. When it is closed, it works on a pc but not on the iPhone HA app. It does not work when it is open on both PC and iPhone. Here are the screen shots:

iPhone:

Here is the code:

type: custom:mushroom-entity-card
entity: binary_sensor.garagedoor_sensor_iaszone
tap_action:
  action: more-info
name: Garage
card_mod:
  style: |
    ha-card {
      padding: 0px !important;
      padding-bottom: 3px !important;
      text-align: left !important;
      ha-state-icon {
         {% if is_state(config.entity, 'off') %}
           --card-mod-icon: mdi:garage-lock;
           --card-mod-icon-color: green;
          
         {% else %}
           --card-mod-icon: mdi:garage-open;
           --card-mod-icon-color: red;
        {% endif %};
        }
    border: 0px outset #02CCFF;
    font-style: italic;
    font-variant: small-caps;
    box-shadow: none !important;
    --secondary-text-color: orange;
    }

[cob94440 (chris)]

Hello. Thanks for sharing.
But my picture and localized address are not centered

[chintito4ever]

If I put them in grid then it works fine for me

square: false
type: grid
cards:

[Zenia (Yevgeniy)]

Thank you for sharing your person card, great job. Mine, for some reason not showing for some reason address where I am located right now. Here is a template, which I put in my templates file:

#####Full Address for Person Card#######


    - name: My Address
      unique_id: 692d4852-2d29-4c24-80bc-0d35ecc245ef
      state: >
        {% set full_address = state_attr('sensor.sm_s918u_geocoded_location', 'Name') %}
        {% if full_address %}
          {% set address_parts = full_address.split(' ') %}
          {% set street_address = address_parts[:2] %}
          {{ street_address | join(' ') }}
        {% else %}
          'Unknown'
        {% endif %}

Thank you

[chrs]

Look for ”margin-left:” in the code and change after your needs.

[chrs]

Do you see your adress if you look at the sensor state of ’sensor.sm_s918u_geocoded_location’?

Is it ”your street adress”, ”zip code city”?

[Zenia (Yevgeniy)]

Yes, I can see address on my phone geolocation sensor

[LiQuid_cOOled]

Can you post the exact format you are using?

I use it like this:

secondary: |
            {{ states('automation.living_room_motion') }}

[andreadannibale (Andrea)]

try to change the attribute to “name”… in my case the attributes are lower case

[mr_aleks]

how to combine two entities into one horizontal group?
Now I have it like this

how to do it like this? : (I changed it in paint)

[dimitri.landerloos]

type: custom:stack-in-card
mode: horizontal
cards:
  - type: yourcardhere
  - type: yourothercardhere

[dimitri.landerloos]

correct. attributes are all meant to be lower case. @Zenia if you have an integration that provides an attribute in upper case you should file a bug report on that integration.

[mr_aleks]

there is still a dividing line between them

[Zenia (Yevgeniy)]

Thank you.
I change: ‘Name’ to ‘name’ in

 {% set full_address = state_attr('sensor.sm_s918u_geocoded_location', 'name') %}

, restart HA, but still it’s shows me AWAY (which is correct) and Unknown location (nothing changed). Please help me to make it right and understand how and where I am wrong.
Thank you, everyone

[dimitri.landerloos]

Difference in theme, but you can remove it with card mod for each:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: yourcardhere
    card_mod:
      style: |
        ha-card {
          border: none !important;
        }
  - type: yourothercardhere
    card_mod:
      style: |
        ha-card {
          border: none !important;
        }