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

[LiQuid_cOOled]

Happy to assist!!

[Mrsash (Sash B)]

Just realized when the fan is off the icon does not go back to default color.

[LiQuid_cOOled]

I am working on multiple threads. Can you post the code? It helps me expedite a resolution.

[Mrsash (Sash B)]

oh I meant the code you added the space for the timer. I completely missed that it does not go back to default. So expecting this

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: switch.bathroom_ixl_l1
    icon: mdi:fan
    icon_color: yellow
    primary: Bathroom Fan
    secondary: |
      {{states('switch.bathroom_ixl_l1') }}       
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary::after {
            content: "{% set f = state_attr('timer.bathroom_fan', 'finishes_at') %} {{ "" if f
             == None else (as_datetime(f) - now()).total_seconds() |
             timestamp_custom('%H:%M:%S', false) }}";
            position: absolute;
            top:29px;
            left: 90px;
            color: lime;
            display: flex;
                   }
        .: |
          ha-card {
           padding-bottom: 10px !important;
           }

[LiQuid_cOOled]

@Mrsash

switch.bathroom_ixl_l1

This should do it…

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: switch.bathroom_ixl_l1
    icon: mdi:fan
    icon_color: |
      {{ 'yellow' if is_state(config.entity, 'on') else 'grey' }}
    primary: Bathroom Fan
    secondary: |
      {{states(config.entity) }}       
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary::after {
            content: "{% set f = state_attr('timer.bathroom_fan', 'finishes_at') %} {{ "" if f
             == None else (as_datetime(f) - now()).total_seconds() |
             timestamp_custom('%H:%M:%S', false) }}";
            position: absolute;
            top:29px;
            left: 90px;
            color: lime;
            display: flex;
                   }
        .: |
          ha-card {
           padding-bottom: 10px !important;
           }

[Chykan (Andrew)]

@LiQuid_cOOled after our discussion yesterday I have updated:

Sticky Floating Navigation Menu - All Devices - Mushroom Chips Card

THEMES FOR STICKY FLOATING NAVIGATION MENU - All Devices - Mushroom Chips Card FULL CODE FOR CARD IS AVAILABLE FROM THIS LINK CARD-MOD COLOURED PEBBLE No Transparency [image] CARD-MOD COLOURED GLASS Allows to see through buttons and any information they may be blocking [image] INNER GLOW Allows to see through buttons and any information they may be blocking [image] INNER GLOW OUTLINE Allows to see through buttons and any information they may be blocking [image] MUSHROOM THEME S…

Thanks for the new style of template, much easier to follow.

THEMES FOR STICKY FLOATING NAVIGATION MENU - All Devices - Mushroom Chips Card

FULL CODE FOR CARD IS AVAILABLE FROM THIS LINK

CARD-MOD COLOURED PEBBLE

• No Transparency

CARD-MOD COLOURED GLASS

• Allows to see through buttons and any information they may be blocking

INNER GLOW

• Allows to see through buttons and any information they may be blocking

INNER GLOW OUTLINE

• Allows to see through buttons and any information they may be blocking

DASHBOARD MUSHROOM THEME SELECTOR IS HERE

• custom:mushroom-select-card
• Add to dashboard via GUI
• Change themes right from the dashboard

[Mrsash (Sash B)]

Awesome. Any reason why this button shows on/off as opposed to On/Off like my other buttons?

Regular button

type: custom:mushroom-light-card
entity: switch.bathroom_ixl_l1
icon: mdi:lightbulb-on
name: Bathroom Light
icon_color: yellow

as opposed to

[LiQuid_cOOled]

It the way the device reports the state. It is different amongst different devices. With a tempalte card you can use something similar to this:

 secondary: |
       {{ 'On' if is_state(config.entity, 'on') else 'Off' }}   

[Mrsash (Sash B)]

@LiQuid_cOOled

 secondary: |
       {{ 'On' if is_state(config.entity, 'on') else 'Off' }}   

Legendary stuff

[Faecon (Jo)]

                                              - type: horizontal-stack
                                                cards:
                                                  - type: custom:mushroom-template-card
                                                    secondary: Oefenzaal
                                                  - type: custom:mushroom-chips-card
                                                    chips:
                                                      - type:  template
                                                        tap_action:
                                                          action: perform-action
                                                          perform_action: script.climate_increase_decrease_temp_airco
                                                          target: {}
                                                          data:
                                                            entity_id: input_number.volume_oefenzaal
                                                            step: -0.2
                                                        icon: mdi:minus
                                                  - type: custom:mushroom-template-card
                                                    secondary: '{{ states(''input_number.volume_oefenzaal'')}}'
                                                  - type: custom:mushroom-chips-card
                                                    chips:
                                                      - type:  template
                                                        tap_action:
                                                          action: perform-action
                                                          perform_action: script.climate_increase_decrease_temp_airco
                                                          target: {}
                                                          data:
                                                            entity_id: input_number.volume_oefenzaal
                                                            step: +0.2
                                                        icon: mdi:plus

I want the - temp and + closer to each other and more space for the first mushroom card, how do I achieve this ?

[LiQuid_cOOled]

I’d suggest using the layout-card Swap your entities for mine.

type: custom:layout-card
layout_type: custom:grid-layout
layout:
      grid-template-columns: 40% 20% 10% 10%
      margin: 0px 0px 0px 0px
cards:
  - type: custom:mushroom-template-card
    secondary: Oefenzaal
  - type: custom:mushroom-template-card
    secondary: "{{ states('input_number.sprinkler_number')}}"
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        tap_action:
          action: perform-action
          perform_action: script.sprinkler_timer_finish
          target: {}
          data:
            entity_id: input_number.sprinkler_number
            step: 0.2
        icon: mdi:plus
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        tap_action:
          action: perform-action
          perform_action: script.sprinkler_timer_finish
          target: {}
          data:
            entity_id: input_number.sprinkler_number
            step: -0.2
        icon: mdi:minus

[Holdestmade]

@Patty37

Sorry for another question. Does anyone know if I can add the current energy useage sensor to this card as illustrated below? (Ignore my dodgy writing haha!) I’ve tried a multitude of things but can’t seem to get anything working. Is it just impossible maybe?

I do similar, using a mushroom template card:

type: custom:mushroom-template-card
primary: Desk Plug
secondary: >-
  {{states('switch.desk_plug') | title }} ·
  {{states('sensor.desk_plug_power')}}W
icon: mdi:desk
entity: switch.desk_plug
icon_color: |-
  {% if is_state('switch.desk_plug', 'on') %}
    blue
  {% else %}
    grey
  {% endif %}

[LiQuid_cOOled]

Your code appears to be fine.

I’d look at your Display precision for that device

[Holdestmade]

@LiQuid_cOOled

It the way the device reports the state. It is different amongst different devices. With a tempalte card you can use something similar to this:

 secondary: |
       {{ 'On' if is_state(config.entity, 'on') else 'Off' }}   

Can you use this instead ?

{{ states(config.entity) | title }}

[Holdestmade]

I was replying to a post above

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

Sorry for another question. Does anyone know if I can add the current energy useage sensor to this card as illustrated below? (Ignore my dodgy writing haha!) I’ve tried a multitude of things but can’t seem to get anything working. Is it just impossible maybe? [image]

[LiQuid_cOOled]

@Holdestmade

{{ states(config.entity) | title }}

Not sure I have seen that method before. If you want to display an attribute I use something like this:

secondary: |
      {{ state_attr('light.toilet_1', 'max_mireds') }}

[Holdestmade]

Not to display an attribute, to capitalise the state, instead of this:

 secondary: |
       {{ 'On' if is_state(config.entity, 'on') else 'Off' }}   

[LiQuid_cOOled]

This is one method I know about. Your method works well, apparently I missed your point. Appreciate the education, always learning!

    secondary: |
      {{states(config.entity)}}   
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary { 
            text-transform: capitalize;
            }

[Chykan (Andrew)]

These can be used too

``
{{ states(‘sensor.devonport_fire_danger_0’) | upper }}

      {{ states('sensor.devonport_fire_danger_0') | capitalize }}

[Ben82cgn]

Hello,

sorry for my bad paint skills

How can i change reduze the padding on the left side.

type: custom:mushroom-template-card
entity: switch.ps5_tom_power
primary: PS5 Ben
secondary: |
  {% if is_state('switch.ps5_726_power', 'on') %}
    {% if is_state('sensor.ps5_726_activity', 'idle') %}
      Ruhemodus
    {% elif is_state('sensor.ps5_726_activity', 'playing') %}
      {{ state_attr('sensor.ps5_726_activity', 'title_name') or states('sensor.ps5_726_activity') }}
    {%- else -%}
      {{ state_attr('sensor.ps5_726_activity', 'title_name') or states('sensor.ps5_726_activity') }}
    {%- endif -%}
  {%- elif is_state('switch.ps5_726_power', 'unavailable') -%}
   Aus
  {%- elif is_state('switch.ps5_726_power', 'off') -%}
   Aus
  {%- else -%}
    {{ states('switch.ps5_726_power') }}
  {%- endif -%}
picture: |
  {% if is_state('sensor.ps5_726_activity', 'playing') %}
  {{state_attr('sensor.ps5_726_activity', 'title_image')}}
  {% else %}
  /local/playstation.jpg
  {% endif %}
card_mod:
  style: |
    ha-card {
      height: 48px !important;
      border-radius: 100px;
      --icon-size: 40px;
    }
    :host {
      --mush-icon-size: 40px;
    }