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

[LiQuid_cOOled]

I believe this will get you what you want. @media is used is to apply different styles for different media types/devices.

Adjust the @media screen and (max-width: 400px) { to your liking

type: custom:mushroom-template-card
primary: Airwick
icon: mdi:spray
icon_color:  |-
            {% if is_state('switch.toilet_airwick_valve', 'on') %}
              red
            {% else %}
              teal
            {% endif %}
layout: vertical
entity: switch.toilet_airwick_valve
card_mod:
            style: |
                ha-card {
                  border: none !important;
                  box-shadow: 0px 0px;
                }
                ha-card:after {
                  content: "{{ states('counter.toilet_airwick_total') }}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-orange));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: +10px;
                  right: +45px;
                  width: 21px;
                  height: 21px;
                  font-size: 11px; 
                }
                :host {
                  --icon-size: 64px !important;
                  perspective: 900px;
                }
                ha-card:active {
                  transform: rotateX(25deg);
                  transform-origin: center bottom;
                  transition: 0s;
                }
                mushroom-shape-icon {
                  --shape-color: none !important;
                  --shape-color-disabled: none !important;}
                    }
                @media screen and (max-width: 400px) {
                ha-card:after {
                content: "{{ states('counter.toilet_airwick_total') }}";
                position: absolute;
                background: rgb(var(--rgb-orange));
                color: var(--card-background-color);
                font-weight: bolder;
                border-radius: 50%;
                top: 10px;
                right: 55px;
                width: 21px;
                height: 21px;
                font-size: 11px; 
                }
                 }
                   

[SoulAssassin (Anton Stolov)]

This is amazing homie, thanks

...
                right: +20px;
...

[LiQuid_cOOled]

No problem, happy to help!

[wgumaa (Waleed)]

Hello everyone,

I am building a custom mushroom-template-card for my washing machine.

It looks like this:

I have the primary info showing “Running” and the secondary info showing time and spin speed.

Is there a way to display the secondary info over 2 lines as opposed to having them on the same line? My current code looks like this:

 secondary: >
      Time - {{states('sensor.electrolux_sawa_washing_machine_timetoend')}} Min
      Spin
      {{states('select.electrolux_sawa_washing_machine_userselections_analogspinspeed')}

[gbboy]

I’m sure there is a more elegant way to do it with the custom mushroom cards but using card mod on e.g. a tile card I would do the following using white-space and \A to do a line break:

    ha-tile-info$: |
      .secondary:after {
        visibility: visible;
        content: "Time - {{ states('sensor.electrolux_sawa_washing_machine_timetoend') }} Min \A Spin {{ states('select.electrolux_sawa_washing_machine_userselections_analogspinspeed') }} %";
        white-space: pre-wrap;
      }

Obviously you would need to adapt to the correct styling but just an example

[flrnwrzl]

Hello I have a problem on mobile with the template cards.
For seome reason it only shows me the text in grey instead of black. but only on mobile.

i have set the color of text in the card mod with:

--primary-text-color: Black;
--secondary-text-color: Black;

what can it be?

[LiQuid_cOOled]

Try changing to and avoid capitalizations

--card-primary-color: black;
--card-secondary-color: black;

[flrnwrzl]

@LiQuid_cOOled

--card-primary-color: black;
--card-secondary-color: black;

hi, now its

• Grey on web

• icon grey on mobile but on mobile text is black

[LiQuid_cOOled]

Clear your web browser’s cache and can you post your full card code?

You also have the ability to set mobile only settings with @media screen and (max-width: 400px) {

[flrnwrzl]

sure

      - type: custom:mushroom-template-card
        primary: '{{states(''sensor.inverter_1_yield_today'')}} kW'
        secondary: Heute
        icon: mdi:lightning-bolt
        icon_color: none
        fill_container: true
        entity: sensor.inverter_1_yield_today
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card { 
            background:  
              {% if states('sensor.inverter_1_bt2240102870_realtime_power') < '0.001'%}
              rgb(255, 255, 190)
              {% elif states('sensor.inverter_1_bt2240102870_realtime_power') >'0.001'%}
              rgb(255, 255, 80)
              {%endif%};
            border: none; 
            border-radius: 25px; 
            --icon-symbol-size: 35px;
            --card-primary-color: black;  
            --card-secondary-color: black;
            --card-secondary-font-weight: Regular; 
            transition: 0s;
             }

You also have the ability to set mobile only settings with @media screen and (max-width: 400px) {

→ dont want to overcomplicate it

[Holdestmade]

As you are using a mushroom template card, this is what I use:

        multiline_secondary: true
        secondary: |
          {{ ((states('sensor.pv_inverter_pv_dc_power_input') | float(0) ) / 0.1027) | round(0,default=0) }}%
          {{ states('sensor.pv_inverter_pv_dc_power_input')| float(0) | round(3) }}kW
          {{ ((states('sensor.pv_inverter_pv_dc_power_input') | float(0) * 1000) / 47.306016 ) | round(0,default=0) }}W/m²
          {{ ((states('sensor.pv_inverter_dc_current_east') | float(0) + states('sensor.pv_inverter_dc_current_west') | float(0)) / 2) | round(1,default=0) }}A

[LiQuid_cOOled]

does this work on both?

type: custom:mushroom-template-card
primary: |
  {{states('sensor.inverter_1_yield_today')}} kW
secondary: Heute
icon: mdi:lightning-bolt
icon_color: none
fill_container: true
entity: sensor.inverter_1_yield_today
tap_action:
  action: more-info
card_mod:
  style: |
    ha-card { 
          background: 
            {% if states('sensor.inverter_1_bt2240102870_realtime_power') < '0.001'%}
            rgb(255, 255, 190)
            {% elif states('sensor.inverter_1_bt2240102870_realtime_power') >'0.001'%}
            rgb(255, 255, 80)
            {%endif%}
          border: none; 
          border-radius: 25px; 
          --icon-symbol-size: 35px;
          --card-primary-color: black !important;  
          --card-secondary-color: black !important;  
          --card-secondary-font-weight: 400; 
          transition: 0s;
           }

[flrnwrzl]

unfortunatelly not.
Same result

• grey on WEB
• grey icon and black text on Mobile

funny thing. it worked before perfectly until update to HA 2024.02

[LiQuid_cOOled]

your icon color says none. We have to move your if statement up there. Give me a minute.

[flrnwrzl]

yes because i want it black.
thanks please help

[LiQuid_cOOled]

This is what I see with this code.

type: custom:mushroom-template-card
primary: |
  {{states('sensor.inverter_1_yield_today')}} kW
secondary: Heute
icon: mdi:lightning-bolt
icon_color: black
fill_container: true
entity: sensor.inverter_1_yield_today
tap_action:
  action: more-info
card_mod:
  style: |
    ha-card { 
          border: none; 
          border-radius: 25px; 
          --icon-symbol-size: 35px;
          --card-primary-color: black !important;   
          --card-secondary-color: black !important; 
          --card-secondary-font-weight: 400; 
          transition: 0s;
          background: 
            {% if states('sensor.inverter_1_bt2240102870_realtime_power') < '0.001'%}
            rgb(255, 255, 190)
            {% elif states('sensor.inverter_1_bt2240102870_realtime_power') >'0.001'%}
            rgb(255, 255, 80)
            {%endif%}
           }

[SoulAssassin (Anton Stolov)]

Guys, 'bout chips, it possible to get animate?

[flrnwrzl]

and this is what I see
what could it be?

[LiQuid_cOOled]

Check out this

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

[LiQuid_cOOled]

add !important; after the color black and do you have a theme installed?