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

resolved!

correct link is:

https://fonts.googleapis.com/css2?family=Material+Icons

I dont see how you would have space for it on a mobile dashboard, but like this:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-climate-card
    entity: climate.bedroom_heating
    hvac_modes: []
    show_temperature_control: true
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:thermometer
        entity: climate.bedroom_heating
        content: '{{state_attr(config.entity,''current_temperature'')}}'
      - type: template
        icon: mdi:water
        entity: sensor.bedroom_temperature_humidity_humidity
        content: '{{states(config.entity)}}'
      - type: template
        icon: mdi:thermometer
        entity: climate.bedroom_heating
        content: '{{state_attr(config.entity,''current_temperature'')}}'
      - type: template
        icon: mdi:thermometer
        entity: climate.bedroom_heating
        content: '{{state_attr(config.entity,''current_temperature'')}}'
    alignment: end
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 12px;
          right: 12px;
          --chip-spacing: 0px !important;
        }

You could maybe have the chips overlap slightly by changing the --chip-spacing to a negative number. Just to make it fit.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-climate-card
    entity: climate.bedroom_heating
    hvac_modes: []
    show_temperature_control: true
    name: Heating
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:thermometer
        entity: climate.bedroom_heating
        content: '{{state_attr(config.entity,''current_temperature'')}}'
      - type: template
        icon: mdi:water
        entity: sensor.bedroom_temperature_humidity_humidity
        content: '{{states(config.entity)}}'
      - type: template
        icon: mdi:thermometer
        entity: climate.bedroom_heating
        content: '{{state_attr(config.entity,''current_temperature'')}}'
      - type: template
        icon: mdi:thermometer
        entity: climate.bedroom_heating
        content: '{{state_attr(config.entity,''current_temperature'')}}'
    alignment: end
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 12px;
          right: 12px;
          --chip-spacing: -8px !important;
        }
2 Likes

THANKS! I am thrilled every time what you can conjure up here.
Since yesterday I am so taken by the Mushroom Cards that I want to convert as much as possible.
The Mush-Climate looks now already really great and ales important what I need to see.
Inn this area is now only the top navigation menu and the info buttons below no Mushroom.

i´m also intrested to the site :upside_down_face:

Any luck yet, I have also been trying to figure this out, sometimes I just don’t want a purple slider!

Easy with card mod. Check the light card section of my guide:

But you can of course also just change the color in the card itself to what you want:

type: custom:mushroom-light-card
entity: light.lounge_corner_lamp
layout: horizontal
show_brightness_control: true
icon_color: cyan

Hey guys,

I am trying to create a weather card, and i have a problem with the secondary text, see the photo below. I want it in the center under icon and primary text.
image

Code
cards:
  - type: custom:mushroom-template-card
    primary: '{{states(''sensor.wu_temperature_rafina'')}}°C'
    icon: |-
      {% set current_hour = now().hour %}
      {% set is_night = current_hour >= 20 or current_hour < 6 %}

      {% if is_state('weather.openweathermap_2','clear-day') %}
          mdi:weather-sunny
      {% elif is_state('weather.openweathermap_2','clear-night') %}
          mdi:weather-night
      {% elif is_state('weather.openweathermap_2','rain') %}
          mdi:weather-rainy
      {% elif is_state('weather.openweathermap_2','snow') %}
          mdi:weather-snowy
      {% elif is_state('weather.openweathermap_2','fog') %}
          mdi:weather-fog
      {% elif is_state('weather.openweathermap_2','sleet') %}
          mdi:weather-partly-snowy-rainy
      {% elif is_state('weather.openweathermap_2','wind') %}
          mdi:weather-windy
      {% elif is_state('weather.openweathermap_2','cloudy') %}
          mdi:weather-cloudy
      {% elif is_state('weather.openweathermap_2','partlycloudy') %}
          {{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
      {% elif is_state('weather.openweathermap_2','hail') %}
          mdi:weather-hail
      {% elif is_state('weather.openweathermap_2','lightning') %}
          mdi:weather-lightning
      {% elif is_state('weather.openweathermap_2','thunderstorm') %}
          mdi:weather-lightning-rainy
      {% endif %}
    secondary: |2-
        {% set en = states('weather.openweathermap_2') %} 
          {% set conditions = ['clear-night:Καθαρός',
                               'cloudy:Συννεφιασμένος',
                               'fog:Ομιχλώδες',
                               'hail:Χαλαζόπτωση',
                               'lightning:Αστραπές',
                               'lightning-rainy:Βροχερός με αστραπές',
                               'partlycloudy:Τοπικές νεφώσεις',
                               'pouring,rainy:Βροχερός',
                               'snowy:Χιονόπτωση',
                               'snowy-rainy:Χιονόνερο',
                               'sunny:Λιακάδα',
                               'windy:Ανεμώδης',
                               'windy-variant:Θυελλώδης',
                               'exceptional:Ιδιαίτερος'] %}
          {{ conditions
                | select('search', en)
                | map('regex_replace', '.*:')
                | list 
                | default([''], true)
                | first }}
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            font-weight: 400 !important;
            margin-left: 5px;
            margin-top: 70px;
          }
          .secondary {
            font-weight: 400 !important;
            margin-right: 100px;
            margin-top: 30px;
          }
          .container {
           --card-secondary-font-size: 15px;
           --card-primary-font-size: 35px;
          }
        mushroom-shape-icon$: |
          .shape {
            --shape-color: transparent;
          }
        .: |
          ha-state-icon {
          --icon-symbol-size: 60px;
          color: #487aff;
          }
          ha-card {
            background-color: none;
            border-width: 0px;
            margin-left: 20px;
            border-radius: 25px !important;
            border-width: 0px;
          }```

Looks fine on mine. So please post your full card.

dimitri.landerloos i did try to fix it and i came with this result. ( picture )
My problem now is when the secondary text is changing when the condition change the text its not centered.
image
image

Code
primary: '{{states(''sensor.wu_temperature_rafina'')}}°C'
icon: |-
  {% set current_hour = now().hour %}
  {% set is_night = current_hour >= 20 or current_hour < 6 %}

  {% if is_state('weather.openweathermap_2','clear-day') %}
      mdi:weather-sunny
  {% elif is_state('weather.openweathermap_2','clear-night') %}
      mdi:weather-night
  {% elif is_state('weather.openweathermap_2','rain') %}
      mdi:weather-rainy
  {% elif is_state('weather.openweathermap_2','snow') %}
      mdi:weather-snowy
  {% elif is_state('weather.openweathermap_2','fog') %}
      mdi:weather-fog
  {% elif is_state('weather.openweathermap_2','sleet') %}
      mdi:weather-partly-snowy-rainy
  {% elif is_state('weather.openweathermap_2','wind') %}
      mdi:weather-windy
  {% elif is_state('weather.openweathermap_2','cloudy') %}
      mdi:weather-cloudy
  {% elif is_state('weather.openweathermap_2','partlycloudy') %}
      {{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
  {% elif is_state('weather.openweathermap_2','hail') %}
      mdi:weather-hail
  {% elif is_state('weather.openweathermap_2','lightning') %}
      mdi:weather-lightning
  {% elif is_state('weather.openweathermap_2','thunderstorm') %}
      mdi:weather-lightning-rainy
  {% endif %}
secondary: |2-
    {% set en = states('weather.openweathermap_2') %} 
      {% set conditions = ['clear-night:Καθαρός',
                           'cloudy:Συννεφιασμένος',
                           'fog:Ομιχλώδες',
                           'hail:Χαλαζόπτωση',
                           'lightning:Αστραπές',
                           'lightning-rainy:Βροχερός με αστραπές',
                           'partlycloudy:Τοπικές νεφώσεις',
                           'pouring,rainy:Βροχερός',
                           'snowy:Χιονόπτωση',
                           'snowy-rainy:Χιονόνερο',
                           'sunny:Λιακάδα',
                           'windy:Ανεμώδης',
                           'windy-variant:Θυελλώδης',
                           'exceptional:Ιδιαίτερος'] %}
      {{ conditions
            | select('search', en)
            | map('regex_replace', '.*:')
            | list 
            | default([''], true)
            | first }}
card_mod:
  style:
    mushroom-state-info$: |
      .primary {
        font-weight: 400 !important;
        margin-right: 20px;
        margin-top: 45px;
      }
      .secondary {
        font-weight: 700 !important;
        margin-top: 20px;
        margin-right: 25px;
        --secondary-text-color: primary;
      }
      .container {
       --card-secondary-font-size: 18px;
       --card-primary-font-size: 35px;
       align-items: end;
      }
    mushroom-shape-icon$: |
      .shape {
        --shape-color: transparent;
      }
    .: |
      ha-state-icon {
      --icon-symbol-size: 60px;
      color: #487aff;
      margin-left: 50px;
      margin-bottom: 25px;
      }
      ha-card {
        background-color: none;
        border-width: 0px;

      }```

I would put the card itself into vertical mode and the use a pseudo element instead for the actual temperature.

type: custom:mushroom-template-card
primary: ''
icon: |-
  {% set current_hour = now().hour %}
  {% set is_night = current_hour >= 20 or current_hour < 6 %}

  {% if is_state('weather.openweathermap','clear-day') %}
      mdi:weather-sunny
  {% elif is_state('weather.openweathermap','clear-night') %}
      mdi:weather-night
  {% elif is_state('weather.openweathermap','rain') %}
      mdi:weather-rainy
  {% elif is_state('weather.openweathermap','snow') %}
      mdi:weather-snowy
  {% elif is_state('weather.openweathermap','fog') %}
      mdi:weather-fog
  {% elif is_state('weather.openweathermap','sleet') %}
      mdi:weather-partly-snowy-rainy
  {% elif is_state('weather.openweathermap_2','wind') %}
      mdi:weather-windy
  {% elif is_state('weather.openweathermap','cloudy') %}
      mdi:weather-cloudy
  {% elif is_state('weather.openweathermap','partlycloudy') %}
      {{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
  {% elif is_state('weather.openweathermap','hail') %}
      mdi:weather-hail
  {% elif is_state('weather.openweathermap','lightning') %}
      mdi:weather-lightning
  {% elif is_state('weather.openweathermap','thunderstorm') %}
      mdi:weather-lightning-rainy
  {% endif %}
secondary: |2-
    {% set en = states('weather.openweathermap') %} 
      {% set conditions = ['clear-night:Καθαρός',
                           'cloudy:Συννεφιασμένος',
                           'fog:Ομιχλώδες',
                           'hail:Χαλαζόπτωση',
                           'lightning:Αστραπές',
                           'lightning-rainy:Βροχερός με αστραπές',
                           'partlycloudy:Τοπικές νεφώσεις',
                           'pouring,rainy:Βροχερός',
                           'snowy:Χιονόπτωση',
                           'snowy-rainy:Χιονόνερο',
                           'sunny:Λιακάδα',
                           'windy:Ανεμώδης',
                           'windy-variant:Θυελλώδης',
                           'exceptional:Ιδιαίτερος'] %}
      {{ conditions
            | select('search', en)
            | map('regex_replace', '.*:')
            | list 
            | default([''], true)
            | first }}
layout: vertical
card_mod:
  style:
    mushroom-state-info$: |
      .container {
        --card-secondary-font-size: 15px;
        --card-primary-font-size: 35px;
      }
    mushroom-shape-icon$: |
      .shape {
        --shape-color: transparent;
      }
    .: |
      ha-state-icon {
        --icon-symbol-size: 60px;
        color: #487aff;
      }
      ha-state-icon::after {
        content: '{{states('sensor.lounge_downstairs_temperature')}}°C';
        position: relative;
        display: flex;
        justify-content: center !important;
        top: 32px;
        left: 5px;
        color: var(--primary-text-color) !important;
        font-size: 35px;
      }
      ha-card {
        background-color: none;
        border-width: 0px;
        margin-left: 20px;
        border-radius: 25px !important;
        border-width: 0px;
      }

Your are great! Thanks.

How can i add card width : 250 and height : 150 and center them?

Sorry not sure what you mean? I wouldnt modify the size of the card anymore no, since the centering would be done by the card itself instead now.

I am using it in a custom grid layout with collums 250px kai rows 150

Like i asked you initially. Post the full grid card then.

Cant help unless i know what you have.

1 Like

Didnt post it because is the first card that i create.

Trying to recreate the card below.

2 Likes

Use layout card. You can then define the column sizes like this:

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: custom:mushroom-template-card
    primary: ''
    icon: |-
      {% set current_hour = now().hour %}
      {% set is_night = current_hour >= 20 or current_hour < 6 %}

      {% if is_state('weather.openweathermap','clear-day') %}
          mdi:weather-sunny
      {% elif is_state('weather.openweathermap','clear-night') %}
          mdi:weather-night
      {% elif is_state('weather.openweathermap','rain') %}
          mdi:weather-rainy
      {% elif is_state('weather.openweathermap','snow') %}
         mdi:weather-snowy
      {% elif is_state('weather.openweathermap','fog') %}
         mdi:weather-fog
      {% elif is_state('weather.openweathermap','sleet') %}
         mdi:weather-partly-snowy-rainy
      {% elif is_state('weather.openweathermap_2','wind') %}
          mdi:weather-windy
      {% elif is_state('weather.openweathermap','cloudy') %}
          mdi:weather-cloudy
      {% elif is_state('weather.openweathermap','partlycloudy') %}
          {{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
      {% elif is_state('weather.openweathermap','hail') %}
          mdi:weather-hail
      {% elif is_state('weather.openweathermap','lightning') %}
          mdi:weather-lightning
      {% elif is_state('weather.openweathermap','thunderstorm') %}
          mdi:weather-lightning-rainy
      {% endif %}
    secondary: |2-
        {% set en = states('weather.openweathermap') %} 
          {% set conditions = ['clear-night:Καθαρός',
                             'cloudy:Συννεφιασμένος',
                             'fog:Ομιχλώδες',
                             'hail:Χαλαζόπτωση',
                             'lightning:Αστραπές',
                             'lightning-rainy:Βροχερός με αστραπές',
                             'partlycloudy:Τοπικές νεφώσεις',
                             'pouring,rainy:Βροχερός',
                             'snowy:Χιονόπτωση',
                             'snowy-rainy:Χιονόνερο',
                             'sunny:Λιακάδα',
                             'windy:Ανεμώδης',
                             'windy-variant:Θυελλώδης',
                             'exceptional:Ιδιαίτερος'] %}
          {{ conditions
                | select('search', en)
                | map('regex_replace', '.*:')
                | list 
                | default([''], true)
                | first }}
    layout: vertical
    card_mod:
      style:
        mushroom-state-info$: |
          .container {
            --card-secondary-font-size: 15px;
          }
        mushroom-shape-icon$: |
          .shape {
            --shape-color: transparent;
          }
        .: |
          ha-state-icon {
            --icon-symbol-size: 60px;
            color: #487aff;
          }
          ha-state-icon::after {
            content: '{{states('sensor.lounge_downstairs_temperature')}}°C';
            position: relative;
            display: flex;
            justify-content: center !important;
            top: 32px;
            left: 5px;
            color: var(--primary-text-color) !important;
            font-size: 35px;
          }
          ha-card {
            background-color: none;
            border-width: 0px;
            border-radius: 25px !important;
            border-width: 0px;
          }
layout:
  grid-template-columns: 50% 50%
  grid-template-rows: auto
  max_cols: 2
1 Like

I will use it. Thanks for your help. Need to study the changes that you made in the card to understant better what the options do. I will write again if i have any problem and share what i made. Thanks again.

Birthday Card

Page Properties:

  • Displays 4 upcoming birthdays. The number can also be increased further with the help of a swiper card
  • Shows the remaining time for birthdays.
  • Ready for White and Dark Theme.
  • Highlights the birthday person in a white frame.
  • Birthday icon at the very first card let’s HA to remind you the birthday in various ways. In my example a notification through telegram.
  • Full screen tablet version
  • Info on creating a sensor that displays multiple birthdays
  • Info on creating the template sensors from the UI
  • Info on how to shorten state attribute messages.
  • Info on creatşng full screen pages on tablet and pc view.
  • Full code explanation line by line
4 Likes
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: climate.eetplaats
                    icon: |-
                      {{ iif(is_state('climate.eetplaats', 'cool'), 'mdi:air-conditioner','mdi:air-conditioner' ) }}
                    icon_color: >
                      {% if is_state('climate.eetplaats', 'heat') %}
                        rgb(235,194,194)
                      {% elif is_state('climate.eetplaats', 'cool') %}
                        rgb(0,255,255)
                      {% else %}
                        rgb(84,84,84)
                      {% endif %}

The color of the icon does not change, what is wrong with the code ?

Try instead of rgb(235,194,194) just writting 235,194,194

Mushroom doesnt accept straight css terminology. You could do rgb(235,194,194) if you use card mod for example:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: climate.eetplaats
    icon: |-
      {% if is_state('climate.eetplaats', 'cool') %} 
        mdi:air-conditioner
      {% else %}
        mdi:air-conditioner
      {% endif %}
    card_mod:
      style: |
        ha-card {
          {% if is_state(config.entity,'heat') %}
            --color: rgb(235, 194, 194);
          {% elif is_state(config.entity, 'cool') %}
            --color: rgb(0, 255, 255);
          {% else %}
            --color: rgb(84, 84, 84);
          {% endif %}
        }

config.entity is a substitution instead of writting the entity name used in the card every time :slight_smile:

1 Like