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

[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 %}        
      }

[rhysb (Rhys)]

You can using --mush-rgb-state-media-player, like this:

  - type: custom:mushroom-media-player-card
    entity: media_player.currently_playing
    icon_type: none
    primary_info: none
    secondary_info: none
    volume_controls:
      - volume_set
    card_mod: 
      style: |
        :host {
          --mush-rgb-state-media-player: var(--rgb-green);
        }

[rhysb (Rhys)]

Have a look here:

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

This tweak adds color to the card background. The color light version will adjust with the light color. It looks great in dark mode, but not so much in light mode. Does anyone know how to detect the dark/light mode of lovelace? [Lights - Dark] Normal light version: - type: custom:mushroom-light-card entity: light.elijahs_light name: Light fill_container: false hide_state: false use_light_color: false show_brightness_control: true …

[weppa]

Sure.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Theatre
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: Projector
        secondary: >-
          {{ states((entity)) | title }} {% if is_state_attr((entity),
          'current_activity', 'PowerOff') %} {% else %}
            - {{ state_attr((entity), 'current_activity') | replace('4K','') }}
          {% endif %}
        icon: mdi:television
        icon_color: '{{ ''disabled'' if is_state((entity), ''off'') else ''blue'' }}'
        entity: remote.theatre_room
        card_mod:
          style: |
            ha-card:active {
              background: rgba(var(--rgb-disabled), 0.1);
              transform: scale(0.985);
              transition: 0s;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: switch.theatre_room_apple_tv_4k
            icon_color: green
            icon: mdi:apple
            content_info: none
            tap_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-primary-text-color' }}), 0.1);
                  --icon-color: rgb(var(--rgb-white));
                }  
          - type: entity
            entity: switch.theatre_room_ben_pc
            icon_color: green
            icon: mdi:face-man
            content_info: none
            tap_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-primary-text-color' }}), 0.1);
                  --icon-color: rgb(var(--rgb-white));
                } 
          - type: entity
            entity: switch.theatre_room_boys_pc
            icon_color: green
            icon: mdi:one-up
            content_info: none
            tap_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-primary-text-color' }}), 0.1);
                  --icon-color: rgb(var(--rgb-white));
                } 
          - type: entity
            entity: switch.theatre_room_cast
            icon_color: green
            icon: mdi:cast
            content_info: none
            tap_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-primary-text-color' }}), 0.1);
                  --icon-color: rgb(var(--rgb-white));
                } 
        card_mod:
          style: |
            ha-card {
                --chip-box-shadow: none;
                top: 16px;
                width: -webkit-fill-available;
                right: 12px;
                position: absolute;
            } 
            .chip-container {
                right: 0px;
                position: absolute;
            }
  - type: vertical-stack
    cards:
      - type: conditional
        conditions:
          - entity: sensor.theatre_activity
            state: Apple TV 4K
          - entity: remote.theatre
            state_not: idle
        card:
          type: custom:mini-media-player
          icon: mdi:apple
          artwork: cover
          source: icon
          info: scroll
          hide:
            icon: true
            name: true
            power: true
            volume: true
            source: true
          entity: media_player.theatre
      - type: conditional
        conditions:
          - entity: remote.theatre_room
            state: 'on'
        card:
          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.marantz_sr5013
              icon_color: blue
              card_mod:
                style:
                  mushroom-shape-icon$: |
                    .shape {
                      background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'volume_level') |  float * 100) | round(0) }}% 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);
                    }
            - type: custom:mushroom-media-player-card
              entity: media_player.marantz_sr5013
              icon_type: none
              primary_info: none
              secondary_info: none
              icon_color: blue
              volume_controls:
                - volume_set
              card_mod: 
                style: |
                  :host {
                    --mush-rgb-state-media-player: var(--rgb-{{ config.icon_color }});
                  }

[kazir1]

hi, is it possible to use mdi:icon as shown by the arrow? (secondary info)

[Stevengerrard08]

Fantastic!

I use that in a group, but when only dimmable lights are on it shows a white color.
Can you make it show yellow then instead?

Thanks so much for your help

[Radeaus (Quinten)]

Hi all!

I really want to remove the shadow on the sides of the chips. I have accomplished it with every card, exept op the chips. I use this code, can someone tell me what I do wrong?

style: |
  ha-card {
    box-shadow: none;
    border: solid 0px rgba(100,100,100,0.3);
    font-family: Arial, Helvetica, sans-serif
  }