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

[davidnestico]

Ok I seem to have found the issue on a test dashboard where it works amazingly. Basically, my dashboard doesn’t go all the way to the bottom so it doesn’t overlay, I now need to try and fix that with more cards I guess lol great…

Test lovelace dashboard

My current dashboard:

[reypm]

Is the chips type limited somehow? I can’t get a template inside a chip to display a name or a badge. See the following code:

      - type: custom:mushroom-chips-card
        alignment: end
        chips:
          # Person
          - type: template
            entity: person.some_person
            multiline_secondary: true
            primary: Some Person
            secondary: Some Person
            icon: mdi:face-man-profile
            icon_color: |-
              {% if is_state('person.some_person', 'home') %}
                green
              {% else %}
                grey
              {% endif %}
            badge_icon: >
              {% if is_state('person.some_person', 'home') %} 
                mdi:home-circle
              {% endif %}
              badge_color: red

and this is all I get from the above snippet:

what I am missing here?

[rhysb (Rhys)]

Your idea works within the layout-card. To sticky the entire layout-card you can do like this:

type: custom:mod-card
card:
  type: custom:layout-card
  layout_type: custom:grid-layout
  layout:
    mediaquery:
      '(max-width: 800px)':
        grid-template-rows: auto
        grid-template-columns: 1fr
        overflow: auto;
        grid-template-areas: |
          "header"
          "main"
          "footer"
  cards:
    - type: custom:mushroom-template-card
      primary: Mushroom
      icon: mdi:mushroom
      icon_color: red
      view_layout:
        grid-area: header
        show:
          mediaquery: '(max-width: 800px)'
    - type: custom:mushroom-template-card
      primary: Mushroom
      icon: mdi:mushroom
      icon_color: red
      view_layout:
        grid-area: main
        show:
          mediaquery: '(max-width: 800px)'
    - type: custom:mushroom-template-card
      primary: Mushroom
      icon: mdi:mushroom
      icon_color: red
      view_layout:
        grid-area: footer
        show:
          mediaquery: '(max-width: 800px)'
card_mod:
  style: |
    :host {
      position: sticky;
      bottom: 12px;
    }

[rhysb (Rhys)]

You seem to be conflating Chips & Cards. Chips don’t have badges and have a single line content: instead of primary: and secondary:. There are some tricks to add a badge to Chips with CSS, have a look at some of my posts.

[rhysb (Rhys)]

What are you trying to do?

[milandzuris (Milan Dzuriš)]

Hi, someone help how make template for calendars, i need a template where the calendar events will change every 10 seconds (5calendars in 1template), and this template i want put in Mushroom Title.

i want connect more calendars in one title (change every 10 seonds)

[rhysb (Rhys)]

This should help:

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: sensor.plex_dc_nashost
        state_not: '0'
    chip:
      type: template
      icon: mdi:plex
      icon_color: orange
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            title: Plex monitor
            content:
              type: custom:stack-in-card
              cards:
                - type: custom:mushroom-entity-card
                  entity: sensor.plex_dc_nashost
                  name: Users
                  icon: mdi:plex
                  icon_color: '#e5a00d'
                - type: custom:mushroom-entity-card
                  entity: sensor.tautulli_total_bandwidth
                  name: Bandwith
                  icon: mdi:lan
                  icon_color: '#e5a00d'
                - type: custom:mushroom-entity-card
                  entity: sensor.tautulli_top_movie
                  name: Top Movie
                  icon: mdi:movie-filter
                  icon_color: '#e5a00d'
                - type: custom:mushroom-entity-card
                  entity: sensor.tautulli_top_tv_show
                  name: Top Series
                  icon: mdi:filmstrip
              card_mod:
                style: |
                  ha-card {
                    --ha-card-background: none;
                    --ha-card-box-shadow: none;
                    --ha-card-border-width: 0;
                  }
      card_mod:
        style: |
          ha-card:after {
            content: "{{ (states.sensor.plex_dc_nashost.state | int) }}";
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgb(255, 191, 0);
            color: var(--card-background-color);
            font-weight: bolder;
            border-radius: 50%;
            top: -5px;
            right: -5px;
            width: 16px;
            height: 16px;
            font-size: 11px; 
          }

[weppa]

@rhysb long time no speak mate!

Can you assist me in duplicating the Number card as a Volume card? My first idea was to create a Template card utilizing the amplifier’s volume attribute and the Media card, omitting the icon and information. Do you happen to know a more effective method?

Got:

Want:

[rhysb (Rhys)]

Is this what you wanted?

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

Yes, like this: type: custom:stack-in-card mode: horizontal cards: - type: custom:mushroom-template-card entity: input_number.rhys_pc_volume icon: | {% set vol_level = states(entity) | float %} {% if vol_level == 0 %} mdi:volume-mute {% elif vol_level > 0.66 %} mdi:volume-high {% elif vol_level < 0.33 %} mdi:volume-low {% else %} mdi:volume-medium {% endif %} icon_color: indigo primary: Volume secondary: |…

[Posreg (Daros)]

hey, what if I would like to set the counter / reminder for the last day of the month ?
Let’s say I want the countdown to be equal to the number of days each month

Is it achievable :)?

[weppa]

Sorry, I didn’t mean the card mod for the icon, I meant stacking together the Template card with the Media card.

[rhysb (Rhys)]

Perhaps like this.

Mushroom Month End Countdown:

type: custom:mushroom-template-card
icon: mdi:calendar-end
primary: Month End Countdown
icon_color: orange
secondary: >
  {% set month_days = (31 if now().month == 12 else
  (now().replace(month=now().month+1, day=1) - timedelta(days=1)).day) %}

  {{ now().day }}/{{ month_days }} Days | {{ ((month_days - now().day) /
  month_days * 100) | round(2) }}%
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% set month_days = (31 if now().month == 12 else (now().replace(month=now().month+1, day=1) - timedelta(days=1)).day) %}
        
        background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), 
                    conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) 
                    {{ ((month_days - now().day) / month_days * 100) | round(2) }}% 0%, 
                    var(--card-background-color) 0% 100%);
      }
      .shape:after {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: var(--icon-border-radius);
        background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
      }

Credit to @123 for the Month Days template code

Trigger for the last day of the month

The original goal of this topic was to trigger on the last day of the month. It amounts to knowing if the current day is or is not the last day. True/False is sufficient to trigger the automation and so that’s why it’s a Template Binary Sensor. However, if there is a need for a Template Sensor to report the numeric value of the month’s final day, here’s something I adapted from the python code in this post: # Last Day of the Month Sensor template: - sensor: - name: Last Day of the Mon…

[rhysb (Rhys)]

Is this more like it?

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Volume
    secondary: '{{ (state_attr(entity, ''volume_level'') * 100) | round(0) }}%'
    icon: mdi:volume-high
    entity: media_player.currently_playing
    icon_color: indigo
  - type: custom:mushroom-media-player-card
    entity: media_player.currently_playing
    icon_type: none
    primary_info: none
    secondary_info: none
    volume_controls:
      - volume_set

[Posreg (Daros)]

This is just remarkable, thank you!

[weppa]

You are a legend!

Last question, how do I change the slider colour?

[Guizmos]

I finally found the solution.
I removed the swipe_nav function in the dashboard code:

swipe_nav:
  wrap: false
  animate: swipe
  skip_tabs: null
  prevent_default: true
  swipe_amount: 20

[schmierlappe]

I don’t know why the sticky css is not working with custom-ui (yaml dashboard) when I use Lovelace-UI it works. Have to figure it out. You are using only Lovelace-UI or?

[carpenter01 (Ur Red Chemist)]

This worked, thanks alot @rhysb!

[Jarne_Roussard]

nice man & can you share you full card pleas

[Stevengerrard08]

Hello,

I have this card, where I would like the lamp color to appear on the card background image.

Instead of the fixed RGB that is there right now.

Do you have any tips on how I can achieve this?

type: custom:mushroom-light-card
entity: light.vagglampa
name: Hall
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
tap_action:
  action: toggle
icon: mdi:hanger
hide_state: true
card_mod:
  style: |
    :host { 
      {% if is_state('light.vagglampa', 'on') %}
        --mush-card-primary-font-weight: 450;
        --mush-rgb-state-light: 255, 255, 255;;
      {% endif %}
    }        
      ha-card {
        --control-height: 27px;
        {% if is_state('light.vagglampa','on') %}
        background: radial-gradient(at bottom, rgba(255,255,255, 0.26) 0%, rgba(43,55,78,0) 70%);
        background-size: 140% 70%;
        background-repeat: no-repeat;
        background-position: 50% 100%;
        background-color: var(--light-card);
        {% else %}
        background-color: var( --ha-card-background, var(--card-background-color, white) );
        background-size: 140% 70%;
        background-position: 50% 360%;
        {% endif %}        
      }