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

Share your Projects!
,
4925

Awesome project! I’m trying to make a chip that can group multiple radiators and turn on and off (like a light group). Below action to show the problem. It does set preset_mode to “comfort” if the state_attr is “eco”. It does not set preset_mode to “eco” if the state_attr is “comfort”.

I have tried the if statement with “eco” too, but with same result. If I put the if statement in templates it returns the correct both comfort and eco.

Do I need to call a script instead or am I missing something?

        tap_action:
          action: call-service
          service: climate.set_preset_mode
          data:
            preset_mode: |-
              {% if state_attr('climate.stue','preset_mode') == 'comfort' %}
                eco
              {% else %}
                comfort
              {% endif %}
          target:
            entity_id: climate.stue
4926

Just change it to a template Chip, then you can change whatever you like :grinning:

4927

Hey Neep, everything is working Ok for me :thinking:.

Perhaps a re-install of Mushroom?

4928

If you have based your card on my Room Card, remove or comment out the two background lines from :host:

    card_mod:
      style: |
        :host([dark-mode]) {
          #background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          #background: rgba(var(--rgb-primary-text-color), 0.025);
        }
1 Like
4929

Of course, that was it! Thanks!

1 Like
4930

When making it vertical, you will need to remove the width command, like this:

          ha-card {
            #width: 66px;
            top: -66px;
          }
1 Like
4931

Thank you so much! :slight_smile:

1 Like
4932

You can transverse shadow root ($) like this:

card_mod:
  style:
    mushroom-state-info$: |
      .primary {
        white-space: normal !important;
      }
    .: |
      mushroom-shape-icon {
        display: none;
      }
      ha-card {
        --ha-card-border-width: 0;
        --rgb-state-media-player: var(--album-art-color);
        --control-icon-size: 32px;
      }
1 Like
4933

Not able to test this, but try like this:

        tap_action:
          action: call-service
          service: climate.set_preset_mode
          data:
            preset_mode: '{{ state_attr(''climate.stue'',''preset_mode'') }}'
          target:
            entity_id: climate.stue
4934

Can anyone help me zooming my entitypicture out so it’s better visible in the card?

image
image1284×831 87.7 KB

My code:


type: custom:mushroom-template-card
primary: Television
secondary: >-
  {% if is_state('media_player.plex_plex_for_samsung_tv_ue55f8000', 'playing')
  %}
    {{ state_attr('media_player.plex_plex_for_samsung_tv_ue55f8000', 'media_series_title') or states('media_player.plex_plex_for_samsung_tv_ue55f8000')}}:  
  {{ state_attr('media_player.plex_plex_for_samsung_tv_ue55f8000',
  'media_title') or states('media_player.plex_plex_for_samsung_tv_ue55f8000')}}


  {%- elif is_state('media_player.ue55f8000', 'off') -%}
      off
    {%- else -%}

    {%- endif -%}
icon: mdi:television
entity: media_player.ue55f8000
badge_icon: >-
  {% if is_state('media_player.plex_plex_for_samsung_tv_ue55f8000', 'playing')
  %}
        mdi:plex
        {% elif is_state ('media_player.plex_plex_for_samsung_tv_ue55f8000', 'unavailable') %}
        {% endif %}
icon_color: |-
  {% if is_state('media_player.ue55f8000', 'on') %}
  blue
  {% else %} grey
  {% endif %}
picture: null
badge_color: orange
tap_action:
  action: toggle
card_mod:
  style: |
    ha-card::before {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      {% if not is_state('media_player.plex_plex_for_samsung_tv_ue55f8000', 'idle') %}
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        background: url( '{{ state_attr('media_player.plex_plex_for_samsung_tv_ue55f8000', "entity_picture") }}' ) center no-repeat;
        filter: blur(150px) saturate(400%);
        background-size: 0% 100%;
      {% endif %}
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      --ha-card-border-width: 0;
      {% if not is_state('media_player.plex_plex_for_samsung_tv_ue55f8000', 'idle') %}
        background: url( '{{ state_attr("media_player.plex_plex_for_samsung_tv_ue55f8000", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color))50%);
7 Likes
4935

What’s the url of the plex generated entity_pictures? When I looked at the ones coming from jellyfin I found I could filter out some characters with jinja to get a higher resolution picture. (jellyfin integration not working str the moment so can’t verify what was there).

Also try to use cover or fit for the background size:
background: url() center/cover ;
Or
background: url() center/contain;

4936

it seems like there is a limit char for a response.
I’ll create a GitHub in order you to be able to access it.

2 Likes
4937

Is it possible to have tts?

4938

So I create a new folder under themes and copy paste the code?

4939

SOLVED; the card was incerted in a swiper card and it seems inside that the “tap/hold” are no good friends with chrome, works fine on my Android-device

so why am I not able to use hold_action ??
newbie in Mushroom and not used stack-in-card, so don’t rule out the basics (or stupid stuff) :slight_smile:

the config below “works”,
at least if i interchange “tap” with “hold”; then whatever is in tap_action works
but I don’t see why hold_action is not working?


type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      height: 102px;
      {% if is_state('light.kitchen_light1_z2m', 'on') %}
        background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }
cards:
  # First the main-card:
  - primary: Kitchen
    type: custom:mushroom-template-card
    secondary: >-
      {{states('sensor.kitchen_thp_temperature') | round(1)}}°C /
      {{states('sensor.kitchen_thp_humidity') | int}}%
    icon: mdi:knife
    entity: light.kitchen_light1_z2m
    hold_action:
      action: toggle

    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          content:
            type: vertical-stack
            cards:
              - !include kitchen_light_card.yaml

    icon_color: "{{ 'orange' if is_state(entity, 'on') else 'disabled' }}"
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
        }
4940

It’s a Powershield

4941

Dumb question but I am using Music Assistant to import radio stations in via TuneIn Radio, but idk how to find the name or URI of the radio stations to select them as a source to be played. Please help, thanks.

4942

Ok, first time posting but long time reading and using all the great ideas here!
@rhysb you sir are a wizard!

Normally i always find the solution after searching and trying myself but in this case i’m kinda lost…
So i need a little help here, i want the template card icon to follow the light color…

Now this works, until i turn the light off, when i do that the icon shape disappears and the icon itself turns white instead of the normal disabled color.

type: custom:mushroom-template-card
primary: null
secondary: null
icon: mdi:lightbulb
entity: light.hue_argenta_color_spot_raam_1
icon_color: null
card_mod:
  style: |
    mushroom-shape-icon {
      {% set r = state_attr(config.entity, 'rgb_color')[0] %}
      {% set g = state_attr(config.entity, 'rgb_color')[1] %}
      {% set b = state_attr(config.entity, 'rgb_color')[2] %}
      --icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
      --shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
    }

Examples, on (like i want), off what i get, and off how i want it to look…

image

1 Like
4943

Maybe try something like an if statement:

{% if is_state('light.hue_argenta_color_spot_raam_1', 'on') %}
…

1 Like
4944

Thanx, but unfortunately that doesn’t work or i’m doing something wrong… Would you be so kind to share the whole yaml how you think this would work?