Mushroom Inspiration!

Share your Projects! Dashboards & Frontend
24

Conditional Chip Card to show whether it is garbage or recycling today or tomorrow. Hidden other days.

You need the Garbage Collection integration in HACS: Garbage-Collection/README.md at master · bruxy70/Garbage-Collection · GitHub

When you create the helper, make sure to check “Verbose state” and in the code change sensor.garbage_recycling and sensor.trash_collection to your helper you create.

Garbage

Code 
type: conditional
conditions:
  - entity: sensor.garbage_recycling
    state: today
chip:
  type: template
  icon: mdi:recycle
  icon_color: green
  content: Today

type: conditional
conditions:
  - entity: sensor.garbage_recycling
    state: tomorrow
chip:
  type: template
  icon: mdi:recycle
  icon_color: green
  content: Tomorrow

type: conditional
conditions:
  - entity: sensor.trash_collection
    state: tomorrow
chip:
  type: template
  icon: mdi:trash-can
  icon_color: grey
  content: Tomorrow

type: conditional
conditions:
  - entity: sensor.trash_collection
    state: today
chip:
  type: template
  icon: mdi:trash-can
  icon_color: grey
  content: Today
19 Likes
25

Wow! This is great. Did some searching and also found below. Sticky back arrow at the left top of the page. Great for mobile use.

type: custom:mushroom-chips-card
chips:
  - type: action
    icon: mdi:arrow-left
    tap_action:
      action: navigate
      navigation_path: home
alignment: justify
card_mod:
  style: |
    :host {
      z-index: 999;
      position: sticky;
      position: -webkit-sticky;
      top: var(--header-height);
    }
    ha-card {
      margin-left: 10px;
      margin-top: 10px;
      margin-right: 10px;
    }
10 Likes
26

My Input-time Card: This card is used with automations to start an alarm, light or anything that you want to control inside of Mushroom! This is very handy and a nice looking card.

This is the same card but with and without background on the buttons. This Card is done by ArenaCloser, so special thanks to him, THANKS! I just changed the the card to fit my needs.

This one is a little tricky to get right, look at the code and also read ArenaCloser input on the Mushroom topic.

ArenaCloser

What you need is the following;

  1. DateTime Helper (time only).
  2. One script for the plus button.
Plus Script: 
service: input_datetime.set_datetime
data:
  time: >-
    {{as_timestamp(as_datetime(state_attr('input_datetime.mushroom','timestamp'))
    + timedelta(minutes=+15))| timestamp_custom('%H:%M', false) }}
target:
  entity_id: input_datetime.mushroom
  1. One script for the minus button.
Minus Script: 
service: input_datetime.set_datetime
data:
  time: >-
    {{as_timestamp(as_datetime(state_attr('input_datetime.mushroom','timestamp'))
    + timedelta(minutes=-15))| timestamp_custom('%H:%M', false) }}
target:
  entity_id: input_datetime.mushroom
  1. One automation (to turn on/or do something).
Simple Automation: 
alias: Mushroom - Datetime Auto
description: ""
trigger:
  - platform: time
    at: input_datetime.mushroom
condition: []
action:
  - service: light.turn_on
    data: {}
    target:
      entity_id: light.sovrum
mode: single
  1. The code for the card (two cards in a grid)
DateTime Card: 
square: false
columns: 2
type: grid
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Väckning
        secondary: |-
          {% if is_state('automation.mushroom_datetime_auto', 'on') %}
           På
          {% else %}
            Av
          {% endif %}
        icon: mdi:alarm
        entity: ''
        icon_color: |-
          {% if is_state('automation.mushroom_datetime_auto', 'on') %}
           green
          {% else %}
            grey
          {% endif %}
        tap_action:
          action: call-service
          service: automation.toggle
          data: {}
          target:
            entity_id: automation.mushroom_datetime_auto
        hold_action:
          action: more-info
      - type: custom:layout-card
        layout_type: masonry
        layout:
          width: 221
          max_cols: 1
          height: auto
          padding: 0px
          card_margin: var(--masonry-view-card-margin, 0px 0px 0px)
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:minus
            tap_action:
              action: call-service
              service: script.mushroom_datetime_minus
          - type: template
            entity: input_datetime.mushroom
            content: >-
              {{(state_attr('input_datetime.mushroom','timestamp')) |
              timestamp_custom('%H:%M', false) }}
          - type: template
            icon: mdi:plus
            tap_action:
              action: call-service
              service: script.mushroom_datetime_plus
        alignment: center
        card_mod:
          style: |
            ha-card {
              margin: -2px 0px 12px;
              --chip-background: rgba(var(--rgb-disabled), 0.15);
              --chip-border-width: 0;
              --chip-border-radius: 12px;
              --chip-height: 40px;
              --chip-padding: 12px;
              --chip-spacing: 1px;
            }
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Väckning
        secondary: |-
          {% if is_state('automation.mushroom_datetime_auto', 'on') %}
           På
          {% else %}
            Av
          {% endif %}
        icon: mdi:alarm
        entity: ''
        icon_color: |-
          {% if is_state('automation.mushroom_datetime_auto', 'on') %}
           green
          {% else %}
            grey
          {% endif %}
        tap_action:
          action: call-service
          service: automation.toggle
          data: {}
          target:
            entity_id: automation.mushroom_datetime_auto
        hold_action:
          action: more-info
        card_mod: null
        style: |
          ha-card:after {
          content: '';
          border-bottom: solid 1px rgba(var(--rgb-disabled), 0.2);
          margin: 15px 0px -12px;
          }
      - type: custom:layout-card
        layout_type: masonry
        layout:
          width: 221
          max_cols: 1
          height: auto
          padding: 0px
          card_margin: var(--masonry-view-card-margin, 0px 0px 0px)
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:minus
            tap_action:
              action: call-service
              service: script.mushroom_datetime_minus
          - type: template
            entity: input_datetime.mushroom
            content: >-
              {{(state_attr('input_datetime.mushroom','timestamp')) |
              timestamp_custom('%H:%M', false) }}
          - type: template
            icon: mdi:plus
            tap_action:
              action: call-service
              service: script.mushroom_datetime_plus
        alignment: center
        card_mod:
          style: |
            ha-card {
              margin: -1px 0px 5px;
              --chip-border-width: 0;
              --chip-border-radius: 12px;
              --chip-height: 42px;
              --chip-padding: 10px;
              --chip-spacing: 1px;
            }

Screenshot_20221113_181122_Home Assistant
Screenshot_20221113_181122_Home Assistant1080×409 47.2 KB

17 Likes
27

How do I get 3 lights in one row. somtinhing with vertical stack card and colums? Can you post the code of lights also

28

Hello,


type: vertical-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: entity
        entity: sensor.office_motion_sensor_temperature
        icon_color: green
      - type: conditional
        conditions:
          - entity: binary_sensor.office_right_window_sensor
            state: 'on'
        chip:
          type: entity
          entity: binary_sensor.office_right_window_sensor
          icon_color: red
          icon: mdi:window-open-variant
      - type: conditional
        conditions:
          - entity: binary_sensor.office_motion_sensor_motion
            state: 'on'
        chip:
          type: entity
          entity: binary_sensor.office_motion_sensor_motion
          icon_color: red
          content_info: none
      - type: conditional
        conditions:
          - entity: group.office_all_lamps
            state: 'on'
        chip:
          type: template
          icon: mdi:lightbulb
          content: >-
            {{ expand(states.group.office_all_lamps,) | selectattr( 'state',
            'eq', 'on') | list | count }}
          entity: group.office_all_lamps
          icon_color: amber
          tap_action:
            action: none
    alignment: start
  - square: false
    columns: 3
    type: grid
    title: Lights
    cards:
      - type: custom:mushroom-light-card
        entity: light.table_lamp_1
        use_light_color: true
        show_brightness_control: true
        name: Work
      - type: custom:mushroom-light-card
        entity: light.table_lamps_office
        use_light_color: true
        show_brightness_control: true
        icon: hue:table-shade
        name: Table
      - type: custom:mushroom-light-card
        entity: light.office_all_lamps
        show_brightness_control: true
        use_light_color: true
        icon: mdi:lightbulb-group-outline
        name: All Lamp
1 Like
29

This is amazing.
Any way to identify actual page and highlight on navigation bar?

1 Like
30

Just change the background of the respective icon for each individual page

2 Likes
31

This is my Apple-inspired overview for the current fuel prices.
image

It uses this integration in HACS (for The Netherlands): GitHub - metbril/home-assistant-brandstofprijzen: Home Assistant component for fuel prices from United Consumers

Code 
type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 70% 30%
      grid-gap: 0px;
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.brandstofprijs_euro95
        primary: Euro 95
        secondary: ''
        icon: mdi:currency-eur
        icon_color: orange
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: -4px -7px;
            }
      - type: custom:mushroom-template-card
        entity: sensor.brandstofprijs_euro95
        primary: '{{states(entity)}}'
        secondary: ''
        card_mod:
          style:
            mushroom-state-info$: |
              * {
                text-align: end;
                font-family: 'SF Pro Rounded';
              }
            .: |
              ha-card {
                margin: 6px 2px -6px 0px;
                box-shadow: none;
              }
  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-card {
          margin: -25px 0px 0px 66px;
          border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
        }
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 70% 30%
      grid-gap: 0px;
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.brandstofprijs_super
        primary: Super
        secondary: ''
        icon: mdi:engine
        icon_color: orange
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: -4px -7px;
            }
      - type: custom:mushroom-template-card
        entity: sensor.brandstofprijs_super
        primary: '{{states(entity)}}'
        secondary: ''
        card_mod:
          style:
            mushroom-state-info$: |
              * {
                text-align: end;
                font-family: 'SF Pro Rounded';
              }
            .: |
              ha-card {
                margin: 6px 2px -6px 0px;
                box-shadow: none;
              }
  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-card {
          margin: -25px 0px 0px 66px;
          border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
        }
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 70% 30%
      grid-gap: 0px;
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.brandstofprijs_diesel
        primary: Diesel
        secondary: ''
        icon: mdi:gas-station
        icon_color: orange
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: -4px -7px;
            }
      - type: custom:mushroom-template-card
        entity: sensor.brandstofprijs_diesel
        primary: '{{states(entity)}}'
        secondary: ''
        card_mod:
          style:
            mushroom-state-info$: |
              * {
                text-align: end;
                font-family: 'SF Pro Rounded';
              }
            .: |
              ha-card {
                margin: 6px 2px -6px 0px;
                box-shadow: none;
              }
5 Likes
32

i´ve added it, still it doesn´t stick to the bottom. is there a way to move it all the way down or do i have to so it with empty cards?`

IMG_3591.PNG
IMG_3591.PNG1170×2532 135 KB

3 Likes
33 
type: custom:gap-card
height: 1000

throw this in the middle of your screen

3 Likes
34

Your page needs to be scrollable so as @alexandrechoske said adding a gap card before the nav bar will work.

Also simplified the code for the nav bar a little

IMG_5718
IMG_57181289×665 61 KB

Sticky Nav Bar 
type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:mushroom-template-card
    primary: Home
    icon: mdi:home
    tap_action:
      action: navigate
      navigation_path: home
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            width: 66px !important;
            height: 36px !important;
          }
        .: |
          ha-card {    
            background: none;
          }
          :host {
            --mush-icon-border-radius: 16px;
          }
  - type: custom:mushroom-template-card
    primary: Media
    icon: mdi:play-box-multiple-outline
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            width: 66px !important;
            height: 36px !important;
            --shape-color: none;
          }
        .: |
          ha-card {    
            background: none;
          }
          :host {
            --mush-icon-border-radius: 16px;
          }
  - type: custom:mushroom-template-card
    primary: Energy
    icon: mdi:lightning-bolt-outline
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            width: 66px !important;
            height: 36px !important;
            --shape-color: none;
          }
        .: |
          ha-card {    
            background: none;
          }
          :host {
            --mush-icon-border-radius: 16px;
          }
  - type: custom:mushroom-template-card
    primary: Map
    icon: mdi:map-outline
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            width: 66px !important;
            height: 36px !important;
            --shape-color: none;
          }
        .: |
          ha-card {    
            background: none;
          }
          :host {
            --mush-icon-border-radius: 16px;
          }
card_mod:
  style: |
    :host {
      z-index: 999;
      position: sticky;
      position: -webkit-sticky;
      bottom: 0;
    }
    ha-card {    
      background: rgb(30,30,30);
      padding-bottom: 15px;
      margin: 0px -8px -10px -8px;
      border-radius: 0px;
    }
14 Likes
35

i just modified the ios-tapbar-theme from minimalist ui to match it for my needs.

IMG_3602.PNG
IMG_3602.PNG1170×2532 128 KB 

---
ios-tapbar:
  # version 1.0.1
  # By LRvdLinden
  # Journal
  state-icon-color: "rgb(var(--color-theme))"
  border-radius: "20px"
  ha-card-border-radius: "var(--border-radius)"
  ha-card-border-width: 0
  error-color: "var(--google-red)"
  warning-color: "var(--google-yellow)"
  success-color: "var(--google-green)"
  info-color: "var(--google-blue)"
  divider-color: "rgba(var(--color-theme),.12)"
  accent-color: "var(--google-yellow)"
  card-mod-theme: "ios-tapbar"
  card-mod-root: |
    app-toolbar {
      display: none;
    }
  header-height: "58px"
  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
  # Move navbar
  card-mod-root-yaml: |
    ha-tabs$: |
      #tabsContent {
        width: 97%;
      }
    .: |
      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
          display: none !important;
        }
        app-toolbar {
          padding-right: 0px;
          padding-left: 0px;
        }
      }
      ha-app-layout{
        transform: initial;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        height: 100% !important;
      }
      app-header {
        top: auto;
        bottom: 0;
        box-shadow: var(--footer-shadow);
        position: fixed;
        height: var(--header-height) !important;
      }
      app-toolbar {
        height: var(--header-height) !important;
        padding: 10px 10px !important;
        background: var( --ha-card-background, var(--card-background-color) );
      }
      #view {
        margin-top: calc(-1 * var(--header-height)) !important;
        padding-bottom: var(--header-height) !important;
      }
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important;
        --mdc-icon-size: 24px;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        margin-top: 15px;
        height:var(--header-height) !important;
      }
      paper-tab[aria-selected=true] {
        color: var(--google-blue); 
      }
      paper-tab {
        color: var(--header-all-tabs-color);
        border-radius: 5px;
        height: 32px;
        padding: 0 20px;
      }
  # Color themes
  modes:
    light:
      # main interface colors
      primary-color: "#434343"
      google-red: "#F54436"
      google-green: "#01C852"
      google-yellow: "#FF9101"
      google-blue: "#3D5AFE"
      google-violet: "#661FFF"
      google-grey: "#BBBBBB"
      color-red: "245, 68, 54"
      color-green: "1, 200, 82"
      color-yellow: "255, 145, 1"
      color-blue: "61, 90, 254"
      color-purple: "102, 31, 255"
      color-grey: "187, 187, 187"
      color-pink: "233, 30, 99"
      color-theme: "51,51,51"
      color-background-yellow: "250, 250, 250"
      color-background-blue: "250, 250, 250"
      color-background-green: "250, 250, 250"
      color-background-red: "250, 250, 250"
      color-background-pink: "250, 250, 250"
      color-background-purple: "250, 250, 250"
      color-yellow-text: "var(--primary-text-color)"
      color-blue-text: "var(--primary-text-color)"
      color-green-text: "var(--primary-text-color)"
      color-red-text: "var(--primary-text-color)"
      color-pink-text: "var(--primary-text-color)"
      color-purple-text: "var(--primary-text-color)"
      opacity-bg: "1"
      # Header / Footer
      header-active-tab-color: "rgb(var(--color-blue))"
      header-active-tab-bg-color: "rgba(var(--color-blue), .3)"
      header-all-tabs-color: "var(--paper-item-icon-color)"
      header-tab-indicator-color: "rgba(0, 0, 0, 0)"
      app-header-text-color: "var(--primary-text-color)"
      app-header-background-color: "var(--primary-background-color)"
      paper-tabs-selection-bar-color: "var(--primary-text-color)"
      footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
      # background and sidebar
      card-background-color: "#FAFAFA"
      primary-background-color: "#EFEFEF"
      secondary-background-color: "#EFEFEF"
      # text
      primary-text-color: "#212121"
      # slider
      slider-color: "rgb(var(--google-blue))"
      slider-bar-color: "rgba(var(--google-blue),0.38)"
      # cards
      box-shadow: "0px 2px 4px 0px rgba(0,0,0,0.16)"
      ha-card-box-shadow: "var(--box-shadow)"
      # sidebar
      sidebar-selected-text-color: "rgb(var(--color-blue))"
      sidebar-selected-icon-color: "rgb(var(--color-blue))"
      sidebar-text-color: "#80868b"
      # switch
      switch-checked-color: "rgb(var(--color-blue))"
      # media player
      mini-media-player-accent-color: "rgb(var(--color-blue))"
    dark:
      # main interface colors
      primary-color: "#89B3F8"
      google-red: "#F18B82"
      google-green: "#80C994"
      google-yellow: "#FCD663"
      google-blue: "#2196F3"
      google-violet: "#BB86FC"
      google-grey: "#BBBBBB"
      color-red: "241, 139, 130"
      color-green: "128, 201, 148"
      color-yellow: "252, 214, 99"
      color-blue: "137, 179, 248"
      color-theme: "221,221,221"
      color-purple: "102, 31, 255"
      color-grey: "187, 187, 187"
      color-pink: "233, 30, 99"
      color-amber: "255, 145, 1"
      color-background-yellow: "var(--color-yellow)"
      color-background-blue: "var(--color-blue)"
      color-background-green: "var(--color-green)"
      color-background-red: "var(--color-red)"
      color-background-pink: "var(--color-pink)"
      color-background-purple: "var(--color-purple)"
      color-yellow-text: "var(--color-yellow)"
      color-blue-text: "var(--color-blue)"
      color-green-text: "var(--color-green)"
      color-red-text: "var(--color-red)"
      color-pink-text: "var(--color-pink)"
      color-purple-text: "var(--color-purple)"
      opacity-bg: "0.1"
      # Header / Footer
      header-active-tab-color: "rgb(var(--color-amber))"
      header-active-tab-bg-color: "rgba(var(--color-amber), .3)"
      header-all-tabs-color: "var(--paper-item-icon-color)"
      header-tab-indicator-color: "rgba(0, 0, 0, 0)"
      app-header-text-color: "var(--primary-text-color)"
      app-header-background-color: "var(--primary-background-color)"
      paper-tabs-selection-bar-color: "var(--primary-text-color)"
      footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
      # background and sidebar
      card-background-color: "#1D1D1D"
      primary-background-color: "#121212"
      secondary-background-color: "#121212"
      # text
      primary-text-color: "#DDDDDD"
      # floating button text color
      mdc-theme-on-secondary: "var(--card-background-color)"
      # Sidebar
      sidebar-selected-text-color: "rgb(var(--color-amber))"
      sidebar-selected-icon-color: "rgb(var(--color-amber))"
      # Slider
      slider-color: "rgb(var(--color-blue))"
      slider-bar-color: "rgba(var(--color-blue),0.38)"
      # card
      box-shadow: "none"
      # media player
      mini-media-player-accent-color: "var(--google-blue)"
      # Journal
      state-icon-color: "rgb(var(--color-theme))"
9 Likes
36

these modifications are only on theme?
I mean, the code is the same but theme modify only the bar?

37

nah it also changes a few colors of HA itself. mushroom shouldn´t be affected tho.

1 Like
38

image

Playing Around with with Mushroom - Many things to do and clean up some code. But here is Version 0.03 for you if interested :smiley:

type: custom:vertical-stack-in-card
title: Wohnzimmer
style: |
  .card-header {
      padding: 6px 16px 2px !important;
  }
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.temp_xx_humidity
      - type: entity
        entity: sensor.temp_xx_temperature
    alignment: end
    style: |
      .chip-container {
          padding-right: 14px;
          margin-top: -40px
      }
  - type: custom:mushroom-light-card
    entity: light.lampe_xx
    show_brightness_control: true
    collapsible_controls: true
    layout: horizontal
    name: Lampe Links
  - type: custom:mushroom-light-card
    entity: light.lampe_xx
    show_brightness_control: true
    collapsible_controls: true
    layout: horizontal
    name: Lampe Rechts
  - type: custom:mushroom-media-player-card
    entity: media_player.xx
    layout: horizontal
    show_volume_level: false
    media_controls:
      - on_off
    volume_controls:
      - volume_set
    icon: mdi:television
    name: Sony Fernseher
    use_media_info: true
  - type: custom:mushroom-climate-card
    entity: climate.heizung_xx
    layout: horizontal
    fill_container: true
    show_temperature_control: true
    collapsible_controls: false
    name: Thermostate
    tap_action:
      action: more-info
  - type: custom:mushroom-chips-card
    alignment: end
    style: |
      ha-card {
          z-index:9;
      }
      .chip-container {
          padding: 14px;
      }
    chips:
      - type: template
        entity: binary_sensor
        icon: >
          {% set state=states('binary_sensor.heizung_xx_window_open') %}
          {% if state=='off' %}
          mdi:window-closed-variant
          {% elif state=='on' %}
          mdi:window-open-variant
          {% endif %}
        icon_color: >
          {% set state=states('binary_sensor.heizung_xx_window_open') %}
          {% if state=='on' %}
          orange
          {% endif %}
        content: >
          {% set state=states('binary_sensor.heizung_xx_window_open') %}
          {% if state=='off' %}
          Fenster geschlossen!
          {% elif state=='on' %}
          Fenster offen!
          {% endif %}
      - type: template
        entity: switch.heizung_xx_window_open_force
        content: >
          {% set state=states('switch.heizung_xx_window_open_force') %}
          {% if state=='on' %}
          Lüften Aktiv!
          {% elif state=='off' %}
          Lüften!
          {% endif %}
        icon: >
          {% set state=states('switch.heizung_xx_window_open_force') %}
          {% if state=='on' %}
          mdi:window-open-variant
          {% elif state=='off' %}
          mdi:window-closed-variant
          {% endif %}
        icon_color: >
          {% set state=states('switch.heizung_xx_window_open_force') %}
          {% if state=='on' %}
          orange
          {% endif %}
      - type: template
        entity: climate.heizung_xx
        icon: >
          {% set battery_level = state_attr('switch.heizung_xx_window_open_force','battery')|int('unknown') %} 
          {% set battery_round = (battery_level|int / 10)|int * 10 %} 
          {% if battery_level == 'unknown' %}
            mdi:battery-unknown
          {% else %}
            {% if battery_round >= 100 %}
              mdi:battery
            {% elif battery_round > 0 %}
              mdi:battery-{{ battery_round }}
            {% else %}
              mdi:battery-alert
            {% endif %}
          {% endif %}
        content: '{{ state_attr(''climate.heizung_xx'',''battery'') }} %'
        name: Battery
        tap_action:
          action: more-info
  - type: custom:mini-graph-card
    entities:
      - sensor.temp_xx
    animate: true
    hour24: true
    font_size: 75
    line_width: 4
    points_per_hour: 1
    style: |
      ha-card {
          margin-top: -67px;
          z-index: 1;
      }
    show:
      name: false
      icon: false
      legend: false
      labels: true
19 Likes
39

This is my first card of my dashboard:

image

home battery status, with percentage and solar input
Device status, from the left:

Link to the security page
doors status
windows status
lights status
Thermostat status
heated towel rails status

each of the status button light orange when something is on, if you touch one it open a popup with the list of entities on.

image
image632×533 18.7 KB

code:

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Utilità
  - type: custom:stack-in-card
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 45% 55%
          margin: '-4px -4px -8px -4px;'
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.powerwall_solar_now
            name: Batteria
            icon: mdi:home-battery-outline
            icon_color: teal
            icon_type: icon
            tap_action:
              action: navigate
              navigation_path: energia
          - type: custom:bar-card
            entity: sensor.powerwall_charge
            severity:
              - from: '0'
                color: orange
                to: '25'
              - from: '26'
                to: '49'
                color: orange
              - from: '50'
                to: '100'
                color: teal
            name: ' '
            height: 42px
            min: '0'
            max: '100'
            entity_row: true
            color: teal
            positions:
              icon: 'off'
              indicator: 'off'
            card_mod:
              style: |
                ha-card {
                  padding: 12px;
                  margin-left: 12px;
                  --bar-card-border-radius: 12px;
                }
                bar-card-value {
                  margin: 12px;
                  font-size: 12px;
                  font-weight: bolder;
                }
                bar-card-backgroundbar {
                  opacity: 0.2;
                  filter: brightness(1);
                }
  - square: false
    columns: 6
    type: grid
    cards:
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:home-alert
        tap_action:
          action: navigate
          navigation_path: sicurezza
        icon_color: orange
        multiline_secondary: true
        badge_icon: mdi:link
        badge_color: orange
        fill_container: false
        layout: horizontal
      - type: custom:mushroom-entity-card
        entity: binary_sensor.porte
        primary_info: none
        secondary_info: none
        layout: vertical
        icon_color: orange
        fill_container: false
        name: Porte
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Porte aperte
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - group: binary_sensor.porte
                      state: 'on'
                      options:
                        type: custom:mushroom-entity-card
                        layout: horizontal
                        secondary_info: last-changed
                        tap_action:
                          action: none
                        hold_action:
                          action: none
                        card_mod:
                          style: |
                            ha-card {
                              padding: 4px 12px !important;
                            }
                  exclude: []
                show_empty: false
                card:
                  type: custom:layout-card
                  cards: []
                  layout_type: masonry
                sort:
                  method: friendly_name
      - type: custom:mushroom-entity-card
        entity: binary_sensor.finestre
        primary_info: none
        secondary_info: none
        layout: vertical
        icon_color: orange
        fill_container: false
        name: Finestre
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Finestre aperte
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - group: binary_sensor.finestre
                      state: 'on'
                      options:
                        type: custom:mushroom-entity-card
                        layout: horizontal
                        secondary_info: last-changed
                        tap_action:
                          action: none
                        hold_action:
                          action: none
                        card_mod:
                          style: |
                            ha-card {
                              padding: 4px 12px !important;
                            }
                  exclude: []
                show_empty: false
                card:
                  type: custom:layout-card
                  cards: []
                  layout_type: masonry
                sort:
                  method: friendly_name
      - type: custom:mushroom-entity-card
        entity: light.luci
        primary_info: none
        secondary_info: none
        layout: vertical
        icon_color: orange
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        fill_container: false
        name: Luci
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Luci accese
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - group: light.luci
                      state: 'on'
                      options:
                        type: custom:mushroom-light-card
                        show_brightness_control: true
                        layout: horizontal
                        tap_action:
                          action: toggle
                        use_light_color: true
                        card_mod:
                          style: |
                            ha-card {
                              padding: 4px 12px !important;
                            }
                  exclude: []
                card:
                  type: custom:layout-card
                  cards: []
                  layout_type: masonry
                sort:
                  method: friendly_name
      - type: custom:mushroom-entity-card
        entity: binary_sensor.stato_termostati
        primary_info: none
        secondary_info: none
        layout: vertical
        icon: mdi:thermostat
        icon_color: orange
        fill_container: false
        name: Termostati
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Termostati accesi
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - domain: climate
                      integration: knx
                      options:
                        type: custom:mushroom-climate-card
                        show_temperature_control: true
                        layout: horizontal
                        tap_action:
                          action: none
                        hold_action:
                          action: none
                        card_mod:
                          style: |
                            ha-card {
                              padding: 4px 12px !important;
                            }
                  exclude:
                    - attributes:
                        hvac_action: idle
                show_empty: false
                card:
                  type: custom:layout-card
                  cards: []
                  layout_type: masonry
                sort:
                  method: friendly_name
      - type: custom:mushroom-entity-card
        entity: switch.termobagno
        primary_info: none
        secondary_info: none
        icon_color: orange
        fill_container: false
        name: Termobagno
        layout: horizontal
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Termobagno accesi
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - group: switch.termobagno
                      state: 'on'
                      options:
                        type: custom:mushroom-entity-card
                        layout: horizontal
                        secondary_info: last-changed
                        tap_action:
                          action: toggle
                        hold_action:
                          action: none
                        card_mod:
                          style: |
                            ha-card {
                              padding: 4px 12px !important;
                            }
                  exclude:
                    - attributes:
                        hvac_action: idle
                show_empty: false
                card:
                  type: custom:layout-card
                  cards: []
                  layout_type: masonry
                sort:
                  method: friendly_name

EDIT:

just made the battery card more mushroom like:
image
image

added the badge when is charging, made the bar looking more like a mushroom card

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 45% 55%
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.powerwall_charge
        primary: Batteria
        secondary: '{{states(''sensor.powerwall_charge'') }}%'
        icon: mdi:home-battery-outline
        icon_color: teal
        icon_type: icon
        badge_icon: "{% if is_state('binary_sensor.powerwall_charging','on') %}\n\_\_mdi:arrow-up-bold\n{% endif %}"
        badge_color: "{% if is_state('binary_sensor.powerwall_charging','on') %}\n\_\_teal\n{% endif %}"
        tap_action:
          action: navigate
          navigation_path: energia
      - type: custom:bar-card
        entity: sensor.powerwall_charge
        severity:
          - from: '0'
            color: gray
            to: '0'
          - from: '1'
            to: '49'
            color: teal
          - from: '50'
            to: '100'
            color: teal
        name: ' '
        height: 42px
        min: '0'
        max: '100'
        entity_row: true
        color: teal
        positions:
          icon: 'off'
          indicator: 'off'
          value: 'off'
        card_mod:
          style: |
            ha-card {
              padding: 12px;
              margin-left: 12px;
              --bar-card-border-radius: 12px;
            }
            bar-card-backgroundbar {
              opacity: 0.2;
              filter: brightness(1);
            }
16 Likes
40

i applied your theme now, but the slider for input_number disappeared hahaha
i did not tested on another helpers tho…

do you know the code to set a color for it?

41

hmm, i also just copied it and modified it a bit :smiley:

but i guess it´s one of those:

      # slider
      slider-color: "rgb(var(--google-blue))"
      slider-bar-color: "rgba(var(--google-blue),0.38)"

it´s under light: and dark:

guess i´ll remove all the variables but the one you need to get the bar to the bottom when i got some sparetime…

42

try this one, it shouldn´t change any colors

Code 
---
Bottom_navbar:
  border-radius: "20px"
  ha-card-border-radius: "var(--border-radius)"
  ha-card-border-width: 0
  card-mod-theme: "Bottom_navbar"
  card-mod-root: |
    app-toolbar {
      display: none;
    }
  header-height: "58px"
  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
  card-mod-root-yaml: |
    ha-tabs$: |
      #tabsContent {
        width: 97%;
      }
    .: |
      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
          display: none !important;
        }
        app-toolbar {
          padding-right: 0px;
          padding-left: 0px;
        }
      }
      ha-app-layout{
        transform: initial;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        height: 100% !important;
      }
      app-header {
        top: auto;
        bottom: 0;
        box-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)";
        position: fixed;
        height: var(--header-height) !important;
      }
      app-toolbar {
        height: var(--header-height) !important;
        padding: 10px 10px !important;
        background: var( --ha-card-background, var(--card-background-color) );
      }
      #view {
        margin-top: calc(-1 * var(--header-height)) !important;
        padding-bottom: var(--header-height) !important;
      }
      ha-tabs {
        --paper-tabs-selection-bar-color: "rgba(0, 0, 0, 0)" !important;
        --mdc-icon-size: 24px;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        margin-top: 15px;
        height:var(--header-height) !important;
      }
      paper-tab[aria-selected=true] {
        color: var(--google-blue); 
      }
      paper-tab {
        color: var(--header-all-tabs-color);
        border-radius: 5px;
        height: 32px;
        padding: 0 20px;
      }
# Modes
  modes:
    light: {}
    dark: {}
43

Similar to the overview for fuel prices, here is my Apple-like stock market card, using the Yahoo Finance integration: GitHub - iprak/yahoofinance: Home Assistant component which allows you to get stock updates from Yahoo finance.

image

Code 
    type: custom:stack-in-card
    mode: vertical
    cards:
      - type: custom:layout-card
        layout_type: grid
        layout:
          grid-template-columns: 70% 30%
          grid-gap: 0px;
        cards:
          - type: custom:mushroom-template-card
            entity: sensor.yahoofinance_aex
            primary: ^AEX
            secondary: '{{state_attr(entity, ''friendly_name'')}}'
            icon: mdi:currency-eur
            icon_color: grey
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape:after {
                    font-size: 20px;
                    content: '🇳🇱';
                  }
                  ha-icon {
                    width: 0px !important;
                  }
                .: |
                  ha-card {
                    box-shadow: none;
                    margin: -4px -7px;
                  }
          - type: custom:mushroom-template-card
            entity: sensor.yahoofinance_aex
            primary: '{{states(entity)}}'
            secondary: |
              {% if state_attr(entity, 'trending') == "up" %}+{% endif
              %}{{state_attr(entity,'regularMarketChangePercent')}}%
            card_mod:
              style:
                mushroom-state-info$: |
                  * {
                    text-align: end;
                    font-family: 'SF Pro Rounded';
                  }
                .: |
                  ha-card {
                    --secondary-text-color: {% if state_attr(config.entity, 'trending') == "up" %}rgba(var(--rgb-green)){% else %}rgba(var(--rgb-red)){% endif %};
                    margin: -3px 2px -6px 0px;
                    box-shadow: none;
                  }
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              margin: -25px 0px 0px 66px;
              border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
            }
      - type: custom:layout-card
        layout_type: grid
        layout:
          grid-template-columns: 70% 30%
          grid-gap: 0px;
        cards:
          - type: custom:mushroom-template-card
            entity: sensor.yahoofinance_vusa_as
            primary: VUSA.AS
            secondary: '{{state_attr(entity, ''friendly_name'')}}'
            icon: '{{state_attr(entity,"icon")}}'
            icon_color: grey
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                  margin: -4px -7px;
                }
          - type: custom:mushroom-template-card
            entity: sensor.yahoofinance_vusa_as
            primary: '{{states(entity)}}'
            secondary: |
              {% if state_attr(entity, 'trending') == "up" %}+{% endif
              %}{{state_attr(entity,'regularMarketChangePercent')}}%
            card_mod:
              style:
                mushroom-state-info$: |
                  * {
                    text-align: end;
                    font-family: 'SF Pro Rounded';
                  }
                .: |
                  ha-card {
                    --secondary-text-color: {% if state_attr(config.entity, 'trending') == "up" %}rgba(var(--rgb-green)){% else %}rgba(var(--rgb-red)){% endif %};
                    margin: -3px 2px -6px 0px;
                    box-shadow: none;
                  }

Just adding my old version here as well, should anyone prefer this one:

image
image752×158 42.2 KB

Code 
square: false
columns: 2
type: grid
cards:
  - type: custom:mushroom-template-card
    entity: sensor.yahoofinance_aex
    icon: '{{state_attr(entity,"icon")}}'
    icon_color: >-
      {% if state_attr(entity,'regularMarketChangePercent')|float > 0 %} green
      {% else %} red {% endif %}
    primary: '{{state_attr(entity, "friendly_name")}}'
    multiline_secondary: true
    secondary: >-
      € {{states(entity)}} ({% if state_attr(entity, 'trending') == "up" %}+{%
      endif %}{{state_attr(entity,'regularMarketChangePercent')}}%)
    tap_action:
      action: more-info
    fill_container: true
    card_mod:
      style: |
        ha-card {
          --secondary-text-color: {% if state_attr('sensor.yahoofinance_aex', 'trending') == "up" %}rgba(var(--rgb-green)){% else %}rgba(var(--rgb-red)){% endif %};
        }
  - type: custom:mushroom-template-card
    entity: sensor.yahoofinance_vusa_as
    icon: '{{state_attr(entity,"icon")}}'
    icon_color: >-
      {% if state_attr(entity,'regularMarketChangePercent')|float > 0 %} green
      {% else %} red {% endif %}
    primary: '{{state_attr(entity, "friendly_name")}}'
    multiline_secondary: true
    secondary: >-
      € {{states(entity)}} ({% if state_attr(entity, 'trending') == "up" %}+{%
      endif %}{{state_attr(entity,'regularMarketChangePercent')}}%)
    tap_action:
      action: more-info
    fill_container: true
    card_mod:
      style: |
        ha-card {
          --secondary-text-color: {% if state_attr('sensor.yahoofinance_vusa_as', 'trending') == "up" %}rgba(var(--rgb-green)){% else %}rgba(var(--rgb-red)){% endif %};
        }
11 Likes