Mushroom Cards Card Mod Styling/Config Guide

Nice. Can you share the office thermostat graph config?

Sure, its a bit sensitive to screen size i think.

Needs some scripts and input booleans to work too.

type: custom:stack-in-card
cards:
  - type: grid
    square: false
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.office_heating
        name: Thermostat
        secondary_info: none
        show_temperature_control: true
        collapsible_controls: true
        layout: horizontal
        tap_action:
          action: call-service
          service: script.temp_toggle_office
          target: {}
        card_mod:
          style:
            mushroom-climate-temperature-control$:
              mushroom-input-number$: |
                #container {
                  position: relative;
                  width: 135%;
                  right: 35%;
                  z-index: 1 !important;
                }
                #container .button:nth-child(1) {
                  height: 25px !important;
                  width: 50px !important;
                  border-radius: 10px;
                  background: rgba(var(--rgb-red),0.3);
                }
                .minus {
                  padding-right: 5px !important;
                }
                #container .button:nth-child(3) {
                  height: 25px !important;
                  width: 50px !important;
                  border-radius: 10px;
                  background: rgba(var(--rgb-green),0.3);
                }
                .plus {
                  padding-left: 5px !important;
                }
            .: |
              ha-card {
                width: 182%;
              }
              mushroom-state-item {
                background: transparent !important;
                {% if states(config.entity) == 'heat' %} 
                  flex: none;
                {% else %}
                {% endif %}
              }
              mushroom-state-info {
                background: transparent !important;
              }
              mushroom-state-info:after {
                content: "{{state_attr(config.entity, 'hvac_action') | capitalize}} - {{state_attr(config.entity,'current_temperature')}}°C";
                font-size: 12px;
                font-weight: bold;
                color: var(--secondary-text-color);
                background: transparent !important;
              }
              mushroom-shape-icon {
                --icon-symbol-size: 0.6em;
                {% if state_attr(config.entity, 'hvac_action') == 'idle' %}
                  --card-mod-icon: mdi:leaf;
                  --card-mod-icon-color: rgba(var(--rgb-green), 1);
                  --shape-color: rgba(var(--rgb-green), 0.2) !important;
                {% else %}
                  --card-mod-icon: mdi:fire;
                  --card-mod-icon-color: rgba(var(--rgb-deep-orange), 1);
                  --shape-color: rgba(var(--rgb-deep-orange), 0.2) !important;
                {% endif %}
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: input_boolean.office_thermostat_dropdown
            icon: |-
              {% if states(config.entity) == 'on' %}
                mdi:chevron-up
              {% else %}
                mdi:chevron-down
              {% endif %}
            card_mod:
              style: |
                ha-card {
                  background: none !important;
                  border: none !important;
                  box-shadow: none !important;
                  top: 15px;
                  --chip-icon-size: 23px;
                }
        alignment: end
        card_mod:
          style: |
            ha-card {
              top: 0px;
              right: 11px;
              height: 20px;
            }
    columns: 2
  - type: conditional
    conditions:
      - entity: input_boolean.office_thermostat_dropdown
        state: 'on'
    card:
      type: custom:stack-in-card
      keep:
        margin: false
        box_shadow: false
        background: false
      card_mod:
        style: |
          ha-card {
            background: transparent !important;
            height: 122px;
          }
      cards:
        - type: grid
          square: false
          columns: 2
          cards:
            - type: grid
              square: false
              columns: 1
              cards:
                - type: custom:mushroom-template-card
                  entity: sensor.office_temperature_humidity_temperature
                  primary: >-
                    {{ states(entity) }} {{ state_attr(entity,
                    "unit_of_measurement") }}
                  secondary: null
                  icon_color: |-
                    {% set temp = states(entity) %}
                    {% if temp >= '22' %}
                      red
                    {% elif temp >= '20' and temp < '22' %}
                      orange
                    {% elif temp == 'unknown' %}
                      grey
                    {% else %}
                      #ffcd05
                    {% endif %}
                  icon: mdi:home-thermometer-outline
                  tap_action:
                    action: more-info
                  card_mod:
                    style: |
                      :host {
                        position: absolute;
                        --mush-icon-size: 30px;
                        --mush-icon-symbol-size: 20px;
                        background: transparent !important;
                        z-index: 2;
                        width: 150px;
                        top: -10px;
                      }
                - type: custom:mushroom-template-card
                  entity: sensor.office_temperature_humidity_humidity
                  primary: >-
                    {{ states(entity) | round}} {{ state_attr(entity,
                    "unit_of_measurement") }}
                  icon_color: |-
                    {% set temp = states(entity) %}
                    {% if temp >= '60' %}
                      #0d6aff
                    {% elif temp >= '50' and temp < '60' %}
                      #63b9ff
                    {% elif temp >= '40' and temp < '50' %}
                      #63b9ff
                    {% elif temp == 'unknown' %}
                      grey
                    {% else %}
                      #defeff
                    {% endif %}
                  icon: mdi:water
                  tap_action:
                    action: more-info
                  card_mod:
                    style: |
                      :host {
                        position: absolute;
                        --mush-icon-size: 30px;
                        --mush-icon-symbol-size: 20px;
                        background: transparent !important;
                        z-index: 2;
                        width: 150px;
                        top: 30px;
                      }
                - type: custom:mushroom-template-card
                  entity: climate.office_heating
                  primary: '{{ state_attr(entity, ''temperature'') | round}} °C'
                  icon_color: |-
                    {% set temp = state_attr(entity, 'temperature') %}
                    {% if temp >= 22 %}
                      red
                    {% elif temp >= 20 and temp < 22 %}
                      orange
                    {% elif temp == 'unknown' %}
                      grey
                    {% else %}
                      #ffcd05
                    {% endif %}
                  icon: mdi:thermostat
                  tap_action:
                    action: more-info
                  card_mod:
                    style: |
                      :host {
                        position: absolute;
                        --mush-icon-size: 30px;
                        --mush-icon-symbol-size: 20px;
                        background: transparent !important;
                        z-index: 2;
                        width: 150px;
                        top: 70px;
                      }
            - type: custom:mini-graph-card
              entities:
                - entity: climate.office_heating
                  attribute: temperature
                  name: Target
                  color: fuchsia
                  show_fill: false
                - entity: sensor.office_temperature_humidity_humidity
                  name: Humidity
                  y_axis: secondary
                - entity: sensor.office_temperature_humidity_temperature
                  name: Temperature
              hours_to_show: 24
              line_width: 3
              font_size: 50
              points_per_hour: 2
              animate: true
              show:
                name: false
                icon: false
                state: false
                legend: false
                fill: fade
              color_thresholds:
                - value: 17
                  color: '#ffcd05'
                - value: 19
                  color: '#f39c12'
                - value: 21
                  color: '#d35400'
                - value: 22.5
                  color: '#c0392b'
                - value: 40
                  color: '#91f4ff'
                - value: 50
                  color: '#2ae0f5'
                - value: 58
                  color: '#18b3f5'
                - value: 65
                  color: '#005bd1'
                - value: 70
                  color: '#000399'
              card_mod:
                style: |
                  ha-card {
                    position: absolute !important;
                    top: -30px;
                    width: 100% !important;
                    height: 122% !important;
                    left: 0px;
                  }
                  ha-card:after {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
                  }
3 Likes

i really love these guide! A bit offtopic is there also a similar guide for the Tile Card?

Not as of yet. I was working on one and i have saved my progress. But at the moment the tile cards are changing a bit too much for me to post it and then keep on top of changes. I would rather wait a bit for the changes to settle and then finish and post.

2 Likes

Hi to you Dimitri little question is what would be why I have a kind of flash when I change pages or I see the original cards before the config card-mod is supported?

Ill link you to this post that should hopefully explain it.

:+1: Dimitri do you know the manipulation to externalise the styles in a style.yaml file and call them?

beautiful cards! could you share two cards, office room and dishwasher? thanks

Office + Spare Bedroom Room Cards - Too large to post so in a pastebin:

Dishwasher Card:

Code
type: custom:vertical-stack-in-card
cards:
  - square: false
    columns: 2
    type: grid
    cards:
      - type: custom:mushroom-template-card
        primary: Dishwasher
        secondary: |-
          {% if states('input_boolean.dishwasher') == 'on' %}
            {% if states('timer.dishwasher_run_time') == 'active' %}
              {% set ctd = state_attr('timer.dishwasher_run_time', 'finishes_at') | as_datetime %}
              {% set finald = (ctd - now()).total_seconds() | timestamp_custom('%-Hh %-Mm', false) %}
              {% set testd = finald.split('h')[0] | int %}
              {% if testd == 0 %}
                Est. Completion {{ finald.split('h')[1] }}
              {% else %}
                Est. Completion {{finald}}
              {% endif %}
            {% else %}
             Finished
            {% endif %}
          {% else %}
          {% endif %}
        icon: mdi:dishwasher
        badge_icon: |-
          {% if states('input_boolean.dishwasher') == 'on' %}
            mdi:waves
          {% else %}
            mdi:flag-checkered
          {% endif %}
        badge_color: |-
          {% if states('input_boolean.dishwasher') == 'on'%}
            #697fff
          {% else %}
            #5bc779 
          {% endif %}
        icon_color: |-
          {% if states('input_boolean.dishwasher') == 'on' %}
            #697fff
          {% else %}
            #5bc779 
          {% endif %}
        entity: sensor.kitchen_dishwasher_plug_power
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
        multiline_secondary: false
        card_mod: null
        style: |
          ha-state-icon {
            {% if states('input_boolean.dishwasher') == 'on' %}
              animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite; transform-origin: 50% 75%;
            {% else %}
            {% endif %};
          }
          @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
            40% { transform: translateY(-1.2px) rotate(5deg); } 
            60% { transform: translateY(-1.1px) rotate(-4deg); } 
          } 
          @keyframes wash {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
          }
          @media (prefers-color-scheme: dark) {
            ha-card {
              width: 285px;
              background-color: 
              {% if states('input_boolean.dishwasher') == 'on' %}
                #001f5c
              {% else %}
              
              {% endif %}; 
            }
          } 
          @media (prefers-color-scheme: light) {
            ha-card {
              width: 285px;
              background-color: 
              {% if states('input_boolean.dishwasher') == 'on' %}
                #c2d4ff
              {% else %}

              {% endif %}; 
            }
          } 
      - type: custom:mushroom-template-card
        primary: Pods
        secondary: '{{states(''counter.dishwasher_pods'')}}'
        icon: mdi:water-circle
        entity: counter.dishwasher_pods
        icon_color: |-
          {% if states('counter.dishwasher_pods') | int <= 5 %}
            red
          {% elif states('counter.dishwasher_pods') | int <= 20 %}
            amber
          {% elif states('counter.dishwasher_pods') | int <= 40 %}
            #55c2c9
          {% else %}
            #697fff
          {% endif %}
        badge_icon: |-
          {% if states('counter.washing_pods') | int == 5 %}
            mdi:numeric-5
          {% elif states('counter.washing_pods') | int == 4 %}
            mdi:numeric-4
          {% elif states('counter.washing_pods') | int == 3 %}
            mdi:numeric-3
          {% elif states('counter.washing_pods') | int == 2 %}
            mdi:numeric-2
          {% elif states('counter.washing_pods') | int == 1 %}
            mdi:numeric-1
          {% elif states('counter.washing_pods') | int == 0 %}
            mdi:numeric-0
          {% endif %}
        badge_color: red
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
                align-items: end;
                transform: scalex(-1);
                position: relative;
                left: 20px
              }
            .: |
              :host {
                transform: scalex(-1);
              }
              mushroom-shape-icon {
                position: relative;
                left: 20px;
              }
              @media (prefers-color-scheme: dark) {
                ha-card {
                  width: 200px;
                  margin: 0px 0px 0px 0px; 
                  padding: 12px 35px !important;
                    background-color: 
                  {% if states('input_boolean.dishwasher') == 'on' %}
                    #001f5c
                  {% else %}
                    
                  {% endif %}; 
                }
              } 
              @media (prefers-color-scheme: light) {
                ha-card {
                  width: 200px;
                  margin: 0px 0px 0px 0px; 
                  padding: 12px 35px !important;
                    background-color: 
                  {% if states('input_boolean.dishwasher') == 'on' %}
                    #c2d4ff
                  {% else %}

                  {% endif %}; 
                }
              } 
1 Like

Very nice! Would you share the Household Person card with us?
What do you see when you drop down at Jet?

Thank you!

its a graph showing how long each cat has been inside and outside today.

the person card is way more over the top than it probably needs to be lol.

square: false
columns: 2
type: grid
cards:
  - type: custom:stack-in-card
    entity: person.dimitri_landerloos
    cards:
      - type: custom:mushroom-template-card
        primary: Dimitri
        secondary: >-
          {% if states(config.entity) == 'home' %} Home: {%- set time =
          (as_timestamp(now()) -
          as_timestamp(states.person.dimitri_landerloos.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% elif states(config.entity) == 'Work' %} Work: {%- set time =
          (as_timestamp(now()) -
          as_timestamp(states.person.dimitri_landerloos.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% elif states(config.entity) == "Julia's Parents House" %} Julia's
          House: {%- set time = (as_timestamp(now()) -
          as_timestamp(states.person.dimitri_landerloos.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% elif states(config.entity) == "Dimitri's Parents House" %} Parent's
          House: {%- set time = (as_timestamp(now()) -
          as_timestamp(states.person.dimitri_landerloos.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% else %} Away: {%- set time = (as_timestamp(now()) -
          as_timestamp(states.person.dimitri_landerloos.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% endif %}
        icon: mdi:account
        entity: person.dimitri_landerloos
        icon_color: |-
          {% if states(config.entity) == 'home' %}
            #5ddeb8
          {% elif states(config.entity) == 'Work' %}
            #87afff
          {% elif states(config.entity) == "Dimitri's Parents House" %}
            #ff99cc
          {% elif states(config.entity) == "Julia's Parents House" %}
            #d0abff
          {% else %}
            #5bc779
          {% endif %}
        badge_icon: |
          {% if states(config.entity) == 'home' %}
            mdi:home
          {% elif states(config.entity) == 'Work' %}
            mdi:factory
          {% elif states(config.entity) == "Julia's Parents House" %}
            mdi:home-floor-1
          {% elif states(config.entity) == "Dimitri's Parents House" %}
            mdi:home-heart
          {% else %}
            mdi:walk
          {% endif %}
        badge_color: |-
          {% if states(config.entity) == 'home' %}
            #5ddeb8
          {% elif states(config.entity) == 'Work' %}
            #87afff
          {% elif states(config.entity) == "Dimitri's Parents House" %}
            #ff99cc
          {% elif states(config.entity) == "Julia's Parents House" %}
            #d0abff
          {% else %}
            #5bc779
          {% endif %}
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
        multiline_secondary: null
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                white-space: normal !important;
              }
            .: |
              mushroom-shape-icon {
                position: absolute;
                top: -57px;
                left: -40px;
              }
              mushroom-badge-icon {
                position: absolute;
                top: -27px;
                left: 24px;
              }
              mushroom-state-info {
                padding-left: 34px;
                z-index: 1;
              }
              :host {
                --mush-icon-size: 2.84em;
                --mush-icon-symbol-size: 1em
              }
    card_mod:
      style: |
        @media (prefers-color-scheme: dark) {
          ha-card {
            background-color: 
              {% if states(config.entity) == 'home' %}
                #045940 !important;
              {% elif states(config.entity) == 'Work' %}
                #001f5c !important;
              {% elif states(config.entity) == "Dimitri's Parents House" %}
                #690035 !important;
              {% elif states(config.entity) == "Julia's Parents House" %}
                #310070 !important;
              {% else %}
                #0c3b0c !important;
              {% endif %};
            }
          }
        @media (prefers-color-scheme: light) {
          ha-card { 
            background-color: 
              {% if states(config.entity) == 'home' %}
                #cffff1 !important;
              {% elif states(config.entity) == 'Work' %}
                #ccddff !important;
              {% elif states(config.entity) == "Dimitri's Parents House" %}
                #fcdcec !important;
              {% elif states(config.entity) == "Julia's Parents House" %}
                #e4cfff !important;
              {% else %}
                #d9fae2 !important;
              {% endif %};
            }
          }
  - type: custom:stack-in-card
    entity: person.julia_hallett
    cards:
      - type: custom:mushroom-template-card
        primary: Julia
        secondary: >-
          {% if states(config.entity) == 'home' %} Home: {%- set time =
          (as_timestamp(now()) -
          as_timestamp(states.person.julia_hallett.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% elif states(config.entity) == 'Work Julia' %} Work: {%- set time =
          (as_timestamp(now()) -
          as_timestamp(states.person.julia_hallett.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% elif states(config.entity) == "Julia's Parents House" %} Parent's
          House: {%- set time = (as_timestamp(now()) -
          as_timestamp(states.person.julia_hallett.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% elif states(config.entity) == "Dimitri's Parents House" %} Dimi's
          House: {%- set time = (as_timestamp(now()) -
          as_timestamp(states.person.julia_hallett.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% elif states(config.entity) == "Guides" %} Guides: {%- set time =
          (as_timestamp(now()) -
          as_timestamp(states.person.julia_hallett.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% else %} Away: {%- set time = (as_timestamp(now()) -
          as_timestamp(states.person.julia_hallett.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% endif %}
        icon: mdi:account
        entity: person.julia_hallett
        icon_color: |-
          {% if states(config.entity) == 'home' %}
            #5ddeb8
          {% elif states(config.entity) == 'Work Julia' %}
            #87afff
          {% elif states(config.entity) == "Julia's Parents House" %}
            #ff99cc
          {% elif states(config.entity) == "Dimitri's Parents House" %}
            #d0abff
          {% elif states(config.entity) == "Guides" %}
            #a7e34f
          {% else %}
            #5bc779
          {% endif %}
        badge_icon: |
          {% if states(config.entity) == 'home' %}
            mdi:home
          {% elif states(config.entity) == 'Work Julia' %}
            mdi:hospital-building
          {% elif states(config.entity) == "Julia's Parents House" %}
            mdi:home-heart
          {% elif states(config.entity) == "Dimitri's Parents House" %}
            mdi:home-floor-1
          {% elif states(config.entity) == "Guides" %}
            mdi:clover-outline
          {% else %}
            mdi:walk
          {% endif %}
        badge_color: |-
          {% if states(config.entity) == 'home' %}
            #5ddeb8
          {% elif states(config.entity) == 'Work Julia' %}
            #87afff
          {% elif states(config.entity) == "Julia's Parents House" %}
            #ff99cc
          {% elif states(config.entity) == "Dimitri's Parents House" %}
            #d0abff
          {% elif states(config.entity) == "Guides" %}
            #a7e34f
          {% else %}
            #5bc779
          {% endif %}
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
        multiline_secondary: false
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                white-space: normal !important;
              }
            .: |
              mushroom-shape-icon {
                position: absolute;
                top: -57px;
                left: -40px;
              }
              mushroom-badge-icon {
                position: absolute;
                top: -27px;
                left: 24px;
              }
              mushroom-state-info {
                padding-left: 34px;
                z-index: 1;
              }
              :host {
                --mush-icon-size: 2.84em;
                --mush-icon-symbol-size: 1em
              }
    card_mod:
      style: |
        @media (prefers-color-scheme: dark) {
          ha-card {
            background-color: 
              {% if states(config.entity) == 'home' %}
                #045940 !important;
              {% elif states(config.entity) == 'Work Julia' %}
                #001f5c !important;
              {% elif states(config.entity) == "Julia's Parents House" %}
                #690035 !important;
              {% elif states(config.entity) == "Dimitri's Parents House" %}
                #310070 !important;
              {% elif states(config.entity) == 'Guides' %}
                #3d6601 !important;
              {% else %}
                #0c3b0c !important;
              {% endif %};
            }
          }
        @media (prefers-color-scheme: light) {
          ha-card { 
            background-color: 
              {% if states(config.entity) == 'home' %}
                #cffff1 !important;
              {% elif states(config.entity) == 'Work Julia' %}
                #ccddff !important;
              {% elif states(config.entity) == "Julia's Parents House" %}
                #fcdcec !important;
              {% elif states(config.entity) == "Dimitri's Parents House" %}
                #e4cfff !important;
              {% elif states(config.entity) == 'Guides' %}
                #e7f7cd !important;
              {% else %}
                #d9fae2 !important;
              {% endif %};
            {
          }
4 Likes

Thank you!
Jet probably doesn’t like being outside.

You are right, especially when its raining, she will go out for like 30 seconds to do her business and then come back inside :smiley:

How do you check how many pods you have ? (not coded, but in “real life”)

Well i took an initial count of how many we had. then with each cycle it consumes 1 pod. then when we buy more i have it set up so we can just add the qty we bought to what we currently have remaining.

on the types that we buy it says the qty that are in the pack. but tbf it says that on all packs here in the UK pretty much.

1 Like

This Guide is absolutely perfect. Just the infos I was searching for a long time.
Many Thx for that. Simply love it.

1 Like

I’m not a pro like you, but why didn’t you make your secondary text code shorter?

Or am I missing something?

secondary: >-
          {% if states(config.entity) == 'home' %} Home: {%- set time =
          (as_timestamp(now()) -
          as_timestamp(states.person.dimitri_landerloos.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% elif states(config.entity) == 'Work' %} Work: {%- set time =
          (as_timestamp(now()) -
          as_timestamp(states.person.dimitri_landerloos.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% elif states(config.entity) == "Julia's Parents House" %} Julia's
          House: {%- set time = (as_timestamp(now()) -
          as_timestamp(states.person.dimitri_landerloos.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% elif states(config.entity) == "Dimitri's Parents House" %} Parent's
          House: {%- set time = (as_timestamp(now()) -
          as_timestamp(states.person.dimitri_landerloos.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% else %} Away: {%- set time = (as_timestamp(now()) -
          as_timestamp(states.person.dimitri_landerloos.last_changed)) | int  %}
            {%- set minutes = ((time % 3600) // 60) %}
            {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
            {%- set hours = ((time % 86400) // 3600) %}
            {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
            {%- set days = (time // 86400) %}
            {%- set days = '{}d '.format(days) if days > 0 else '' %}
          {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
          {% endif %}

My edit:

secondary: >-
      {% if states(config.entity) == 'home' %} Home:
      {% elif states(config.entity) == 'Work' %} Work:
      {% elif states(config.entity) == "Julia's Parents House" %} Julia's House:
      {% elif states(config.entity) == "Dimitri's Parents House" %} Parent's House:
      {% else %} Away: {% endif %} 
      {%- set time = (as_timestamp(now()) -
      as_timestamp(states.person.dimitri_landerloos.last_changed)) | int  %}
        {%- set minutes = ((time % 3600) // 60) %}
        {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
        {%- set hours = ((time % 86400) // 3600) %}
        {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
        {%- set days = (time // 86400) %}
        {%- set days = '{}d '.format(days) if days > 0 else '' %}
      {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago

1 Like

No you can absolutely do that. I am not a professional, i am learning just like everyone else :slight_smile:

1 Like

or

{% set state = states(config.entity) %}
{% if state in 
  ['home','Work',"Julia's Parents House","Dimitri's Parents House"] %}
  {{state.replace('Parents ','')|title}}:
{% else %} Away: 
{% endif %} 

:wink:

2 Likes

That’s very nice ! Not mushroom related but what devices are you using for tracking the inside/outside for your pets ?