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

Thank you for your try but it doesnt help. I tried some variations and the only change was this:

image

Here is the complete code:

type: vertical-stack
cards:
  - type: custom:mushroom-template-card
    primary: Sauna
    secondary: >-
      {{ states('sensor.sauna_status') }} |  {{
      states('sensor.temperatur_sauna_banksensor') }}°C
    tap_action:
      action: navigate
      navigation_path: /lovelace-garten/sauna
    icon: mdi:hydraulic-oil-temperature
    icon_color: |
      {% if is_state('timer.restlauftzeit_sauna', 'active') -%}
        orange
      {%- elif is_state('timer.restlauftzeit_sauna', 'idle') -%}
        blue
      {%- else -%}
        grey
      {%- endif %}
    badge_icon: |-
      {% if is_state('switch.sauna_heizung_stufe_1', 'on') -%}
        mdi:radiator
      {%- elif is_state('switch.sauna_heizung_stufe_1', 'off') -%}
        mdi:radiator-off
      {%- else -%}
        mdi:radiator-off
      {%- endif %}
    badge_color: |-
      {% if is_state('switch.sauna_heizung_stufe_1', 'on') -%}
        red
      {%- endif %}
    card_mod:
      style: |
        :host {
              height: 7px;
        }
        ha-card {
              margin-right: 20px;
              }
  - type: custom:mushroom-chips-card
    alignment: end
    style: |
      ha-card {
        --chip-box-shadow: 1px 1px 1px 1px lightgrey;
        --chip-background: none;
        --chip-spacing: 10px;
        --chip-padding: 20px;
      }
    chips:
      - type: action
        tap_action:
          action: call-service
          service: timer.start
          data: {}
          target:
            entity_id: timer.restlauftzeit_sauna
        icon: mdi:play
      - type: action
        tap_action:
          action: call-service
          service: timer.finish
          data: {}
          target:
            entity_id: timer.restlauftzeit_sauna
        icon: mdi:stop
  - type: custom:gap-card
    height: 10

Greets
Sebastian

like this?

image
you had älignment: end, and it was not allowing any move
now you have margin-left parameter , that you can change for whatever you need

type: vertical-stack
cards:
  - type: custom:mushroom-template-card
    primary: Sauna
    secondary: >-
      {{ states('sensor.sauna_status') }} |  {{
      states('sensor.temperatur_sauna_banksensor') }}°C
    tap_action:
      action: navigate
      navigation_path: /lovelace-garten/sauna
    icon: mdi:hydraulic-oil-temperature
    icon_color: |
      {% if is_state('timer.restlauftzeit_sauna', 'active') -%}
        orange
      {%- elif is_state('timer.restlauftzeit_sauna', 'idle') -%}
        blue
      {%- else -%}
        grey
      {%- endif %}
    badge_icon: |-
      {% if is_state('switch.sauna_heizung_stufe_1', 'on') -%}
        mdi:radiator
      {%- elif is_state('switch.sauna_heizung_stufe_1', 'off') -%}
        mdi:radiator-off
      {%- else -%}
        mdi:radiator-off
      {%- endif %}
    badge_color: |-
      {% if is_state('switch.sauna_heizung_stufe_1', 'on') -%}
        red
      {%- endif %}
    card_mod:
      style: |
        :host {
              height: 7px;
        }
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: 1px 1px 1px 1px lightgrey;
          --chip-background: none;
          --chip-spacing: 10px;
          --chip-padding: 20px;
          margin-left: 240px;
        }
    chips:
      - type: action
        tap_action:
          action: call-service
          service: timer.start
          data: {}
          target:
            entity_id: timer.restlauftzeit_sauna
        icon: mdi:play
      - type: action
        tap_action:
          action: call-service
          service: timer.finish
          data: {}
          target:
            entity_id: timer.restlauftzeit_sauna
        icon: mdi:stop
  - type: custom:gap-card
    height: 10
1 Like

Thanks for your reply. Below is my code. I also dont unterstand whats that gu10 entitiy of yours.

type: template
icon: |
          {% if is_state('light.alle_lichter', 'off') %}
            mdi:lightbulb-multiple-off
          {% else %}
            mdi:lightbulb-multiple
          {% endif %}
icon_color: |
          {% if is_state('light.alle_lichter', 'off') %}
            grey
          {% else %}
            amber
          {% endif %}
entity: light.alle_lichter
        content: '{{ states(''light.alle_lichter'') }} ,'
        card_mod: null
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lichter
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - domain: light
                      state: 'on'
                  exclude:
                    - domain: light
                      attributes:
                        type: browser_mod
                    - entity_id: '*gu10*'
                card:
                  type: entities
                  show_header_toggle: false
          target: {}

try this one and let me know

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: |
      {% if is_state('light.alle_lichter', 'off') %}
        mdi:lightbulb-multiple-off
      {% else %}
        mdi:lightbulb-multiple
      {% endif %}
    icon_color: |
      {% if is_state('light.alle_lichter', 'off') %}
         grey
      {% else %}
        amber
      {% endif %}
    entity: light.alle_lichter
    content: '{{ states(''light.alle_lichter'') }} ,'
    card_mod: null
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Lichter
          content:
            type: custom:auto-entities
            filter:
              include:
                - domain: light
                  state: 'on'
            card:
              type: entities
              show_header_toggle: false
      target: {}

about the gu10 and exclude, I have some lights that I don’t want to be counted and shown in auto-entities
exclude option allows you to filter such entities

1 Like

Thanks!

Using mushroom theme, with a couple variables and card mod. Background is a very washed out photo, which is then heavily blurred in Photoshop to get a weak gradient.

Cards have background and text color depending on state.

Example:

  - type: custom:mushroom-light-card
    entity: light.living_room
    name: Living Room
    collapsible_controls: true
    show_color_control: false
    show_color_temp_control: false
    use_light_color: false
    hold_action:
      action: more-info
    show_brightness_control: true
    card_mod:
      style: |
        ha-card {
          {% if is_state('light.living_room', 'on') %}
            background: rgba(225, 225, 225, 1);
            --primary-text-color: black;
          {%- else -%}
          {%- endif %}
        }
        ha-card {
          {% if is_state('light.living_room', 'off') %}
            background: rgba(150, 150, 150, 0.2);
            --primary-text-color: white;
          {%- else -%}
          {%- endif %}
        }
        ha-card {
          {% if is_state('light.living_room', 'unavailable') %}
            background: rgba(150, 150, 150, 0.2);
            --primary-text-color: white;
        {%- else -%}
        {%- endif %}

        }

5 Likes

Thank you very much! That worked perfectly. I managed to also exclude lights. Thanks!

One more question- Sorry to annoy you that much :smiley:
Is it possible to add a lights on counter i.e like {{ expand(states.light.alle_lichter) | selectattr( 'state', 'eq','on') | list | count }} to that YAML? So i can directly see how many lights are on?

Excellent! :clap: :clap: Just please share you code always. I’m a noob and learning from all the examples posted here.

1 Like

Chips-Main_1
Will try tonight. With stack-in-card I will be able to keep that look? I just did the way I want in photoshop.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: device_tracker.valdemar_silva
    use_entity_picture: true
    name: Junior
  - type: entity
    entity: sensor.junior_phone_battery
    icon_color: green
    icon: mdi:battery
    use_entity_picture: false

not sure if i get it right, you would like to see how many lights are on in the chip?

i think you have it already, they content: states show the state of total lights on

my example
image

1 Like

Got it to work now thanks for all your help!

1 Like

Thank you all for your help. This code finaly works for me.

image

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: sensor.sauna_status
    primary: Sauna
    secondary: >-
      {{ states('sensor.sauna_status') }} |  {{
      states('sensor.temperatur_sauna_banksensor') }}°C
    name: Sauna
    icon: mdi:hydraulic-oil-temperature
    icon_color: blue
    badge_icon: |-
      {% if is_state('switch.sauna_heizung_stufe_1', 'on') -%}
        mdi:radiator
      {%- elif is_state('switch.sauna_heizung_stufe_1', 'off') -%}
        mdi:radiator-off
      {%- else -%}
        mdi:radiator-off
      {%- endif %}
    badge_color: |-
      {% if is_state('switch.sauna_heizung_stufe_1', 'on') -%}
        red
      {%- endif %}
    card_mod:
      style: |
        :host {
              height: 15px;
        }
    tap_action:
      action: navigate
      navigation_path: camere
    hold_action:
      action: more-info
    multiline_secondary: false
  - type: custom:mushroom-chips-card
    alignment: end
    chips:
      - type: action
        tap_action:
          action: call-service
          service: timer.start
          data: {}
          target:
            entity_id: timer.restlauftzeit_sauna
        icon: mdi:play
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: lightgrey;
              --chip-spacing: 0;
              margin-bottom: 15px;
              margin-right: 15px;
            }
      - type: action
        tap_action:
          action: call-service
          service: timer.finish
          data: {}
          target:
            entity_id: timer.restlauftzeit_sauna
        icon: mdi:stop
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: lightgrey;
              --chip-spacing: 0;
              margin-bottom: 15px;
              margin-right: 15px;
            }
                

Basti

2 Likes

Thanks man…what all font family’s are supported in templete card …where can i find the details on supported fonts ?

@rhysb cant able get the result as your card looks?
looks like font is changed but i want something like yours which is sick


added this to resources

/* cyrillic-ext */
@font-face {
  font-family: 'Nabla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nabla/v6/j8_D6-LI0Lvpe7Makz5UhJt9C3uqg_X_75gyGS4jAxsNIjrRBRpeFWR_n9w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* math */
@font-face {
  font-family: 'Nabla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nabla/v6/j8_D6-LI0Lvpe7Makz5UhJt9C3uqg_X_75gyGS4jAxsNIjrRBWteFWR_n9w.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0330, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2034-2037, U+2057, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2102, U+210A-210E, U+2110-2112, U+2115, U+2119-211D, U+2124, U+2128, U+212C-212D, U+212F-2131, U+2133-2138, U+213C-2140, U+2145-2149, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B6, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* vietnamese */
@font-face {
  font-family: 'Nabla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nabla/v6/j8_D6-LI0Lvpe7Makz5UhJt9C3uqg_X_75gyGS4jAxsNIjrRBRheFWR_n9w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nabla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nabla/v6/j8_D6-LI0Lvpe7Makz5UhJt9C3uqg_X_75gyGS4jAxsNIjrRBRleFWR_n9w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nabla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nabla/v6/j8_D6-LI0Lvpe7Makz5UhJt9C3uqg_X_75gyGS4jAxsNIjrRBRdeFQx8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

also I added this by downloading the font tts files and still no luck…

1 Like

  1. Was able to change the icon and slider color, but the button colors are not changed.
  2. Also how can we reduce the height of the slider?

Kindly help

Thanks a LOT!

1 Like

    card_mod:
      style: |
        ha-card {
          --control-height: 20px;
        }

Thank you…

How to change the button colors for media player ?

Is it possible to blur the background image of a card? It can be challenging to read with busy cover art, adding a blur filter is blurring the whole card and I’m having a hard time targeting just the image

type: custom:mushroom-media-player-card
entity: media_player.andrews_room_media
use_media_artwork: true
use_media_info: true
collapsible_controls: true
show_volume_level: false
fill_container: false
tap_action:
  action: call-service
  service: media_player.media_play_pause
  data: {}
  target:
    entity_id: media_player.andrews_room_media
card_mod:
  style: |
    ha-card {
      border-radius: 16px 16px 0px 0px;
      {% if is_state(config.entity, 'playing') or is_state(config.entity, 'paused') %}
        background: rgba(var(--rgb-card-background-color), 0.7) url( '{{ state_attr(config.entity, "entity_picture" ) }}' ) center no-repeat;
        background-size: cover;
        background-blend-mode: overlay;
      {% else %}
      {% endif %}  
    }

Your CSS is not quite right. Should be:

card_mod:
  style:
    mushroom-media-player-media-control$: |
      mushroom-button {
        --bg-color: rgba(var(--rgb-green), 0.05);
      }
    mushroom-media-player-volume-control$: |
      mushroom-button {
        --bg-color: rgba(var(--rgb-green), 0.05);
      }
    .: |
      mushroom-button {
        --bg-color: rgba(var(--rgb-yellow), 0.05);
      }
      :host {
        --mush-rgb-state-media-player: var(--rgb-pink);
      }
2 Likes

How to add fonts to Home Assistant:

  1. Go to https://fonts.google.com/ and find the font you want to use.

  2. Select the font
    Add font
    and then view the selected font
    View selected font

  3. Copy the font URL
    Font URL

  4. In HA, go to Settings → Dashboards and then Resources in the top right corner
    Dashboard Resources

  5. Add the Resource as a Stylesheet


    and you should see your new font resource listed
    Check resource

  6. Go back to Google Fonts and copy the CSS Rule for the font
    CSS rule

  7. Add the CSS to your card

type: custom:mushroom-template-card
icon: mdi:mushroom
icon_color: orange
primary: Mushroom
card_mod:
  style:
    mushroom-state-info$: |
      .primary {
        font-family: 'Bungee Spice', cursive;
        --card-primary-font-size: 30px;
      }
  1. Or to your theme if you want to use it globally
    # Fonts
    primary-font-family: 'Bungee Spice, cursive'
    paper-font-common-base_-_font-family: "var(--primary-font-family)"
    paper-font-common-code_-_font-family: "var(--primary-font-family)"
    paper-font-body1_-_font-family: "var(--primary-font-family)"
    paper-font-subhead_-_font-family: "var(--primary-font-family)"
    paper-font-headline_-_font-family: "var(--primary-font-family)"
    paper-font-caption_-_font-family: "var(--primary-font-family)"
    paper-font-title_-_font-family: "var(--primary-font-family)"
    ha-card-header-font-family: "var(--primary-font-family)"
13 Likes