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

Thanks. I’d already made my own while waiting for your reply haha.

Noticed a couple of things which you might want to look at.
The ‘light.yeelight_white’ has a typo (I assume) for the icon. Additionl ‘l’:
llight.yeelight_white

If you change your ‘if’ statement to the following, you won’t need to keep referencing the entity:
{% if is_state(entity, 'on') %}

Example:

      - type: template
        entity: light.living_room_lamp
        icon: mdi:floor-lamp-torchiere
        icon_color: |-
          {% if is_state(entity, 'on') %}
            orange
          {% else %}
            grey
          {% endif %}
        content_info: none
        tap_action:
          action: toggle
2 Likes

thanks!! yes I know I;m doing certain things the longer way, still learning :slight_smile:

thank you for the tips

!

Hey guys.
Im trying to add a second card to my Swipe card but as soon as I add it the complete Card just disappears. Can you help me?
brave_ehNgqMDgIY

My Code (copied from reddit and edited to include a swipe card. Thx for that :slight_smile: )

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: auto
  grid-template-rows: auto
  column-gap: 0px
  row-gap: 0px
  grid-templateareas: |
    "1"
    "2"
cards:
  - type: custom:swipe-card
    parameters:
      scrollbar:
        hide: false
    cards:
      - type: sensor
        entity: sensor.balkon_temp_t
      - type: sensor
        entity: sensor.balkon_temp_t
    grid_area: 1
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-chips-card
        fill_container: true
        chips:
          - type: entity
            entity: sensor.balkon_temp_t
            icon: none
            card_mod:
              style: |
                ha-card {
                  --chip-margin-top: 0px;
                  --chip-border-radius: 0px;
                  --chip-font-size: 0.4em;
                  --chip-padding: 0 0.3em;
                  --chip-spacing: 0px;
                  --chip-icon-size: 0.6em;
                  --chip-box-shadow: none;
                  --chip-background: none
                  --chip-text-color:#F1F1F2;
                :host([dark-mode]) {
                      --text-color: #F1F1F2;
                }
            alignment: start
          - type: entity
            entity: light.wohnzimmer
            icon: none
            card_mod:
              style: |
                ha-card {
                  --chip-margin-top: 0px;
                  --chip-border-radius: 0px;
                  --chip-font-size: 0.4em;
                  --chip-padding: 0 0.3em;
                  --chip-spacing: 0px;
                  --chip-icon-size: 0.6em;
                  --chip-box-shadow: none;
                  --chip-background: none
                  --chip-text-color:#F1F1F2;
                :host([dark-mode]) {
                      --text-color: #F1F1F2;
                      }
            alignment: end
    view_layout:
      grid-column: 1
      grid-row: 2
    card_mod:
      style: |
        ha-card {
          color: ;
          border-radius: 0px 0px 15px 15px;
          height: 35px;
          margin-top: -13px;
          outline-color: red;
          --chip-spacing: 0px;
          --ha-card-background: #A57C65;
        }

2 Likes

Ok never mind, I found the solution.
I am using lovelace-collapsable-cards to hide Groups of custom:mushroom-cover-card

        - type: custom:collapsable-cards
          title: Group control
          cards:
            - type: entities
              entities:
                - type: custom:mushroom-cover-card
                  name: Group control
                  entity: cover.sonoff_1xxxx
                  show_position_control: true
                  show_buttons_control: true
                - type: custom:mushroom-cover-card
                  name: Left
                  entity: cover.sonoff_1xxxx
                  show_position_control: true
                  show_buttons_control: true
                - type: custom:mushroom-cover-card
                  name: Right
                  entity: cover.sonoff_1xxxx
                  show_position_control: true
                  show_buttons_control: true
              show_header_toggle: false

Hi, I would like to put a gradient outline around the template card icon, I have tried with the following code but it is not what I wanted, is it possible to do it?

immagine

type: custom:mushroom-template-card
primary: ''
secondary: |-
  {% if is_state('alarm_control_panel.allarme', 'armed_away')%}
                    Attivo
                  {% else %}
                    Fuori casa
                  {% endif %}
icon: |
  {% if is_state('alarm_control_panel.allarme', 'armed_away')%}
  mdi:shield-home
  {% elif is_state('alarm_control_panel.allarme', 'disarmed')%}
  mdi:shield-home-outline
  {% endif %}
entity: alarm_control_panel.allarme
layout: vertical
picture: ''
icon_color: |-
  {% if is_state('alarm_control_panel.allarme', 'armed_away')%}
  green
  {% elif is_state('alarm_control_panel.allarme', 'disarmed')%}
  white
  {% endif %}
badge_color: ''
badge_icon: ''
card_mod:
  style: |
    ha-card {
     background: none;
     --ha-card-box-shadow: 0px;
     --ha-card-box-shadow: {{ "0px 0px 20px red" if is_state('binary_sensor.lumi_lumi_sensor_magnet_c2049c03_on_off', 'on') }}; 
        }

Has anyone got a nice format for setting their heating duration using input_select? This is as far as I’ve gotten but it looks crap. I’d prefer the boost button to be longer and the time buttons to be as narrow as possible.

columns: 5
type: grid
cards:
  - type: custom:mushroom-entity-card
    entity: switch.test_boost_living_room
    tap_action:
      action: toggle
    icon_type: none
    name: Boost
    layout: vertical
  - type: custom:mushroom-entity-card
    entity: input_select.time_select
    tap_action:
      action: call-service
      service: input_select.select_option
      data:
        option: '00:20:00'
      target:
        entity_id:
          - input_select.time_select
    icon_type: none
    name: '15'
    secondary_info: none
    fill_container: true
  - type: custom:mushroom-entity-card
    entity: input_select.time_select
    tap_action:
      action: call-service
      service: input_select.select_option
      data:
        option: '00:35:00'
      target:
        entity_id:
          - input_select.time_select
    icon_type: none
    name: '30'
    fill_container: true
    secondary_info: none
  - type: custom:mushroom-entity-card
    entity: input_select.time_select
    tap_action:
      action: call-service
      service: input_select.select_option
      data:
        option: '00:50:00'
      target:
        entity_id:
          - input_select.time_select
    icon_type: none
    name: '45'
    secondary_info: none
    fill_container: true
  - type: custom:mushroom-entity-card
    entity: input_select.time_select
    tap_action:
      action: call-service
      service: input_select.select_option
      data:
        option: '01:05:00'
      target:
        entity_id:
          - input_select.time_select
    icon_type: none
    secondary_info: none
    fill_container: true
    name: '60'

Anybody any idea how to use the animation on the icon instead of the background?
Thanks


          - type: custom:mushroom-template-card
            primary: test
            secondary: >-
              {% set state=states(entity) %} {% if state=='off' %}Safe{% elif
              state=='on' %} Trip {% else %} Fault {% endif %}
            entity: switch.bar_projector_socket_1
            layout: vertical
            tap_action:
              action: more-info
            hold_action:
              action: more-info
            double_tap_action:
              action: more-info
            card:
              box-shadow: 0 0 0.65rem 0.1rem red
            icon: |-
              {% set state=states(entity) %}
              {% if state=='off' %}
              mdi:motion-sensor-off
              {% elif state=='on' %}
              mdi:motion-sensor
              {% else %}
              mdi:screwdriver
              {% endif %}
            icon_color: |-
              {% set state=states(entity) %}
              {% if state=='off' %}
              green
              {% elif state=='on' %}
              red
              {% else %}
              yellow
              {% endif %}
            style: |
              ha-card {
                {% if states('switch.bar_projector_socket_1') == 'on' %}
                animation: blink 1.5s linear infinite;
                box-shadow: 0px 0px 50px red;
                }
                @keyframes blink {
                  0% {paper-item-icon-color: yellow;}              
                  50% {background-color: red;}
                  }
                {%- else -%}
                box-shadow: 0px 0px;
                {%- endif %}
            badge_icon: ''
            badge_color: ''
            multiline_secondary: false
            fill_container: false

Hi,

Is it possible to add a border to a picture?

Thanks

I started to use the climte card with homematic thermostats and have some questions.

1.) The card shows a badge icon, but what are the meanings of the differnt badges. The color of the icon reflects the different HVAC modes
image
image

2.) Is ist intended that the first tap switches the thermontat off and the second switches to heat even if i only select auto and off as options.

@piitaya QQ: would it be difficult or run counter to your vision to allow templates in the content: section of template chips? Lots of words there, sorry :slight_smile: Maybe an example:

type: custom:auto-entities
filter:
  include:
    - group: binary_sensor.all_door_sensors
      options: 
          type: template
          entity: this.entity_id
          content: {{ state_attr({entity}, 'friendly_name') }}
          icon: mdi:door
  exclude: []
  
card:
  type: custom:mushroom-chips-card
show_empty: true
card_param: chips

Note this does not work but is an example of a use for templating content. I believe by using auto-entities, I can populate a bunch of chips dynamically and apply a card_mod/style to them for effects such as glowing based on state, etc. But I’d like to be able to see the actual name of the entity. I’ll go look at the code in a bit to see if it’s straightforward, but wanted to check to see whether I was missing something or there’s a better approach.

I’ve also tried to replace content with a few different variations, e.g.
content: {{ state_attr(this.entity_id, 'friendly_name') }}

Few visual examples of what I’d like to accomplish:

obviously with real names :slight_smile: en route to this which is currently done with manual entries for each chip:

Another option would be to use a slider?
image

1 Like

Yeh I guess I could. Doesn’t fit in with the rest of my mushroom cards lol.

Can you use a chips card then put the template card inside it? The template card will allow you to use templates inside.

This is what I do:

   - type: custom:mushroom-chips-card
    alignment: end
    chips:
      - type: template
        entity: light.living_room_lamp
        icon: mdi:floor-lamp-torchiere
        icon_color: |-
          {% if is_state(entity, 'on') %}
            orange
          {% else %}
            grey
          {% endif %}
        content_info: none
        tap_action:
          action: toggle

I think I have settles on this:


It shows the selected time (icon shows 3 o’clock for 15mins, 6 o’clock for 30mins etc) and keeps things simple. Doesn’t look great but it works the way I want. Maybe some styling later.

1 Like

Hi, is it possible to use the current weather icon in the card template?

hey, maybe someone could help me. I found this

cool mobile dashboard on reddit, and since I did not have one, I was thinking of giving it a go.
I have copied all the css that OP had but mine get so boxy, like the css isnt read, does someone know what the problem might be?
this the yaml type: custom:layout-cardlayout_type: custom:grid-layoutlayout: grid-templ - Pastebin.comunknown-4

2 Likes

You should use custom layout card from hacs.

Hi,

Anyone knows how to default the temperature of a thermostat to the floor temperature. The device itself is outside of the room so its not much use right now. The generic thermostat defaults to floor temperature, but not mushroom climate card.

Capture

Hi guys. Do you need to use a style in a popup card generated by browser_mod? My mushroom cards in the popup loose their style if I put them in a popup.

Thanks for your help.

Good morning everyone. As family is still asleep i have some time to tinker.

The climate card is actually my favorite. If i tap on the card my thermostat is switches of and if i tap again the thermostat is set to heating. So far so good, but my Thermostat has no heating mode. it has only an auto mode and a manual mode. So i selected Auto an Off and my expectation was that the card sets one of these two states.

Would someone please enlighten me how this all works togehter.