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

[Faecon (Jo)]

The position is ok

i changed it in font-weight : bold; and added font-size: 12 ;

But it looks like this is not working

[LiQuid_cOOled]

Font weight is only going to affect the 4, the + and - are icons.

type: custom:numberbox-card
entity: input_number.test
icon: false
picture: false
border: false
name: false
card_mod:
  style: |
    ha-card {
       color: lime;
             }
    .cur-num{
      font-weight: 900 !important;
      color: red;
             }
    .cur-box {
    padding-top: 20px !important;
             }

[andreadannibale (Andrea)]

type: custom:mushroom-template-card
primary: ''
secondary: '{{states(''sensor.soggiorno_humidity'')}} %'
entity: sensor.soggiorno_humidity
icon: mdi:thermometer
icon_color: blue
layout: vertical
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 60%, transparent 65%), conic-gradient(rgb(var(--rgb-blue)) {{ states('sensor.soggiorno_humidity') }}% 22%, var(--card-background-color) 0% 100%);       
        
          }
      .shape:after {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: 50%;
        background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
           }
    .: |
      ha-card {
        width: 88px;
        --spacing: 8px;
        padding-bottom: calc(var(--spacing) * 1.618) !important;
        
        box-shadow: var(--ha-card-box-shadow) !important;
        border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
        margin-left: auto;
        margin-right: auto;
        transition: all 0s;
            }

now i have this:

can i work to reach this(?):

look at the margin of border… get by conic-gradient…but how to get margin from shape ?

[LiQuid_cOOled]

@andreadannibale

border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

Can you post your current code for the green icon?

[Bully89 (Bas)]

Good morning, I’m trying to figure out how to skip the background on the chip card and have searched the forum/thread for an answer, can across some previous topics but none of the solution seems to work.

Did anybody manage to do this? Tried several things:

styles:
  img_cell:
    - background: '#FFFFFF'
  card:
    - background: none and or '#FFFFFF' or var(--contrast1)
card_mod:
  style: |
    :host([type='menu']) .chip {
      background: none !important;
    }

etc… Of course with the correct indentation

Thanks!

[LiQuid_cOOled]

Please post your code corerctly. See #11

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

[LiQuid_cOOled]

The answer is yes if we use

Card mod Themes

I’ll need a day to get there. Late for me CST

UPDATE…got it working. Will walk you through adjusting your theme tomorrow.

[SoulAssassin (Anton Stolov)]

In my case it’s looks like this:

        - type: horizontal-stack
          cards:
          - type: custom:vertical-stack-in-card
            cards:
            - type: custom:mushroom-person-card
              name: P1
              entity: person.p1
              icon_type: entity-picture
              primary_info: state
              secondary_info: false
            - type: custom:mushroom-chips-card
              chips:
                - type: entity
                  entity: sensor.p1
                  use_entity_picture: false
                  card_mod:
                    style: |
                      ha-card {
                        border: none
                      }
                  alignment: center
          - type: custom:vertical-stack-in-card
            cards:
            - type: custom:mushroom-person-card
              name: P2
              entity: person.p2
              icon_type: entity-picture
              primary_info: state
              secondary_info: false
            - type: custom:mushroom-chips-card
              chips:
                - type: entity
                  entity: sensor.p2
                  use_entity_picture: false
                  card_mod:
                    style: |
                      ha-card {
                        border: none
                      }
                  alignment: center
          - type: custom:vertical-stack-in-card
            cards:
            - type: custom:mushroom-person-card
              name: P3
              entity: person.p3
              icon_type: entity-picture
              primary_info: state
              secondary_info: false

[dimitri.landerloos]

@beurdy

is_state("switch.washing_machine

@beurdy

if is_states('switch.washing_machine

see the difference? is_state vs is_states. is_states doesnt exist.

[andreadannibale (Andrea)]

@andreadannibale

border-radius: calc(var(–ha-card-border-radius, 12px) * 2) !important;

sorry but i haven’t code for green icon card… it’s only an image take from web

[careyjack-boop]

Morning all - first post

I am building out a Climate card and trying to customise the Icon based on state. Several forums later… I am struggling with the icon section (removing this and the card works) - the Icon on the card is blank.

I have checked the states available (heat and ‘off’) via the development tools - any help really apricated

type: custom:mushroom-climate-card
entity: climate.controller_boiler
name: Boiler Control
hvac_modes: []
collapsible_controls: true
show_temperature_control: false
layout: horizontal
icon_type: icon
secondary_info: state
tap_action:
  action: toggle

**icon: |-**
**  {% set vbl=state('climate.controller_boiler') %}**
**  {% if vbl=='heat' %}**
**    icon: mdi:fire**
**  {% elif vbl=='off' %}**
**    icon: mdi:fire-off          **
**  {% endif %}**

card_mod: null
style: |
  ha-card {
    height: 200px !important;
    width: 200px;
  }
mushroom-state-info$: |
  .container {
  --card-secondary-font-size: 10px;
  --card-primary-font-size: 12px;
             }
mushroom-climate-temperature-control$:
  mushroom-input-number$: |
    .value {
  font-size: 30px; }

[andreadannibale (Andrea)]

try:

icon: |-
  {% set vbl=state('climate.controller_boiler') %}
  {% if vbl=='heat' %}
    mdi:fire
  {% elif vbl=='off' %}
    mdi:fire-off          
  {% endif %}

[LiQuid_cOOled]

If no one has answered by tomorrow, I’ll reach out. Done for tonight or in my case this morning

[piKolin]

Hi!

Anyone knows, if exists the way to modify the cover-card to add a custom button inline with the others or change the actual behaviour of the up/down buttons to call another service (for example, set_cover_position) ??

[Vandana (Vandana Dass)]

Ok… will be waiting for your guidance
Thank you

[careyjack-boop]

@andreadannibale

icon: |-
  {% set vbl=state('climate.controller_boiler') %}
  {% if vbl=='heat' %}
    mdi:fire
  {% elif vbl=='off' %}
    mdi:fire-off          
  {% endif %}

Thanks for the super quick response - unfortunately same behaviour:

(Icon just goes blank light orange).

The following works in the developer tools template

icon:|-
{% if is_state('climate.controller_boiler','heat') %}
icon: mdi:fire
{% else %}
icon: mdi:fire-off
{% endif %}

Result type: string

icon: |-

icon: mdi:fire-off

[dimitri.landerloos]

@andreadannibale

try:

icon: |-
  {% set vbl=state('climate.controller_boiler') %}
  {% if vbl=='heat' %}
    mdi:fire
  {% elif vbl=='off' %}
    mdi:fire-off          
  {% endif %}

That doesnt work for a non-template card.

@careyjack-boop you will need card mod to control the the icon based on state.

so like this (replace entities with your own):

type: custom:mushroom-climate-card
entity: climate.office_heating
name: Boiler Control
hvac_modes: []
collapsible_controls: true
show_temperature_control: false
layout: horizontal
icon_type: icon
secondary_info: state
tap_action:
  action: toggle
card_mod:
  style: 
    mushroom-state-info$: |
      .container {
        --card-secondary-font-size: 10px;
        --card-primary-font-size: 12px;
      }
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        .value {
          font-size: 30px; 
        }
    .: |
      ha-card {
        height: 200px !important;
        width: 200px;
      }
      ha-state-icon {
        {% if is_state(config.entity,'heat') %}
          --card-mod-icon: mdi:fire;
          color: rgb(var(--rgb-deep-orange)) !important;
        {% else %}
          --card-mod-icon: mdi:fire-off;
          color: rgb(var(--rgb-disabled));
        {% endif %}
      }
      mushroom-shape-icon {
        {% if is_state(config.entity,'heat') %}
          --card-mod-icon: mdi:fire;
          --shape-color: rgba(var(--rgb-deep-orange), 0.2) !important;
        {% else %}
          --card-mod-icon: mdi:fire-off;
          --shape-color: rgba(var(--rgb-disabled), 0.2) !important;
        {% endif %}
      }

i added that the icon becomes grey if the heating is off.

[andreadannibale (Andrea)]

type: custom:mushroom-template-card
primary: ''
secondary: '{{states(''sensor.soggiorno_humidity'')}} %'
entity: sensor.soggiorno_humidity
icon: mdi:thermometer
icon_color: 'blue'
layout: vertical
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --icon-size: 3rem;
        outline: solid 0.5rem ;
        outline-offset: -0.99rem;
        outline-color: rgba(255,255,255,0.1);
        background: 
          radial-gradient(var(--card-background-color)63%, transparent 65%), 
          conic-gradient(rgb(var(--rgb-blue)) {{ states('sensor.soggiorno_humidity') }}% 0%, transparent 10%, rgba(var(--rgb-white),0.01) 0% 100%);  
      }
      .shape:after {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: 50%;
        background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
           }
    .: |
      ha-card {
        width: auto;
        --spacing: 8px;
        padding-bottom: calc(var(--spacing) * 1.618) !important;
        background-color
        box-shadow: var(--ha-card-box-shadow) !important;
        border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
        margin-left: auto;
        margin-right: auto;
        transition: all 0s;
            }

something like this… but not totally satisfied

[beurdy]

Thanks again… bit word blind

Is it possible to blink (on/off) the badge icon?

I want to use a badge icon to indicate warm water is being used in the house. So, for example:

• no badge when only cold water
• badge when only warm water
• blinking badge when warm and cold water

[dimitri.landerloos]

Yes. have the badge appear based on the state of your sensors. then if it is being shown play this animation when both hot and cold is on.

      mushroom-badge-icon {
        {% if states('binary_sensor.water_hot_and_cold') == 'on' %}
          animation: blink-animation 1s steps(5, start) infinite;
        {% endif %}
      }
      @keyframes blink-animation {
        to {visibility: hidden;}
      }

it would go anywhere under or before your icon really:

type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: >-
  {% if is_state("switch.washing_machine", "on") %} amber {% else %} grey {%
  endif %}
primary: Laundry
layout: vertical
secondary: >-
  {% if is_state("switch.washing_machine", "off") %} Off {% else %} {{
  states("sensor.washing_machine_washer_job_state") }} {% endif %}
entity: switch.washing_machine
tap_action:
  action: more-info
card_mod:
  style: |
    ha-state-icon {
      {% if is_states('switch.washing_machine', 'on') %}
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      {% else %}
      {% endif %}
    }
    @keyframes shake {
      0%, 100% { transform: translate(0, 0) rotate(0); }
      20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
      40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
      60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
      80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
    }
    @keyframes drum {
      50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
    }
    mushroom-badge-icon {
      {% if states('binary_sensor.water_hot_and_cold') == 'on' %}
        animation: blink-animation 1s steps(5, start) infinite;
      {% endif %}
    }
    @keyframes blink-animation {
      to {visibility: hidden;}
    }