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

[Jimmy_Berglund]

Thx for the suggestion!

I got some further progression. Just one last thing that im stuck on.
No matter what ive tried it wont go to the same hight size as the rest of the boxes. Its abitt lowe.
Any suggestions how i can make it the same as the rest of the grid buttons?

It allso changer all of them from what ive done and not just the box alone when it comes to the high. And it allso is not the same on my Webpage as its on my phone

type: grid
cards:
  - type: custom:mushroom-light-card
    entity: light.vardagsrum_golvlampor
    show_brightness_control: true
    use_light_color: true
    show_color_control: false
    name: Golvlampor
    show_color_temp_control: false
    collapsible_controls: false
    double_tap_action:
      haptic: heavy
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Golvlampor
          content:
            type: vertical-stack
            cards:
              - type: custom:mushroom-light-card
                entity: light.vardagsrumslampor
                fill_container: true
                use_light_color: true
                hold_action:
                  action: more-info
                icon_type: icon
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                name: Vardagsrums Golv Lampor
              - type: custom:mushroom-light-card
                entity: light.vardagsrum_lampor_vanster_grupp
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: true
                fill_container: false
                name: Vardagsrums Golvlampa Vänster
                show_color_control: true
              - type: custom:mushroom-light-card
                entity: light.vardagsrum_lampor_hoger_grupp
                use_light_color: true
                show_color_control: true
                show_brightness_control: true
                show_color_temp_control: true
                fill_container: false
    fill_container: true
  - type: custom:mushroom-light-card
    entity: light.tv_led
    show_brightness_control: true
    use_light_color: true
    show_color_control: false
    show_color_temp_control: false
    collapsible_controls: false
    double_tap_action:
      haptic: heavy
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Tv Led
          content:
            type: vertical-stack
            cards:
              - type: custom:mushroom-light-card
                entity: light.tv_led
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: true
                name: Tv Led
                show_color_control: true
    fill_container: true
  - type: custom:mushroom-light-card
    entity: light.tv_fot
    use_light_color: true
    show_brightness_control: true
    show_color_control: false
    show_color_temp_control: false
    collapsible_controls: false
    double_tap_action:
      haptic: heavy
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Tv Fot
          content:
            type: vertical-stack
            cards:
              - type: custom:mushroom-light-card
                entity: light.tv_fot
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: true
                name: Tv Fot
                show_color_control: true
              - type: custom:mushroom-light-card
                entity: light.tv_lampa_vanster
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: true
                name: Tv Lampa Vänster
                show_color_control: true
              - type: custom:mushroom-light-card
                entity: light.tv_lampa_hoger
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: true
                name: Tv Lampa Höger
                show_color_control: true
    fill_container: true
  - type: custom:mushroom-light-card
    entity: light.kokslampa
    use_light_color: true
    show_brightness_control: true
    show_color_control: false
    show_color_temp_control: false
    collapsible_controls: false
    double_tap_action:
      haptic: heavy
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Kökslampa
          content:
            type: vertical-stack
            cards:
              - type: custom:mushroom-light-card
                entity: light.kokslampa
                fill_container: true
                use_light_color: true
                icon_type: icon
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                name: Kökslampa
    fill_container: true
  - type: custom:mushroom-light-card
    entity: light.vardagsrums_fonster
    name: Fönster
    show_brightness_control: true
    use_light_color: true
    show_color_control: false
    show_color_temp_control: false
    collapsible_controls: false
    fill_container: true
    double_tap_action:
      haptic: heavy
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Fönster
          content:
            type: vertical-stack
            cards:
              - type: custom:mushroom-light-card
                entity: light.vardagsrums_fonster
                fill_container: true
                use_light_color: true
                icon_type: icon
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                name: Fönster
  - type: custom:mushroom-light-card
    entity: light.fonsterlampa_kok
    name: Köksfönster
    use_light_color: true
    show_brightness_control: true
    show_color_control: true
    show_color_temp_control: true
    collapsible_controls: false
    layout: vertical
    fill_container: true
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-entity-card
        icon: mdi:door
        entity: lock.entre_dorr
        layout: horizontal
        tap_action:
          action: more-info
        icon_color: white
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              --ha-card-background: transparancy;
              height: 170px;
            }
      - type: custom:mushroom-chips-card
        style: |
          ha-card {
            height: 170px;
            padding-bottom: 0px !important;
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
            --chip-border-width: 0;
          }
        alignment: end
        chips:
          - type: template
            entity: alarm_control_panel.verisure_alarm
            icon: |-
              {% set state=states(entity) %}
              {% if state=='disarmed' %}
              mdi:shield-off
              {% elif state=='armed_away' %}
              mdi:shield
              {% elif state=='armed_home' %}
              mdi:shield-account
              {% elif state=='triggered' %}
              mdi:alarm-light
              {% else %}
              mdi:shield-moon
              {% endif %}
            tap_action:
              action: more-info
            icon_color: |-
              {% set state=states(entity) %}
              {% if state=='disarmed' %}
              blue
              {% elif state=='armed_away' %}
              green
              {% elif state=='armed_home' %}
              green
              {% elif state=='triggered' %}
              red
              {% else %}
              grey
              {% endif %}
          - type: template
            entity: lock.entre_dorr
            icon: |-
              {% set state=states(entity) %}
              {% if state=='locked' %}
              mdi:lock
              {% elif state=='unlocked' %}
              mdi:lock-open-variant
              {% else %}
              grey
              {% endif %}
            tap_action:
              action: more-info
            icon_color: |-
              {% set state=states(entity) %}
              {% if state=='locked' %}
              green
              {% elif state=='unlocked' %}
              red
              {% else %}
              grey
              {% endif %}
          - type: template
            entity: sensor.frontdoor
            icon: |-
              {% set state=states(entity) %}
              {% if state=='Öppen' %}
              mdi:door-open
              {% elif state=='Stängd' %}
              mdi:door
              {% else %}
              mdi:door
              {% endif %}
            tap_action:
              action: more-info
            icon_color: |-
              {% set state=states(entity) %}
              {% if state=='Öppen' %}
              red
              {% elif state=='Stängd' %}
              green
              {% else %}
              grey
              {% endif %}
    card_mod:
      style: |
        ha-card {
          --ha-card-background: var(--rgba(10, 10, 10, 0.6));
          color: var(--rgba(10, 10, 10, 0.6));
          height: 140px;
        }
  - type: custom:mushroom-light-card
    entity: light.fonsterlampa_kok
    name: Köksfönster
    use_light_color: true
    show_brightness_control: true
    show_color_control: true
    show_color_temp_control: true
    collapsible_controls: false
    fill_container: true
    layout: vertical

[Jimmy_Berglund]

Had the same problem as you.

Ive managed to do it totaly transparent using the code here. Maby that will help you.

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-entity-card
    name: Entre
    icon: mdi:door
    entity: binary_sensor.entredorr
    layout: horizontal
    tap_action:
      action: more-info
    icon_color: white
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparancy;
        }
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        padding-bottom: 0px !important;
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0;
        --chip-border-width: 0;
      }
    alignment: end
    chips:
      - type: template
        entity: alarm_control_panel.verisure_alarm
        icon: |-
          {% set state=states(entity) %}
          {% if state=='disarmed' %}
          mdi:shield-off
          {% elif state=='armed_away' %}
          mdi:shield
          {% elif state=='armed_home' %}
          mdi:shield-account
          {% elif state=='triggered' %}
          mdi:alarm-light
          {% else %}
          mdi:shield-moon
          {% endif %}
        tap_action:
          action: more-info
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='disarmed' %}
          blue
          {% elif state=='armed_away' %}
          green
          {% elif state=='armed_home' %}
          green
          {% elif state=='triggered' %}
          red
          {% else %}
          grey
          {% endif %}
      - type: template
        entity: lock.entre_dorr
        icon: |-
          {% set state=states(entity) %}
          {% if state=='locked' %}
          mdi:lock
          {% elif state=='unlocked' %}
          mdi:lock-open-variant
          {% else %}
          grey
          {% endif %}
        tap_action:
          action: more-info
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='locked' %}
          green
          {% elif state=='unlocked' %}
          red
          {% else %}
          grey
          {% endif %}
      - type: template
        entity: sensor.frontdoor
        icon: |-
          {% set state=states(entity) %}
          {% if state=='Öppen' %}
          mdi:door-open
          {% elif state=='Stängd' %}
          mdi:door
          {% else %}
          mdi:door
          {% endif %}
        tap_action:
          action: more-info
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='Öppen' %}
          red
          {% elif state=='Stängd' %}
          green
          {% else %}
          grey
          {% endif %}
card_mod:
  style: |
    ha-card {
      --ha-card-background: var(--rgba(10, 10, 10, 0.6));
      color: var(--rgba(10, 10, 10, 0.6));
      height: 145px;
    }

[rhysb (Rhys)]

You have the line height: 140px; which fixes the height to 140px for that card. You could change it to something like max-height: 170px; which should work better for you.

[rhysb (Rhys)]

Have a look here:

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

How to add fonts to Home Assistant: Go to https://fonts.google.com/ and find the font you want to use. Select the font [Add font] and then view the selected font [View selected font] Copy the font URL [Font URL] In HA, go to Settings → Dashboards and then Resources in the top right corner [Dashboard Resources] Add the Resource as a Stylesheet [Add resource] and you should see your new font resource listed [Check resource] Go back to Google Fonts and copy the CSS Rule f…

[esr2]

There’s probably a better way to do it but here’s my automation to control the 4 states and associated scenes for our master bedroom.

trigger:
  - platform: state
    entity_id: input_boolean.scene_input_boolean_master_bedtime
    id: bedtime
    from: "off"
    to: "on"
  - platform: state
    entity_id: input_boolean.scene_input_boolean_master_daytime
    id: daytime
    from: "off"
    to: "on"
  - platform: state
    entity_id: input_boolean.scene_input_boolean_master_turn_off
    id: turn_off
    from: "off"
    to: "on"
  - platform: state
    entity_id: input_boolean.scene_input_boolean_master_rainbow
    id: rainbow
    from: "off"
    to: "on"
condition: []
action:
  - service_template: >
      {% if trigger.id == 'bedtime' %} input_boolean.turn_on {% else %}
      input_boolean.turn_off {% endif %}
    target:
      entity_id: input_boolean.scene_input_boolean_master_bedtime
  - service_template: >
      {% if trigger.id == 'daytime' %} input_boolean.turn_on {% else %}
      input_boolean.turn_off {% endif %}
    target:
      entity_id: input_boolean.scene_input_boolean_master_daytime
  - service_template: >
      {% if trigger.id == 'rainbow' %} input_boolean.turn_on {% else %}
      input_boolean.turn_off {% endif %}
    target:
      entity_id: input_boolean.scene_input_boolean_master_rainbow
  - service_template: >
      {% if trigger.id == 'turn_off' %} input_boolean.turn_on {% else %}
      input_boolean.turn_off {% endif %}
    target:
      entity_id: input_boolean.scene_input_boolean_master_turn_off
  - choose:
      - conditions:
          - condition: trigger
            id: bedtime
        sequence:
          - service: scene.turn_on
            data:
              transition: 1
            target:
              entity_id: scene.master_bedtime
      - conditions:
          - condition: trigger
            id: daytime
        sequence:
          - service: scene.turn_on
            data:
              transition: 1
            target:
              entity_id: scene.master_daytime
      - conditions:
          - condition: trigger
            id: rainbow
        sequence:
          - service: scene.turn_on
            data:
              transition: 1
            target:
              entity_id: scene.master_rainbow
      - conditions:
          - condition: trigger
            id: turn_off
        sequence:
          - service: scene.turn_on
            data:
              transition: 1
            target:
              entity_id: scene.master_turn_off
    default: []

[sviperz]

This is cool, but it also operates with the mdi: icons. I need the svg images of weather states on a templated chip (the same images as the regular weather chip has), not mdi: icons.

[buche11 (Sebastian)]

Hi, is there a way for the “Lock Card” in “Locked-status” to change the “Unlock” button to “Open” (change lock.unlock to lock.open)? Or just add a second button with “Open door” button next to “Unlock door” button (as it is build in the “Unlocked -Stauts” with 2 buttins). I use a Nuki and my door will only open if the door latch is opened.

[janiv (Janiv Ratson)]

How do I create a chip that is shown only if I get a temperature value. If it is NULL, don’t show the chip.
thanks

[kurtvdpoel]

Thank you

How can I change the scaling of the graph? Now it seems the temperature changes wildly but it does only change with 1 or 2 degrees. Same for the humidity.

Kind regards
Kurt

[schmierlappe]

@rhysb any chance to get a tv on off animation?

[Blook (Klaus Dieter)]

Hi, after I installed it via HACS and rebooted, the cards don’t show up when I try to customize my dashboard. Is there anything else I need to install?

[rhysb (Rhys)]

You can specify an upper_bound, lower_bound or min_bound_range for the primary and secondary Y-axis.

lower_bound	number or string		v0.2.3	Set a fixed lower bound for the graph Y-axis. String value starting with ~ (e.g. ~50) specifies soft bound.
upper_bound	number or string		v0.2.3	Set a fixed upper bound for the graph Y-axis. String value starting with ~ (e.g. ~50) specifies soft bound.
min_bound_range	number		v0.x.x	Applied after everything, makes sure there’s a minimum range that the Y-axis will have. Useful for not making small changes look large because of scale.
lower_bound_secondary	number or string		v0.5.0	Set a fixed lower bound for the graph secondary Y-axis. String value starting with ~ (e.g. ~50) specifies soft bound.
upper_bound_secondary	number or string		v0.5.0	Set a fixed upper bound for the graph secondary Y-axis. String value starting with ~ (e.g. ~50) specifies soft bound.
min_bound_range_secondary	number		v0.x.x	Applied after everything, makes sure there’s a minimum range that the secondary Y-axis will have. Useful for not making small changes look large because of scale.

Like this:

type: custom:vertical-stack-in-card
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.rhys_office_sensor_temperature
        primary_info: state
        secondary_info: name
        name: Temperature
        icon_color: green
      - type: custom:mushroom-entity-card
        entity: sensor.rhys_office_sensor_humidity
        primary_info: state
        secondary_info: name
        name: Humidity
        icon_color: blue
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.rhys_office_sensor_temperature
        name: Temperature
        color: rgb(var(--rgb-green-color))
      - entity: sensor.rhys_office_sensor_humidity
        name: Humidity
        color: rgb(var(--rgb-blue-color))
        y_axis: secondary
    min_bound_range: 10
    min_bound_range_secondary: 20
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade

Full documentation for Mini Graph Card here:

GitHub - kalkih/mini-graph-card: Minimalistic graph card for Home Assistant...

[Moss (Marco)]

Do you occasionally read this thread? That is evident in quite a few posts.
You can fade in chips permanently or fade them in like other cards depending on conditions.
Just browse through or look only at the posts of Rhys in this thread, then you will definitely find.

Have a look here as an example.

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

Here is my combination welcome card. Tried to find a good way to display family status with more than two members. I will be adding better away & location status once I work that out. Light mode: [Welcome-light] Dark mode: [Welcome-dark] type: custom:stack-in-card cards: - type: custom:layout-card layout_type: masonry layout: {} cards: - type: custom:mushroom-chips-card chips: - type: menu - type: alarm-control-panel entity: alar…

Greetings Moss

[Clockyx82 (Dennis Bell)]

Just recently I made the move from the minimalist UI to Mushroom cards.
Redesigned my dashboard and really happy with it.

There is one thing I couldn’t figure out, and that is a chip with 2 values.

Like indoor and outdoor temperature or
Consumed and produced energy, who can give me an example of this?

Thanks

[Moss (Marco)]

Like this?

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:thermometer
    content: |-
      Inside {{ states('sensor.your_room') }} | Outside {{
       states('sensor.your_town') }}

[Sylwester (Sylwester Olik)]

Thanks
I used this solution for local files.

Use TTF in Lovelace

Hi! I’ve been trying to set up seven segment font for one of my custom card following the summary above without success. Is there someone who can describe the steps from import the right font format, config resource in UI to lovelace config. Thanks!

[Sylwester (Sylwester Olik)]

How I can make icon as a picture more flat so flag image is rectangle?

flag image size 532x302

type: custom:mushroom-template-card
picture: /local/formula1/flags/United_Arab_Emirates.jpg
primary: ABU DHABI GRAND PRIX 2022
secondary: 18 NOV 2022 - 20 NOV 2022
layout: vertical
card_mod:
  style: |
    ha-card {    
      font-family: "Formula1-regular";
      --card-primary-font-size: 16px;
      --card-secondary-font-size: 12px;
    }
    :host {
      --mush-icon-border-radius: 6px;
    }

[Clockyx82 (Dennis Bell)]

Yeah perfect!,

[Thekholm]

Hi again,

Is it possible to have a floating card? What I want is to have condition card (alarm, birthdays and so on) floating over de other cards, that you also can dismiss when needed!?

Best regards
Thekholm

[janiv (Janiv Ratson)]

Thanks,
I haven’t found a conditional chip that is shown while there is a value and hidden when not.