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

The position is ok

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

But it looks like this is not working

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;
             }

image

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:
Screenshot_20240202_100042
can i work to reach this(?):
Screenshot_20240202_095855
look at the margin of border… get by conic-gradient…but how to get margin from shape ?

Can you post your current code for the green icon?

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 :slight_smile:

Thanks!

Please post your code corerctly. See #11

The answer is yes if we use

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

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

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

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

1 Like

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

Morning all - first post :slight_smile:

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; }

try:

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

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

2 Likes

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) :thinking:??

Ok… will be waiting for your guidance
Thank you

Thanks for the super quick response - unfortunately same behaviour:

image (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

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.

1 Like
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
Screenshot_20240202_131250

Thanks again… bit word blind :wink:

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

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;}
    }
3 Likes