Mushroom Cards Card Mod Styling/Config Guide

Instead of background-color: none !important; use background: none !important;

for your Tile guide 🔹 Card-mod - Add css styles to any lovelace card - #5920 by Mariusthvdb

Thats fine. THanks

@tomg1970 This was one of the methods I was going to suggest. It will require some adjusting to fit your needs, but if the status isn’t met the icon doesn’t appear.

I used my entity to test so you’ll need to adjust.

type: custom:mushroom-chips-card
alignment: center
chips:
  - type: template
    entity: binary_sensor.fenster_wz
    icon: |-
      {% if is_state('binary_sensor.fenster_wz', 'off') %}
      mdi:window-closed-variant
      {% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
      mdi:alarm-light
      {% else %}
      mdi:window-open-variant
      {% endif %}
    icon_color: |-
      {% if is_state('binary_sensor.fenster_wz', 'off') %}
      white
      {% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
      blue
      {% else %}
      red
      {% endif %} 
    card_mod:
      style: |
        ha-card {
          background: none !important;
          border: none !important;
          {% if not is_state('binary_sensor.fenster_wz', 'on') %}
            display: none !important;
          {% endif %}
            }

Hi very nice idea, thanks a lot
What would it look like if the icon was also visible for the “unavailable” status?
So that you can see when it is unavailable.

Please forgiveme, I’m a bit confused. What do you see right now if it’s unavailable with the code I posted?

We can adjust this however you’d like.

Please, help! :exploding_head:
I can’t move the avatars to the right. I’ve already tried everything… (((
P.S. Is it possible to translate the names of the months into another language?
:face_with_peeking_eye:

type: vertical-stack
cards:
  - type: markdown
    content: '{{ states(''sensor.time'') }}'
    card_mod:
      style: |
        ha-markdown {
          padding: 0 0 0 8px !important;
          font-size: 110px !important;
          font-weight: bold !important;
          line-height: 1.2 !important;
        }
        ha-card {
          background-color: transparent;
          box-shadow: 0px 0px;
          margin-bottom: 0px;
          margin-left: 8px;
          margin-top: 5px;
        }
  - type: markdown
    content: Сегодня **{{ now().strftime('%d %B, %Y') }}**
    card_mod:
      style: |
        ha-markdown {
          padding: 0 0 0 10x !important;
          font-size: 21px !important;
          font-weight: normal !important;
          line-height: 1.4 !important;
        }
        ha-card {
          background-color: transparent;
          box-shadow: 0px 0px;
          margin-left: 8px;
          margin-bottom: 0px;
          margin-top: -45px;
        }
  - type: markdown
    content: |-
      {% set time = now().hour %}
      {% if time <= 1 %} Иди спать {{'\\U0001f621'}}
      {% elif time <= 3 %} Вали спать {{'\U0001f92c'}}
      {% elif time <= 5 %} ... {{'\U0001f47b'}}
      {% elif time <= 7 %} Проснулся? {{'\U0001f616'}}
      {% elif time <= 8 %} Вставай! {{'\U0001f97a'}}
      {% elif time <= 9 %} Кофейку? {{'\U0001f643'}}
      {% elif time <= 10 %} В бой! {{'\U0001fae1'}}
      {% elif time <= 13 %} Добрый день {{'\U0001F60A'}}
      {% elif time <= 15 %} Пора обедать {{'\U0001F60E'}}
      {% elif time <= 17 %} Вздремнуть? {{'\U0001f914'}}
      {% elif time <= 19 %} Добрый вечер {{'\U0001F44B\U0001F3FB'}}
      {% elif time <= 22 %} А что на ужин? {{'\U0001F60C'}}
      {% elif time <= 23 %} Ужинать и спать! {{'\U0001F974'}}
      {% else %} Добрый вечер {{'\U0001F974'}}
      {% endif %}
    card_mod:
      style: |
        ha-markdown {
          padding: 0 0 0 10px !important;
          font-size: 30px !important;
          font-weight: normal !important;
          line-height: 1.2 !important;
        }
        ha-card {
          background-color: transparent;
          box-shadow: 0px 0px;
          margin-left: 12px;
          margin-top: -10px;
        {  
  - square: true
    type: grid
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: person.korzik
            layout: horizontal
            icon_type: entity-picture
            primary_info: none
            secondary_info: none
            fill_container: false
            card_mod:
              style:
                mushroom-shape-avatar$: |
                  .picture {                          
                    box-shadow: 0px 0px 6px 2px var(--state-person);
                    margin-right: var(--mush-title-spacing, 0px);                
                  }
                .: |
                  ha-card {
                    --ha-card-background: none;
                    box-shadow: none;
                    --ha-card-border-width: 0;
                    --icon-size: 61px;
                    padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;                                
                    transition: all 0s;
                  }
                  :host {
                    --state-person-home: var(--green-color);
                    --state-person-not-home: var(--grey-color); 
                    --state-person-Away: var(--grey-color); 
                    --state-person-unknown: var(--grey-color);
                    --state-person-RT: var(--red-color);        
                    --state-person-Maldiviana: var(--red-color); 
                    --state-person-Izmailovo: var(--blue-color);
                    --state-person-Derevnya: var(--yellow-color);
                    --state-person-Zavoronki: var(--yellow-color);    

                    --state-person:
                    {% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
                      var(--state-person-{{ states(config.entity) | replace('_', '-') }})
                    {% else %}
                      var(--state-person-zone)
                    {% endif %};
                  }
                              
          - type: custom:mushroom-entity-card
            entity: person.artemiy
            layout: horizontal
            icon_type: entity-picture
            primary_info: none
            secondary_info: none
            fill_container: false
            card_mod:
              style:
                mushroom-shape-avatar$: |
                  .picture {                        
                    box-shadow: 0px 0px 6px 2px var(--state-person);
                    margin-right: var(--mush-title-spacing, 0px);                
                  }
                .: |
                  ha-card {
                    --ha-card-background: none;
                    box-shadow: none;
                    --ha-card-border-width: 0;
                    --icon-size: 61px;
                    padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;                                
                    transition: all 0s;
                  }
                  :host {
                    --state-person-home: var(--green-color);
                    --state-person-not-home: var(--grey-color); 
                    --state-person-Away: var(--grey-color); 
                    --state-person-unknown: var(--grey-color);
                    --state-person-RT: var(--red-color);
                    --state-person-Edu: var(--deep-orange-color);
                    --state-person-Maldiviana: var(--red-color); 
                    --state-person-Izmailovo: var(--blue-color);
                    --state-person-Derevnya: var(--yellow-color);
                    --state-person-Zavoronki: var(--yellow-color);    
                    --state-person-Edu: var(--red-color); 
                    
                    --state-person:
                    {% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki', 'Edu']) %}
                      var(--state-person-{{ states(config.entity) | replace('_', '-') }})
                    {% else %}
                      var(--state-person-zone)
                    {% endif %};
                  }
                   
          - type: custom:mushroom-entity-card
            entity: person.dakononov
            layout: horizontal
            icon_type: entity-picture
            primary_info: none
            secondary_info: none
            fill_container: false
            card_mod:
              style:
                mushroom-shape-avatar$: |
                  .picture {                         
                    box-shadow: 0px 0px 6px 2px var(--state-person);
                    margin-right: var(--mush-title-spacing, 0px);                
                  }
                .: |
                  ha-card {
                    --ha-card-background: none;
                    box-shadow: none;
                    --ha-card-border-width: 0;
                    --icon-size: 61px;
                    padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;                                
                    transition: all 0s;
                  }
                  :host {
                    --state-person-home: var(--green-color);
                    --state-person-not-home: var(--grey-color); 
                    --state-person-Away: var(--grey-color); 
                    --state-person-unknown: var(--grey-color);
                    --state-person-RT: var(--red-color);        
                    --state-person-Maldiviana: var(--red-color); 
                    --state-person-Izmailovo: var(--blue-color);
                    --state-person-Derevnya: var(--yellow-color);
                    --state-person-Zavoronki: var(--yellow-color);    

                    --state-person:
                    {% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
                      var(--state-person-{{ states(config.entity) | replace('_', '-') }})
                    {% else %}
                      var(--state-person-zone)
                    {% endif %};
                  }
                      
          - type: custom:mushroom-entity-card
            entity: person.dariya
            layout: horizontal
            icon_type: entity-picture
            primary_info: none
            secondary_info: none
            fill_container: false
            card_mod:
              style:
                mushroom-shape-avatar$: |
                  .picture {                            
                    box-shadow: 0px 0px 6px 2px var(--state-person);
                    margin-right: var(--mush-title-spacing, 0px);                
                  }
                .: |
                  ha-card {
                    --ha-card-background: none;
                    box-shadow: none;
                    --ha-card-border-width: 0;
                    --icon-size: 61px;
                    padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;                                
                    transition: all 0s;
                  }
                  :host {
                    --state-person-home: var(--green-color);
                    --state-person-not-home: var(--grey-color); 
                    --state-person-Away: var(--grey-color); 
                    --state-person-unknown: var(--grey-color);
                    --state-person-RT: var(--red-color);        
                    --state-person-Maldiviana: var(--red-color); 
                    --state-person-Izmailovo: var(--blue-color);
                    --state-person-Derevnya: var(--yellow-color);
                    --state-person-Zavoronki: var(--yellow-color);    

                    --state-person:
                    {% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
                      var(--state-person-{{ states(config.entity) | replace('_', '-') }})
                    {% else %}
                      var(--state-person-zone)
                    {% endif %};
                  }
    columns: 2


  - type: custom:clock-weather-card
    entity: weather.yandex_weather
    sun_entity: sun.sun
    temperature_sensor: sensor.outdoor_temp
    weather_icon_type: fill
    animated_icon: true
    forecast_days: 0
    time_format: 24
    date_pattern: d.m.y
    hide_today_section: false
    hide_forecast_section: true
    hide_clock: true
    hide_date: true
    hourly_forecast: false
    use_browser_time: true
    card_mod:
      style: |
        ha-card {
          background-color: transparent;
          box-shadow: 0px 0px;
          margin-top: -110px;
          margin-left: 8px;
        }

I have a problem following the V3.4.0 update. The card_mod for the primary line no longer seems to work.

              - type: custom:mushroom-template-card
                primary: >-
                   {{ now().strftime('%H:%M') }}
                secondary: >-
                  {{ states('sensor.date_du_jour') }}
                tap_action:
                  action: none
                card_mod:
                  style: |
                    ha-card {
                      --card-primary-font-size: 73px;
                      --card-secondary-font-size: 20px;
                      text-align: center;
                    }

Before the update

After the update.

1 Like

Try like this instead:

card_mod:
  style: |
    ha-card {
      --title-font-size: 73px;
      --subtitle-font-size: 20px;
      text-align: center;
    }

Try to just add some margin to each of the cards for the person like this:

type: vertical-stack
cards:
  - type: markdown
    content: '{{ states(''sensor.time'') }}'
    card_mod:
      style: |
        ha-markdown {
          padding: 0 0 0 8px !important;
          font-size: 110px !important;
          font-weight: bold !important;
          line-height: 1.2 !important;
        }
        ha-card {
          background-color: transparent;
          box-shadow: 0px 0px;
          margin-bottom: 0px;
          margin-left: 8px;
          margin-top: 5px;
        }
  - type: markdown
    content: Сегодня **{{ now().strftime('%d %B, %Y') }}**
    card_mod:
      style: |
        ha-markdown {
          padding: 0 0 0 10x !important;
          font-size: 21px !important;
          font-weight: normal !important;
          line-height: 1.4 !important;
        }
        ha-card {
          background-color: transparent;
          box-shadow: 0px 0px;
          margin-left: 8px;
          margin-bottom: 0px;
          margin-top: -45px;
        }
  - type: markdown
    content: |-
      {% set time = now().hour %}
      {% if time <= 1 %} Иди спать {{'\\U0001f621'}}
      {% elif time <= 3 %} Вали спать {{'\U0001f92c'}}
      {% elif time <= 5 %} ... {{'\U0001f47b'}}
      {% elif time <= 7 %} Проснулся? {{'\U0001f616'}}
      {% elif time <= 8 %} Вставай! {{'\U0001f97a'}}
      {% elif time <= 9 %} Кофейку? {{'\U0001f643'}}
      {% elif time <= 10 %} В бой! {{'\U0001fae1'}}
      {% elif time <= 13 %} Добрый день {{'\U0001F60A'}}
      {% elif time <= 15 %} Пора обедать {{'\U0001F60E'}}
      {% elif time <= 17 %} Вздремнуть? {{'\U0001f914'}}
      {% elif time <= 19 %} Добрый вечер {{'\U0001F44B\U0001F3FB'}}
      {% elif time <= 22 %} А что на ужин? {{'\U0001F60C'}}
      {% elif time <= 23 %} Ужинать и спать! {{'\U0001F974'}}
      {% else %} Добрый вечер {{'\U0001F974'}}
      {% endif %}
    card_mod:
      style: |
        ha-markdown {
          padding: 0 0 0 10px !important;
          font-size: 30px !important;
          font-weight: normal !important;
          line-height: 1.2 !important;
        }
        ha-card {
          background-color: transparent;
          box-shadow: 0px 0px;
          margin-left: 12px;
          margin-top: -10px;
        {  
  - type: grid
    square: true
    columns: 2
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: person.korzik
            layout: horizontal
            icon_type: entity-picture
            primary_info: none
            secondary_info: none
            fill_container: false
            card_mod:
              style:
                mushroom-shape-avatar$: |
                  .picture {                          
                    box-shadow: 0px 0px 6px 2px var(--state-person);
                    margin-right: var(--mush-title-spacing, 0px);                
                  }
                .: |
                  ha-card {
                    --ha-card-background: none;
                    box-shadow: none;
                    --ha-card-border-width: 0;
                    --icon-size: 61px;
                    padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;                                
                    transition: all 0s;
                    margin-left: 22px;
                  }
                  :host {
                    --state-person-home: var(--green-color);
                    --state-person-not-home: var(--grey-color); 
                    --state-person-Away: var(--grey-color); 
                    --state-person-unknown: var(--grey-color);
                    --state-person-RT: var(--red-color);        
                    --state-person-Maldiviana: var(--red-color); 
                    --state-person-Izmailovo: var(--blue-color);
                    --state-person-Derevnya: var(--yellow-color);
                    --state-person-Zavoronki: var(--yellow-color);    

                    --state-person:
                    {% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
                      var(--state-person-{{ states(config.entity) | replace('_', '-') }})
                    {% else %}
                      var(--state-person-zone)
                    {% endif %};
                  }
                              
          - type: custom:mushroom-entity-card
            entity: person.artemiy
            layout: horizontal
            icon_type: entity-picture
            primary_info: none
            secondary_info: none
            fill_container: false
            card_mod:
              style:
                mushroom-shape-avatar$: |
                  .picture {                        
                    box-shadow: 0px 0px 6px 2px var(--state-person);
                    margin-right: var(--mush-title-spacing, 0px);                
                  }
                .: |
                  ha-card {
                    --ha-card-background: none;
                    box-shadow: none;
                    --ha-card-border-width: 0;
                    --icon-size: 61px;
                    padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;                                
                    transition: all 0s;
                    margin-left: 22px;
                  }
                  :host {
                    --state-person-home: var(--green-color);
                    --state-person-not-home: var(--grey-color); 
                    --state-person-Away: var(--grey-color); 
                    --state-person-unknown: var(--grey-color);
                    --state-person-RT: var(--red-color);
                    --state-person-Edu: var(--deep-orange-color);
                    --state-person-Maldiviana: var(--red-color); 
                    --state-person-Izmailovo: var(--blue-color);
                    --state-person-Derevnya: var(--yellow-color);
                    --state-person-Zavoronki: var(--yellow-color);    
                    --state-person-Edu: var(--red-color); 
                    
                    --state-person:
                    {% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki', 'Edu']) %}
                      var(--state-person-{{ states(config.entity) | replace('_', '-') }})
                    {% else %}
                      var(--state-person-zone)
                    {% endif %};
                  }
                   
          - type: custom:mushroom-entity-card
            entity: person.dakononov
            layout: horizontal
            icon_type: entity-picture
            primary_info: none
            secondary_info: none
            fill_container: false
            card_mod:
              style:
                mushroom-shape-avatar$: |
                  .picture {                         
                    box-shadow: 0px 0px 6px 2px var(--state-person);
                    margin-right: var(--mush-title-spacing, 0px);                
                  }
                .: |
                  ha-card {
                    --ha-card-background: none;
                    box-shadow: none;
                    --ha-card-border-width: 0;
                    --icon-size: 61px;
                    padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;                                
                    transition: all 0s;
                    margin-left: 22px;
                  }
                  :host {
                    --state-person-home: var(--green-color);
                    --state-person-not-home: var(--grey-color); 
                    --state-person-Away: var(--grey-color); 
                    --state-person-unknown: var(--grey-color);
                    --state-person-RT: var(--red-color);        
                    --state-person-Maldiviana: var(--red-color); 
                    --state-person-Izmailovo: var(--blue-color);
                    --state-person-Derevnya: var(--yellow-color);
                    --state-person-Zavoronki: var(--yellow-color);    

                    --state-person:
                    {% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
                      var(--state-person-{{ states(config.entity) | replace('_', '-') }})
                    {% else %}
                      var(--state-person-zone)
                    {% endif %};
                  }
                      
          - type: custom:mushroom-entity-card
            entity: person.dariya
            layout: horizontal
            icon_type: entity-picture
            primary_info: none
            secondary_info: none
            fill_container: false
            card_mod:
              style:
                mushroom-shape-avatar$: |
                  .picture {                            
                    box-shadow: 0px 0px 6px 2px var(--state-person);
                    margin-right: var(--mush-title-spacing, 0px);                
                  }
                .: |
                  ha-card {
                    --ha-card-background: none;
                    box-shadow: none;
                    --ha-card-border-width: 0;
                    --icon-size: 61px;
                    padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;                                
                    transition: all 0s;
                    margin-left: 22px;
                  }
                  :host {
                    --state-person-home: var(--green-color);
                    --state-person-not-home: var(--grey-color); 
                    --state-person-Away: var(--grey-color); 
                    --state-person-unknown: var(--grey-color);
                    --state-person-RT: var(--red-color);        
                    --state-person-Maldiviana: var(--red-color); 
                    --state-person-Izmailovo: var(--blue-color);
                    --state-person-Derevnya: var(--yellow-color);
                    --state-person-Zavoronki: var(--yellow-color);    

                    --state-person:
                    {% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
                      var(--state-person-{{ states(config.entity) | replace('_', '-') }})
                    {% else %}
                      var(--state-person-zone)
                    {% endif %};
                  }
  - type: custom:clock-weather-card
    entity: weather.yandex_weather
    sun_entity: sun.sun
    temperature_sensor: sensor.outdoor_temp
    weather_icon_type: fill
    animated_icon: true
    forecast_days: 0
    time_format: 24
    date_pattern: d.m.y
    hide_today_section: false
    hide_forecast_section: true
    hide_clock: true
    hide_date: true
    hourly_forecast: false
    use_browser_time: true
    card_mod:
      style: |
        ha-card {
          background-color: transparent;
          box-shadow: 0px 0px;
          margin-top: -110px;
          margin-left: 8px;
        }

just adjust this bit if you need to move it more:

margin-left: 22px;

for the month not being in your language take a look at this post.

you will need to create a dictionary in your template. the backend (where templates are evaluated) doesnt know anything about the frontend (where you language is set).

Thank you for the answer, but it doesn’t work the size of the text does not change.

This what i had, before the update.

Ah i see - i am not actually on the newest update it seems… i am usually one of the first to know!

ill update and take a look :slight_smile:

I made the switch to Mushroom cards some time ago… and I can’t believe I’m just finding this now. Thanks for pulling it all together :+1:t2:

1 Like

I just upgraded Mushroom Cards in HACS today and apparently missed a change. Now my card looks like this. Any ideas what may have changed?

image

1 Like


Probably this.

I need to look into it, i dont see this issue on the newest update but i use a theme (minimalist) that might be overwritting this change.

I need to take a closer look tomorrow if i get a chance.

1 Like

You’re amazing. Thank you!

I did a quick compare of the old JS and the new version and letter-spacing: was added to the primary and secondary state info. You can adjust it with the code below, but there may be a more direct way. I’m still looking.

@dimitri.landerloos may have additional insight.

card_mod:
  style: |
    ha-card {
        --card-primary-color:red;
        --card-secondary-color: yellow;
        --card-primary-font-size:50px;
        --card-secondary-font-size:15px;
        --card-primary-line-height: 75px !important ;
       }
1 Like

@ValMarDav

--card-primary-font-size:50px;
--card-secondary-font-size:15px;

will control the font size going forward.

card_mod:
  style: |
    ha-card {
        --card-primary-color:red;
        --card-secondary-color: yellow;
        --card-primary-font-size:50px;
        --card-secondary-font-size:15px;
        --card-primary-line-height: 75px !important ;
       }

I wasn’t either and didn’t understand why folks were struggling :man_facepalming:

Thank you, I found the display I had before the update like this.


                card_mod:
                  style: |
                    ha-card {
                      --card-primary-font-size: 105px;
                      --card-secondary-font-size: 30px;
                      --card-primary-line-height: 110px !important ;
                      --card-secondary-line-height: 35px !important ;
                      text-align: center;
                    }