Mushroom Inspiration!

[ArenaCloser]

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.

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:

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 %};
        }

[alexandrechoske (Smart Chosk)]

thanks mate,
just another question, is the last one I promess hahha

I am making an mobile version and the background i need to stay as pure white “#FFFFFF”, I can set the background color in this version too?

[mase]

no worries, this way i´m learning some stuff

try this:

  modes:
    light:
      primary-background-color: "#FFFFFF"
      secondary-background-color: "#FFFFFF"
      card-background-color: "#FFFFFF"
    dark:
      primary-background-color: "#FFFFFF"
      secondary-background-color: "#FFFFFF"
      card-background-color: "#FFFFFF"

guess you need to change the icon-color so it matches the white:

      paper-tab[aria-selected=true] {
        color: var(--google-blue);  ### <--- ACTIVE TAP COLOR ###
      }
      paper-tab {
        color: var(--header-all-tabs-color); ### <--- ICON COLOR ###
        border-radius: 5px;
        height: 32px;
        padding: 0 20px;
      }

[KyleBrown0221]

I got one! Lot of trial and error went into this one.

Introducing a Mushroom Light Card equipped with pop-up and auto-entities card as well!

Code

type: custom:mushroom-light-card
entity: light.lr_light_group
name: All Living Room Lights
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
icon: mdi:sofa-outline
hold_action:
  action: toggle
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: All Living Room Lights
      content:
        type: custom:auto-entities
        card:
          type: entities
        filter:
          include:
            - group: light.lr_light_group
              options:
                type: custom:mushroom-light-card
                show_brightness_control: true
                use_light_color: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                tap_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      {% set r = state_attr(config.entity, 'rgb_color')[0] %}
                      {% set g = state_attr(config.entity, 'rgb_color')[1] %}
                      {% set b = state_attr(config.entity, 'rgb_color')[2] %}
                      {% if is_state(config.entity, 'on') %}
                          background: rgba({{r}}, {{g}}, {{b}},0.1);
                          --primary-text-color: rgb({{r}}, {{g}}, {{b}});
                          --secondary-text-color: rgba({{r}}, {{g}}, {{b}},0.5);
                      {% endif %}
                    }
                    ha-card {
                      padding: 8px 24px !important;
                    }
                    ha-card {
                      --badge-size: 0px;
                    }
                      ha-card {
                        background: none;
                        --ha-card-box-shadow: 0px;
                      }
          exclude: []
        sort:
          method: friendly_name
card_mod:
  style: |
    ha-card {
      {% set r = state_attr(config.entity, 'rgb_color')[0] %}
      {% set g = state_attr(config.entity, 'rgb_color')[1] %}
      {% set b = state_attr(config.entity, 'rgb_color')[2] %}
      {% if is_state(config.entity, 'on') %}
          background: rgba({{r}}, {{g}}, {{b}},0.1);
          --primary-text-color: rgb({{r}}, {{g}}, {{b}});
          --secondary-text-color: rgba({{r}}, {{g}}, {{b}},0.5);
      {% endif %}
    }
    ha-card {
      padding: px 24px !important;
    }
    ha-card {
      --badge-size: 0px;
    }
    ha-card {
      background: none;
      --ha-card-box-shadow: 0px;
    }

What you’ll need

(thanks to @thomasloven)

• Browser_Mod (downloaded through HACS)
• Card_Mod (Also HACS)

Cards Used

• Mushroom Light Card
• Auto Entities

Prerequisites Needed

• Using the “Group” helper - create a group with all your lights combined together. In my case it’s “light.lr_light_group”

Use Case

• For me it’s mobile optimized as it makes the dashboard smaller and more effecient
• With auto entities card it allows for the dashboard to talk with the backend. I.e those pesky times when you have to remove or change an entity in the backend and then have to update the dashboard side as well. Now it’ll automatically update!
• Can be expanded into other entity types then just lights

Hope this all helps!

[Thekholm]

Information Light Card: I use this card to see if any lights are on and how many (mostly used when I’am not home to see if someone forgot to turn off any lights).

I use automations and motions sensors for all lights, but that can not fix all scenarios in my home! To many peolpe and animals with diffrent time schedules!

We also have 73 lights and I don’t want to have endless of lights in a popup menu or have a dedicated dashboard for all lights.

This one also have the rhyb’s animated icon when a light is on!

How to setup;

1. You need a template for all lights. Put this code in the config file of Home Assistant
   (check the config before restart) If you are not using Philips Hue then this line is not needed | rejectattr(‘attributes.is_hue_group’, ‘true’)

Template Sensor

  - platform: template
    sensors:
      lights_on:
        friendly_name: "Lights On"
        value_template: >
          {{ states.light | selectattr('state', 'eq', 'on')
          | rejectattr('attributes.is_hue_group', 'true')
          | map(attribute='entity_id')
          | list | count }}

2. Areas in your Home Assistant needs to have all the lights.
   Change the bold text to your own Areas in the code of Light Card - {% set areas = [‘Vardagsrum’] %}

3. A input_boolean.lights_on helper (to open and close the card).

4. The code to be used in Mushroom cards.

Light Card

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:gap-card
        height: 2
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: auto 33px
          margin: '-4px -4px -8px -4px;'
        cards:
          - type: custom:mushroom-template-card
            entity: sensor.lights_on
            primary: Belysningen i Hemmet
            secondary: >
              {% if is_state('sensor.lights_on','0') %} Släckt {%else%}
              {{states('sensor.lights_on')}}/{{ states.light |
              rejectattr('attributes.is_hue_group', 'true') |
              map(attribute='entity_id') | list | count }} Lampor är på {% endif
              %}
            icon: >
              {% if is_state('sensor.lights_on','0') %} mdi:lightbulb {%else%}
              mdi:lightbulb-on {% endif %}
            icon_color: >
              {% if is_state('sensor.lights_on','0') %} grey {%else%}  orange {%
              endif %}
            fill_container: false
            multiline_secondary: false
            tap_action:
              action: more-info
            card_mod:
              style:
                mushroom-shape-icon$: |
                  ha-icon {
                    {% if is_state('sensor.lights_on', '0') %} 
                    {%else%} 
                    --icon-animation: illumination 2s infinite;
                    {% endif %}
                  }
                  @keyframes illumination {
                    0%, 100% { clip-path: inset(0 0 0 0); }
                    80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
                  }
                card_mod: null
                style: |
                  ha-card {
                    background: none;
                    --ha-card-border-width: 0;
                  }
          - type: custom:mushroom-template-card
            entity: input_boolean.lights_on
            icon: >-
              {{ 'mdi:chevron-up' if is_state(entity, 'on') else
              'mdi:chevron-down' }}
            icon_color: black
            hold_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  align-items: flex-end;
                  background: none;
                  --ha-card-border-width: 0;
                }
                mushroom-shape-icon {
                  --shape-color: none !important;
                }  
      - type: conditional
        conditions:
          - entity: input_boolean.lights_on
            state: 'on'
        card:
          type: custom:vertical-stack-in-card
          cards:
            - type: markdown
              content: >
                {% set areas = ['Vardagsrum'] %} {% for rooms in areas %} {%-
                set lights = expand(area_entities(rooms))
                |rejectattr('attributes.is_hue_group', 'true')
                |selectattr('domain', 'eq', 'light') |list -%} {%- set on =
                lights |selectattr('state', 'eq', 'on') |map(attribute='name')
                |list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
                lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
                endif %}{%- endfor %}


                {% set areas = ['TV Rum'] %} {% for rooms in areas %} {%- set
                lights = expand(area_entities(rooms))
                |rejectattr('attributes.is_hue_group', 'true')
                |selectattr('domain', 'eq', 'light') |list -%} {%- set on =
                lights |selectattr('state', 'eq', 'on') |map(attribute='name')
                |list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
                lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
                endif %}{%- endfor %}


                {% set areas = ['Sovrum'] %} {% for rooms in areas %} {%- set
                lights = expand(area_entities(rooms))
                |rejectattr('attributes.is_hue_group', 'true')
                |selectattr('domain', 'eq', 'light') |list -%} {%- set on =
                lights |selectattr('state', 'eq', 'on') |map(attribute='name')
                |list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
                lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
                endif %}{%- endfor %}


                {% set areas = ['Matrum'] %} {% for rooms in areas %} {%- set
                lights = expand(area_entities(rooms))
                |rejectattr('attributes.is_hue_group', 'true')
                |selectattr('domain', 'eq', 'light') |list -%} {%- set on =
                lights |selectattr('state', 'eq', 'on') |map(attribute='name')
                |list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
                lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
                endif %}{%- endfor %}


                {% set areas = ['Killarnas Rum'] %} {% for rooms in areas %} {%-
                set lights = expand(area_entities(rooms))
                |rejectattr('attributes.is_hue_group', 'true')
                |selectattr('domain', 'eq', 'light') |list -%} {%- set on =
                lights |selectattr('state', 'eq', 'on') |map(attribute='name')
                |list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
                lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
                endif %}{%- endfor %}


                {% set areas = ['Stellas Rum'] %} {% for rooms in areas %} {%-
                set lights = expand(area_entities(rooms))
                |rejectattr('attributes.is_hue_group', 'true')
                |selectattr('domain', 'eq', 'light') |list -%} {%- set on =
                lights |selectattr('state', 'eq', 'on') |map(attribute='name')
                |list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
                lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
                endif %}{%- endfor %}


                {% set areas = ['Gym'] %} {% for rooms in areas %} {%- set
                lights = expand(area_entities(rooms))
                |rejectattr('attributes.is_hue_group', 'true')
                |selectattr('domain', 'eq', 'light') |list -%} {%- set on =
                lights |selectattr('state', 'eq', 'on') |map(attribute='name')
                |list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
                lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
                endif %}{%- endfor %}


                {% set areas = ['Utomhus'] %} {% for rooms in areas %} {%- set
                lights = expand(area_entities(rooms))
                |rejectattr('attributes.is_hue_group', 'true')
                |selectattr('domain', 'eq', 'light') |list -%} {%- set on =
                lights |selectattr('state', 'eq', 'on') |map(attribute='name')
                |list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
                lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
                endif %}{%- endfor %}
          card_mod: null
          style: |
            ha-card {
            --ha-card-border-width: 0;
            }

Best Regards
Thekholm

[MRobi (Mike)]

A few weeks back I saw the great work on a minimalist inspired room card by @theandouz and had the same thoughts as @PatrickJanson for a smaller version to be able to fit more cards on the screen at once.

I re-worked things a bit to make it smaller and added a few extra “features”.

• The secondary text displays temp and humidity, color is based on the room’s climate devices hvac state (heating, cooling) as well as an icon to quickly display the state.
• The light chip is constant and supports the light entity’s color or a default color if there isn’t one. Single tap brings up a quick popup to show all light entities in that room.
• Can display up to 4 conditional chips at a time (You can add as many as you like but only 4 display) with certain chips bringing up a popup including the beautiful media card from @rhysb. I personally preferred the conditional chips to just display the icon without the circle around it. I found it easier to notice.

Here’s the code. Certainly open to any additional ideas or tweaks.

Minimalist Room Card

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: group.master_bedroom
    icon: mdi:bed
    icon_color: |
      {% if is_state(entity, 'on') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: Master Bedroom
    secondary: >-
      {{ states('sensor.thermostat_master_bedroom_local_temperature') | round(0)
      }}°C | {{ states('sensor.thermostat_master_bedroom_humidity') |
      round(0) }}%
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /mobile-dashboard/master-bedroom
    double_tap_action:
      action: navigate
      navigation_path: /mobile-dashboard/master-bedroom
    hold_action:
      action: toggle
    badge_icon: >
      {% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
      'heating') %}
        mdi:radiator
      {% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
      'cooling') %}
        mdi:snowflake
      {% else %}  {% endif %}
    badge_color: >
      {% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
      'heating') %}
        red
      {% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
      'cooling') %}
        #03A9F4
      {% else %} {% endif %}
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            font-size: 16px !important;
            position: relative;
            top: -50px;
            left: -155px;
            overflow: visible !important;
            white-space: normal !important;
          }
          .secondary {
            position: relative;
            overflow: visible !important;
            top: -52px;
            left: -155px;
          }
        mushroom-shape-icon$: |
          .shape {
            position: relative;
            left: -43px;
            top: 55px;
          }
        .: |
          :host {
            --mush-icon-size: 146px;
            --secondary-text-color: 
              {% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action', 'heating') %}
                red
              {% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action', 'cooling') %}
                #03A9F4
              {% else %}
                #6c6c75
              {% endif %}
          }
        style: |
          mushroom-badge-icon {
            left: 69px;
            top: 25px;
          }
  - type: custom:mushroom-template-card
    primary: none
    icon_color: disabled
    icon: mdi:lightbulb
    secondary: none
    entity: light.master_bedroom_light
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Master Bedroom Lights
          content:
            type: vertical-stack
            cards:
              - type: custom:mushroom-light-card
                entity: light.master_bedroom_light
                name: Master Bedroom Light
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: false
                show_color_control: false
                collapsible_controls: true
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-width: 0;
                    }
              - type: custom:mushroom-light-card
                entity: light.closet_light
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: false
                show_color_control: false
                collapsible_controls: true
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-width: 0;
                    }
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-width: 0;
                }
    hold_action:
      action: toggle
    double_tap_action:
      action: more-info
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            {% if is_state(config.entity, 'on') %}
              {% if state_attr(config.entity, 'rgb_color') == none %}
                --icon-color: rgb(255,190,137) !important;
                --shape-color: rgb(255,190,137, 0.2 ) !important;
              {% else %}
                {% set r = state_attr(config.entity, 'rgb_color')[0] %}
                {% set g = state_attr(config.entity, 'rgb_color')[1] %}
                {% set b = state_attr(config.entity, 'rgb_color')[2] %}
                --icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
                --shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
              {% endif %}
            {% endif %}
          }
        .: |
          ha-card {
            width: 66px;
            margin-left: 68%;
            top: -178px;
            background: none;
          }
          :host {
            --mush-icon-size: 38px;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: input_boolean.in_bed
            state: 'on'
        chip:
          type: entity
          entity: input_boolean.in_bed
          icon: mdi:bed
          icon_color: blue
          content_info: none
      - type: conditional
        conditions:
          - entity: binary_sensor.motion_master_bedroom_occupancy
            state: 'on'
        chip:
          type: entity
          entity: binary_sensor.motion_master_bedroom_occupancy
          icon: mdi:motion-sensor
          icon_color: blue
          content_info: none
      - type: conditional
        conditions:
          - entity: fan.master_bedroom_fan
            state: 'on'
        chip:
          type: entity
          entity: fan.master_bedroom_fan
          icon: mdi:fan
          icon_color: blue
          content_info: none
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Master Bedroom Fan
                content:
                  type: custom:mushroom-fan-card
                  entity: fan.master_bedroom_fan
                  name: Master Bedroom Fan
                  icon_animation: true
                  fill_container: false
                  show_percentage_control: true
                  show_oscillate_control: false
                  collapsible_controls: true
                  card_mod:
                    style: |
                      ha-card {
                        --ha-card-border-width: 0;
                      }
      - type: conditional
        conditions:
          - entity: switch.plug_master_bedroom
            state: 'on'
        chip:
          type: entity
          entity: switch.plug_master_bedroom
          icon: mdi:power-plug
          icon_color: blue
          content_info: none
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Master Bedroom Plugs
                content:
                  type: custom:mushroom-entity-card
                  entity: switch.plug_master_bedroom
                  name: Master Bedroom Plug
                  icon: mdi:power-plug
                  icon_color: '#03A9F4'
                  tap_action:
                    action: toggle
                  card_mod:
                    style: |
                      ha-card {
                        --ha-card-border-width: 0;
                      }
      - type: conditional
        conditions:
          - entity: media_player.emby_bedroom
            state: playing
        chip:
          type: entity
          entity: media_player.emby_bedroom
          icon: mdi:play-pause
          icon_color: blue
          content_info: none
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Master Bedroom Media Player
                content:
                  type: custom:stack-in-card
                  cards:
                    - type: custom:mushroom-media-player-card
                      entity: media_player.emby_bedroom
                      icon: mdi:play
                      use_media_info: true
                      use_media_artwork: false
                      show_volume_level: false
                      media_controls:
                        - play_pause_stop
                        - previous
                        - next
                      volume_controls:
                        - volume_buttons
                        - volume_set
                      fill_container: false
                      card_mod:
                        style: |
                          mushroom-shape-icon {
                            display: flex;
                            {% set media_type = state_attr(config.entity, 'media_content_type') %}
                            {% if media_type == 'tvshow' %}
                              --card-mod-icon: mdi:television-classic;
                              animation: flicker 1s linear infinite alternate;
                            {% elif media_type == 'movie' %}
                              --card-mod-icon: mdi:movie-roll;
                              animation: spin 2s linear infinite reverse;
                            {% elif media_type == 'music' %}
                              --card-mod-icon: mdi:music;
                              animation: beat 1.3s ease-out infinite both;
                            {% elif media_type == 'playlist' %}
                              --card-mod-icon: mdi:music;
                              animation: beat 1.3s ease-out infinite both;
                            {% else %}
                              --card-mod-icon: mdi:play;
                            {% endif %}
                          }
                          @keyframes flicker {
                            0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
                            32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
                          }
                          @keyframes beat {
                            0%, 60% { --icon-symbol-size: 21px; }
                            5%, 17%, 57% { --icon-symbol-size: 22px; }
                            10%, 20%, 51% { --icon-symbol-size: 23px; }
                            25%, 45% { --icon-symbol-size: 24px; }
                            30%, 39% { --icon-symbol-size: 25px; }
                            33% { --icon-symbol-size: 26px; }
                          }
                          ha-card {
                            --ha-card-border-width: 0;
                          }
                          ha-card:before {
                            transform: translate3d(0,0,0);
                            -webkit-transform: translate3d(0,0,0);
                            content: "";

                            background: url('/local/idle_art.png') center no-repeat;
                            {% if not is_state(config.entity, 'idle') %}
                              background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
                            {% endif %}

                            background-size: contain;
                            margin: 4px 4px 16px;
                            filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
                            border-radius: var(--control-border-radius);

                            {% set media_type = state_attr(config.entity, 'media_content_type') %}
                            {% if media_type == 'tvshow' %}
                              aspect-ratio: 16 / 9;
                            {% elif media_type == 'movie' %}
                              aspect-ratio: 2 / 3;
                            {% else %}
                              aspect-ratio: 1 / 1;
                            {% endif %}
                          }
                    - type: conditional
                      conditions:
                        - entity: media_player.emby_bedroom
                          state_not: 'off'
                        - entity: media_player.emby_bedroom
                          state_not: idle
                      card:
                        entity: media_player.emby_bedroom
                        hide:
                          icon: true
                          name: true
                          runtime: true
                          source: true
                          power: true
                          state_label: true
                          volume: true
                          info: true
                          progress: false
                          controls: true
                        more_info: false
                        type: custom:mini-media-player
                        toggle_power: false
                        group: true
                        card_mod:
                          style:
                            mmp-progress$: |
                              paper-progress {
                                {{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
                              }
                            .: |
                              ha-card {
                                margin: 0px 12px 12px;
                                --mmp-progress-height: 12px !important;
                                height: var(--mmp-progress-height);
                                --mmp-accent-color: rgb(var(--rgb-indigo-color));
                                --mmp-border-radius: 12px !important;
                                --ha-card-border-width: 0;
                              }
                  card_mod:
                    style: |
                      ha-card:before {
                        transform: translate3d(0,0,0);
                        -webkit-transform: translate3d(0,0,0);
                        content: "";
                        position: absolute;
                        height: 100%;
                        width: 100%;

                        background: url('/local/idle_art.png') center no-repeat;
                        {% if not is_state('media_player.emby_bedroom', 'idle') %}
                          background: url( '{{ state_attr('media_player.emby_bedroom', "entity_picture") }}' ) center no-repeat;
                        {% endif %}

                        filter: blur(150px) saturate(200%);
                        background-size: 100% 100%;
                      }
                      ha-card {
                        transform: translate3d(0,0,0);
                        -webkit-transform: translate3d(0,0,0);
                      }
    card_mod:
      style:
        .: |
          ha-card {
            width: 66px;
            margin-left: 76%;
            top: -186px;
            background: none;
            --chip-border-width: 0;
          }
          :host {
            --mush-icon-size: 20px;
            --mush-chip-spacing: -2.9px
          }
card_mod:
  style: |
    ha-card {
      height: 178px !important;
      width: 178px !important;
    }

[daphatty]

Came here to share an RGB card that I put together using Mushroom Cards and a few others. I’ve never been a fan of the convoluted way HA manages RGB Bulbs by default and always wanted to build a unified solution. Mushroom Cards make it SUPER easy. Hopefully others find this helpful.

In addition to Mushroom Cards, you’ll need to install the following cards via HACS (or manually)

• stack-in-card - removes the empty gaps between Mushroom cards
• card_mod - Allows for tweaking of cards (Border removal, background and text colors, etc.)
• text-divider-row - Simple and clean way to create a divider with a title

A couple of points to note:

• Card_mod and text-divider-row do not support UI mode. Card_mod, in particular, breaks Mushroom Card’s UI editor functionality. (At least it does in my experience.)
• The entity in my code is actually a Light Group consisting of all my RGB bulb entities. The use of Light Groups is necessary to control multiple RGB bulbs at once.
• The preset background colors leverage the RGB equivalent values of the Kelvin temperature. For example, the Daylight preset uses a Kelvin value of 5500K. In order for the background to reflect the Kelvin “color”, the RGB value of (255, 236, 224) is used.

To adapt this card to your environment, simply copy/paste the YAML into a new card and then change all entity: values to your specific light or light group.

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-light-card
    entity: light.all_livingroom_bulbs
    layout: vertical
    primary_info: name
    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0px; 
        }
  - type: custom:text-divider-row
    text: Presets
  - type: custom:mushroom-chips-card
    chips:
      - type: light
        entity: light.all_livingroom_bulbs
        name: Daylight
        icon: mdi:lightbulb
        content_info: name
        use_light_color: false
        tap_action:
          action: call-service
          service: light.turn_on
          data:
            kelvin: 5500
            brightness: 50
            transition: 2
          target:
            entity_id: light.all_livingroom_bulbs
        card_mod:
          style: |
            ha-card {
              --chip-background: rgb(255, 236, 224);
              --text-color: black;
            }
      - type: light
        entity: light.all_livingroom_bulbs
        name: Cool White
        tap_action:
          action: call-service
          service: light.turn_on
          data:
            kelvin: 3500
            brightness: 50
            transition: 2
          target:
            entity_id: light.all_livingroom_bulbs
        content_info: name
        use_light_color: false
        icon: mdi:lightbulb
        card_mod:
          style: |
            ha-card {
              --chip-background: rgb(255, 196, 137); 
              --text-color: black;
            }
      - type: light
        entity: light.living_room_lamps
        icon: mdi:lightbulb
        name: Cozy
        use_light_color: false
        content_info: name
        tap_action:
          action: call-service
          service: light.turn_on
          data:
            transition: 2
            brightness: 50
            kelvin: 2700
          target:
            entity_id: light.all_livingroom_bulbs
        card_mod:
          style: |
            ha-card {
              --chip-background: rgb(255, 169, 87); 
              --text-color: black;
            }
    alignment: center
  - type: custom:text-divider-row
    text: Manual Adjustments
  - type: custom:mushroom-light-card
    entity: light.all_livingroom_bulbs
    show_brightness_control: true
    show_color_control: false
    name: Brightness
    layout: horizontal
    fill_container: false
    use_light_color: true
    secondary_info: none
    icon: mdi:brightness-7
    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0px; 
        }
  - type: custom:mushroom-light-card
    entity: light.all_livingroom_bulbs
    show_color_control: true
    name: Color
    use_light_color: true
    layout: horizontal
    secondary_info: none
    icon: mdi:palette
    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0px; 
        }
  - type: custom:mushroom-light-card
    entity: light.all_livingroom_bulbs
    show_color_temp_control: true
    name: Temperature
    use_light_color: true
    layout: horizontal
    secondary_info: none
    icon: mdi:white-balance-sunny
    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0px; 
        }

[tivoo (Timo)]

wow this is amazing. Great work! Do you happen to have any more code examples of other rooms? Cheers!

[MRobi (Mike)]

All my room cards are basically the same thing with different entities swapped in. So in place of light.kitchen it may be light.dining_room for example.

[Mar1us]

can you hare your Room Cards?

[mase]

sure, it´s just the template card tho…

type: custom:mushroom-template-card
primary: Wohnzimmer
icon: fas:couch
layout: vertical
tap_action:
  action: navigate
  navigation_path: wohnzimmer
entity: light.wohnzimmer
double_tap_action:
  action: toggle
secondary: >-
  {{state_attr('climate.livingroom', 'current_temperature') | round(0) }}° |
  {{states('sensor.humidity_livingroom') | round(0) }}%
icon_color: '{{ ''#ff9800'' if is_state(entity,''on'') else '''' }}'
badge_color: blue
badge_icon: >-
  {{ 'mdi:window-open' if is_state('group.sensor_window_wohnzimmer','on') else
  '' }}

[slypsteen (Slypsteen Laurent)]

Hi,

Can i ask you what cards do you use in addition of vertical stack in card?

It will be helpful for testing your code. thx

[MRobi (Mike)]

vertical-stack
vertical-stack-in-card
mushroom-template-card
mushroom-light-card
mushroom-chips-card

[slypsteen (Slypsteen Laurent)]

When i past your code, the card look like this. i have check all the code but i don’t understand why…

[MRobi (Mike)]

I’m guessing you’ve got a theme applied that changes the radius of the circle so it’s more square. And I can’t see the code but the secondary text template doesn’t seem to be resolving. Possibly an invalid entity since my code is set to pull from a thermostat entity.

[slypsteen (Slypsteen Laurent)]

I’m guessing you’ve got a theme applied that changes the radius of the circle so it’s more square.

Yes it work now thx a lot

And I can’t see the code but the secondary text template doesn’t seem to be resolving. Possibly an invalid entity since my code is set to pull from a thermostat entity.

For that its ok, i have to put my entity now.

Thx for the help

[Thekholm]

Please read the first post!

I would like this post to be all about pictures with codes, nothing else! So if you have something to share or offer, please do it with pictures and code.

Do not ask any questions here, instead ask them directly to the person or in the original Mushroom post!

Try to keep this as clean as possible and share with pictures and code.

Best regards
Thekholm

[ArenaCloser]

My speedtest card using card mod and custom:apexcharts-card.

Version with static colors:

Code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: ''
    primary: Voer speedtest uit
    secondary: ''
    multiline_secondary: true
    icon: mdi:speedometer
    icon_color: grey
    tap_action:
      action: call-service
      service: speedtestdotnet.speedtest
      data: {}
      target: {}
  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-card {
          margin: -25px 12px 0px 12px;
          border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
        }
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: vertical-stack
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.speedtest_download
                color: rgb(255, 87, 34)
                max: 60
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 80%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 70%
                    margin: 0
              fill:
                type: gradient
                gradient:
                  shade: light
                  type: horizontal
                  shadeIntensity: 0.3
                  inverseColors: false
                  opacityFrom: 1
                  opacityTo: 1
                  stops:
                    - 0
                    - 50
                    - 55
                    - 90
              legend:
                show: false
              chart:
                height: 130
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                  background: none;
                }
          - type: custom:mushroom-entity-card
            entity: sensor.speedtest_download
            primary_info: state
            secondary_info: name
            name: Download
            icon: mdi:download
            icon_color: deep-orange
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -65px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  box-shadow: none;
                  background: none;
                }
      - type: vertical-stack
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.speedtest_upload
                color: rgb(33, 150, 243)
                max: 60
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 80%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 70%
                    margin: 0
              fill:
                type: gradient
                gradient:
                  shade: light
                  type: horizontal
                  shadeIntensity: 0.3
                  inverseColors: false
                  opacityFrom: 1
                  opacityTo: 1
                  stops:
                    - 0
                    - 50
                    - 55
                    - 90
              legend:
                show: false
              chart:
                height: 130
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                  background: none;
                }
          - type: custom:mushroom-entity-card
            entity: sensor.speedtest_upload
            primary_info: state
            secondary_info: name
            name: Upload
            icon: mdi:upload
            icon_color: blue
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -65px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  box-shadow: none;
                  background: none;
                }
      - type: vertical-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.speedtest_ping
            primary_info: state
            secondary_info: name
            name: Ping
            icon_color: teal
            icon: mdi:wan
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: 20px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  box-shadow: none;
                  background: none;
                }
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          background: none;
        }

Version with dynamic colors based on download/upload value, using the experimental color_threshold feature of apex-charts. You can change the min/max/in-between values yourself in the code (currently 50-200 for download and 5-100 for upload):

Code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: ''
    primary: Run speedtest
    secondary: ''
    multiline_secondary: true
    icon: mdi:wifi-refresh
    icon_color: grey
    tap_action:
      action: call-service
      service: speedtestdotnet.speedtest
      data: {}
      target: {}
  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-card {
          margin: -25px 12px 0px 12px;
          border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
        }
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: vertical-stack
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            experimental:
              color_threshold: true
            series:
              - entity: sensor.speedtest_download
                color_threshold:
                  - value: 50
                    color: rgb(244, 67, 54)
                  - value: 75
                    color: rgb(255, 87, 34)
                  - value: 100
                    color: rgb(255, 152, 0)
                  - value: 125
                    color: rgb(255, 193, 7)
                  - value: 150
                    color: rgb(255, 235, 59)
                  - value: 175
                    color: rgb(205, 220, 57)
                  - value: 200
                    color: rgb(129, 915, 74)
                  - value: 225
                    color: rgb(76, 175, 80)
                  - value: 250
                    color: rgb(78, 175, 80)
                max: 500
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 80%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 70%
                    margin: 0
              fill:
                type: gradient
              legend:
                show: false
              chart:
                height: 130
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                  background: none;
                }
          - type: custom:mushroom-template-card
            entity: sensor.speedtest_download
            primary: |
              {{states('sensor.speedtest_download')|round(1)}} Mbps
            secondary: Download
            icon: mdi:download
            icon_color: |-
              {% set value = states('sensor.speedtest_download') | int %}
              {% if value < 50 %}
                red
              {% elif value < 75 %}
                deep-orange
              {% elif value < 100 %}
                orange
              {% elif value < 125 %}
                amber
              {% elif value < 150 %}
                yellow
              {% elif value < 175 %}
                lime
              {% elif value < 200 %}
                light-green
              {% elif value < 225 %}
                green
              {% else %}
                green
              {% endif %}
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -65px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  box-shadow: none;
                  background: none;
                }
      - type: vertical-stack
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            experimental:
              color_threshold: true
            series:
              - entity: sensor.speedtest_upload
                color_threshold:
                  - value: 5
                    color: rgb(244, 67, 54)
                  - value: 13
                    color: rgb(255, 87, 34)
                  - value: 25
                    color: rgb(255, 152, 0)
                  - value: 38
                    color: rgb(255, 193, 7)
                  - value: 50
                    color: rgb(255, 235, 59)
                  - value: 63
                    color: rgb(205, 220, 57)
                  - value: 75
                    color: rgb(129, 915, 74)
                  - value: 88
                    color: rgb(76, 175, 80)
                  - value: 100
                    color: rgb(78, 175, 80)
                max: 100
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 80%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 70%
                    margin: 0
              fill:
                type: gradient
              legend:
                show: false
              chart:
                height: 130
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                  background: none;
                }
          - type: custom:mushroom-template-card
            entity: sensor.speedtest_upload
            primary: |
              {{states('sensor.speedtest_upload')|round(1)}} Mbps
            secondary: Upload
            icon: mdi:upload
            icon_color: |-
              {% set value = states('sensor.speedtest_upload') | int %}
              {% if value < 5 %}
                red
              {% elif value < 13 %}
                deep-orange
              {% elif value < 25 %}
                orange
              {% elif value < 38 %}
                amber
              {% elif value < 50 %}
                yellow
              {% elif value < 63 %}
                lime
              {% elif value < 75 %}
                light-green
              {% elif value < 88 %}
                green
              {% else %}
                green
              {% endif %}
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: -65px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  box-shadow: none;
                  background: none;
                }
      - type: vertical-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.speedtest_ping
            primary_info: state
            secondary_info: name
            name: Ping
            icon_color: teal
            icon: mdi:wan
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-top: 20px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  box-shadow: none;
                  background: none;
                }
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          background: none;
        }

[Underfunded (Ian)]

Thank you for this creation and sharing the code. I’m well on my way to bastardizing it and adopting it for my needs. I love it!

One thing I’m having a hard time figuring out though, I have some lights that shut off when a Timer Helper reaches 0. I’d like to show that timer either below the temp/humidity, or somewhere on the bottom of the card (maybe over the icon?). I just can’t figure out how to get it in there, any ideas?

[Heijt771]

My Homepage, inspired by many other people on this forum allowing me to learning bits and pieces from them and puzzling them together into this. Kudos to them!!
I used Mushroom card, Layout card, Browser Mod and Card Mod for the main design elements.
All of this is also located in a “Minimalist UI” Yaml config to allow for some graphic design elements.
The orange bars are for controlling the light, whereas the blue bars allow me to control the volume of my AVR.

The code (Below the pictures) might not be the prettiest, but like a said, it’s a lot of puzzle work based on the amazing work of several others here!
Also I am very open to hear any feedback!

CODE SNIPPETS

Living Room Card Code

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: auto
  grid-template-rows: auto
  column-gap: 0px
  row-gap: 0px
  grid-template-areas: |
    "1"
    "2"
    "3"
    "4"
    "5"
    "6"
    "7"
    "8"
    "9"
    "10"
    "11"
    "12"
cards:
  - type: custom:mushroom-light-card
    entity: light.living_room_lights
    fill_container: true
    show_brightness_control: true
    use_light_color: false
    icon: mdi:sofa
    name: Living Room
    secondary_info: none
    layout: horizontal
    tap_action:
      # action: navigate
      # navigation_path: '/ui-lovelace-minimalist/Living'
      action: call-service
      service: browser_mod.popup
      data: 
        content:
          type: vertical-stack
          cards:
            - type: 'custom:button-card'
              template: card_title
              name: Living Room Media
            - type: custom:layout-card
              layout_type: custom:grid-layout
              layout:
                grid-template-columns: auto
                grid-template-rows: auto
                column-gap: 0px
                row-gap: 0px
                grid-template-areas: |
                  "1"
                  "2"
                  "3"
                  "4"
                  "5"
                  "6"
                  "7"
                  "8"
                  "9"
                  "10"
                  "11"
                  "12"
              cards:
                - type: custom:stack-in-card
                  cards:
                    - type: custom:mushroom-media-player-card
                      name: Living Room TV
                      entity: media_player.tv_living_room
                      media_controls:
                        - on_off
                        - play_pause_stop
                      tap_action:
                        action: more-info
                      use_media_info: true
                      show_volume_level: false
                      fill_container: false
                      layout: vertical
                      volume_controls: []
                      icon_type: none
                      primary_info: name
                      secondary_info: none
              
                  view_layout:
                    grid-column: 1
                    grid-row: 1
                  card_mod:
                    style: |
                      ha-card {
                        border-radius: 20px 20px 0px 0px;
                        height: 100px;
                        margin-top: 0px;
                        outline-color: red;
                        --chip-spacing: 0px;
              
                      }
                - type: custom:stack-in-card
                  cards:
                    - type: custom:mushroom-media-player-card
                      entity: media_player.home_theater
                      media_controls: []
                      tap_action:
                        action: more-info
                      use_media_info: true
                      show_volume_level: false
                      fill_container: false
                      layout: vertical
                      volume_controls:
                        - volume_set
                        - volume_mute
                      icon_type: none
                      primary_info: none
                      secondary_info: none
              
                  view_layout:
                    grid-column: 1
                    grid-row: 2
                  card_mod:
                    style: |
                      ha-card {
                        border-radius: 0px 0px 0px 0px;
                        height: 85px;
                        margin-top: -14px;
                        outline-color: red;
                        --chip-spacing: 0px;
              
                      }
      
      
                - type: custom:stack-in-card
                  cards:
                    - show_name: true
                      show_icon: false
                      type: button
                      tap_action:
                        action: more-info
                      entity: media_player.tv_living_room
                      name: TV Settings
              
                  view_layout:
                    grid-column: 1
                    grid-row: 3
                  card_mod:
                    style: |
                      ha-card {
                        border-radius: 0px 0px 0px 0px;
                        height: 55px;
                        margin-top: -40px;
                        outline-color: red;
                        --chip-spacing: 0px;
              
                      }
      
                - type: custom:stack-in-card
                  cards:
                    - show_name: true
                      show_icon: false
                      type: button
                      tap_action:
                        action: more-info
                      entity: media_player.home_theater
                      name: Home Theater Settings
                  view_layout:
                    grid-column: 1
                    grid-row: 4
                  card_mod:
                    style: |
                      ha-card {
                        border-radius: 0px 0px 20px 20px;
                        height: 55px;
                        margin-top: -20px;
                        outline-color: red;
                        --chip-spacing: 0px;
              
                      }
      
            - type: entities
              entities:
                - type: divider
      
            - type: 'custom:button-card'
              template: card_title
              name: Living Room Lights
              #label: 'Subtitle'
            - type: vertical-stack
              cards:
                - type: custom:mushroom-light-card
                  entity: light.bar_table_lights
                  #layout: horizontal
                  show_color_temp_control: true
                  show_brightness_control: true
                  show_color_control: true
                  name: Bar Table Lights
                - type: custom:mushroom-light-card
                  entity: light.spotlights
                  use_light_color: true
                  show_brightness_control: true
                  show_color_control: true
                  show_color_temp_control: true
                - type: custom:mushroom-light-card
                  entity: light.tv_table_lights
                  show_brightness_control: true
                  show_color_control: true
                  show_color_temp_control: true
                - type: custom:mushroom-light-card
                  entity: light.light_bars
                  show_brightness_control: true
                  hide_state: false
                  show_color_control: true
                  show_color_temp_control: true
                  use_light_color: true
                  # layout: vertical
                - type: horizontal-stack
                  cards:
                    - type: custom:mushroom-light-card
                      entity: light.upstairs_lights
                      tap_action:
                        action: more-info
                      use_light_color: true
                    - type: custom:mushroom-light-card
                      entity: light.sofa_ledstrip
                      use_light_color: true
                      tap_action:
                        action: more-info
            - type: entities
              entities:
                - type: divider
            - type: 'custom:button-card'
              template: card_title
              name: Other
            - type: custom:mushroom-vacuum-card
              entity: vacuum.roborock_s6_pure
              name: Robo Cleaner
              commands:
                - start_pause
                - stop
                - return_home
        right_button: Close

    view_layout:
      grid_areas: 1
    card_mod:
      style: |
        :host([dark-mode]) {
          --ha-card-background: #2D3033;
          --mush-icon-size: 50px;
        }
        ha-card {
          border-radius: 10px 10px 0px 0px;
          --control-height: 20px;
          --control-top: 16px;
          --control-border-radius: 5px;
          --control-border-spacing: 2px;
          --card-primary-font-size: 17px;
            icon-size: 50px;
            background: url('/local/images/tv_area.jpg'), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 90%);
            background-size: 80% auto, cover;
            background-position: right;
            background-repeat: no-repeat;
            background-blend-mode: saturation;

        }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.home_theater
        show_volume_level: true
        volume_controls:
          - volume_set
        icon_type: none
        primary_info: none
        fill_container: false
        name: Volume
        use_media_info: false
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        secondary_info: none
        icon: ''
        collapsible_controls: false
        layout: horizontal
        card_mod:
          style: |
            :host([dark-mode]) {
              --ha-card-background: rgb(var(--rgb-card-background-color));
              --mush-icon-size: 14px;
            }
            ha-card {
              border-radius: 10px 10px 0px 0px;
              --icon-size: 24px;
              --control-height: 15px;
              --control-top: 16px;
              --control-border-radius: 5px;
              --control-border-spacing: 2px;
              --card-primary-font-size: 14px;
            }
    view_layout:
      grid-column: 1
      grid-row: 2
    card_mod:
      style: |
        ha-card {
          border-radius: 0px 0px 0px 0px;
          height: 45px;
          margin-top: -14px;
          outline-color: red;
          --icon-size: 2px;
          --chip-spacing: 0px;
            background: url('/local/images/tv_area_bottom.jpg'), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 90%);
            background-size: 300px , cover;
            background-position: right;
            background-position: bottom;
            background-repeat: no-repeat;
            background-blend-mode: saturation;

        }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-chips-card
        fill_container: true
        chips:
          - type: template
            entity: light.livingroom_lights
            icon: >-
              {% if is_state('group.livingroom_lights', 'on') %}
              mdi:lightbulb-on  {% else %}  mdi:lightbulb  {% endif %}
            icon_color: >-
              {% if is_state('group.livingroom_lights', 'on') %} amber {% else
              %}  grey {% endif %}
            content: >-
              {% if is_state('group.livingroom_lights', 'on') %} {{
              expand(state_attr('group.livingroom_lights', 'entity_id')) |
              selectattr('state','eq','on') | list | count }}{% endif %}
          - type: template
            content: '{{ states(''sensor.kitchen_temperature'') }} ºC'
            icon: mdi:thermometer
            icon_color: >-
              {% set state=states('sensor.kitchen_temperature')|float(0) %} {%
              if state<20 %} blue {% elif state<23 %} green {% elif state<25 %}
              amber {% else %} red {% endif %}
        alignment: start
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: -16px;  
              --chip-height: 40px;
            }
    view_layout:
      grid-column: 1
      grid-row: 3
    card_mod:
      style: |
        ha-card {
          border-radius: 0px 0px 10px 10px;
          height: 40px;
          margin-top: -14px;
          outline-color: red;
          --chip-spacing: 0px;
          --ha-card-background: #352E1F;

        }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-chips-card
        fill_container: true
        chips:
          - type: action
            icon: mdi:audio-video
            tap_action:
              action: call-service
              service: media_player.toggle
              data: {}
              target:
                entity_id: media_player.home_theater           
           - type: action
             icon: mdi:power
             tap_action:
               action: call-service
               service: wake_on_lan.send_magic_packet
               data:
                 mac: XX:XX:XX:XX:XX:XX
                 broadcast_address: XXX.XXX.XX.XX  

          - type: action
            icon: mdi:remote-tv
            tap_action:
              action: call-service
              service: browser_mod.popup
              data:
                content:
                  type: custom:lg-remote-control
                  entity: media_player.tv_living_room
                  mac: XX:XX:XX:XX:XX:XX
                title: TV Remote
                size: fullscreen
              target: {}                               

          - type: action
            tap_action:
              action: call-service
              service: script.upstairs_light_movie_mode
              data: {}
              target: {}
            icon: mdi:movie-play-outline
          - type: action
            tap_action:
              action: call-service
              service: script.upstairs_light_bright
              data: {}
              target: {}
            icon: mdi:white-balance-sunny
          - type: action
            icon: mdi:weather-night
            tap_action:
              action: call-service
              service: script.living_room_cozy
              data: {}
              target: {}
        alignment: end
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
              --chip-height: 40px; 
            }
    view_layout:
      grid-column: 1
      grid-row: 3
    card_mod:
      style: |
        ha-card {
          height: 40px;
          margin-top: -14px;
          border-radius: 0px 0px 10px 10px;
          --ha-card-background: none;
        }
  - type: custom:gap-card
    height: 25

Dining Area card Code

###### Dining room card  
type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: auto
  grid-template-rows: auto
  column-gap: 0px
  row-gap: 0px
  grid-template-areas: |
    "1"
    "2"
    "3"
    "4"
    "5"
    "6"
    "7"
    "8"
    "9"
    "10"
    "11"
    "12"
cards:
  - type: custom:mushroom-light-card
    entity: light.dining_table_lights
    fill_container: true
    show_brightness_control: true
    use_light_color: false
    icon: mdi:silverware
    name: Dining Area
    secondary_info: none
    layout: horizontal
    tap_action:
      action: call-service
      service: browser_mod.popup
      data: 
        content:
          type: vertical-stack
          cards:
            - type: 'custom:button-card'
              template: card_title
              name: Dining Lights
              #label: 'Subtitle'
            - type: custom:mushroom-light-card
              entity: light.dining_table_lights
              show_brightness_control: true
              show_color_temp_control: true
              icon: mdi:lightbulb-variant-outline
              use_light_color: true
            - type: custom:mushroom-light-card
              entity: light.liqour_cabinet_led_strip
              show_brightness_control: true
              show_color_temp_control: false
              icon: mdi:led-strip-variant
              show_color_control: true
              use_light_color: true
        right_button: Close

      # action: navigate
      # navigation_path: /ui-lovelace-minimalist/Dining
    view_layout:
      grid_areas: 1
    card_mod:
      style: |
        :host([dark-mode]) {
          --ha-card-background: #2D3033;
          --mush-icon-size: 50px;
            height: 113px;
        }
        ha-card {
          border-radius: 10px 10px 0px 0px;
          --control-height: 40px;
          --control-top: 16px;
          --control-border-radius: 5px;
          --control-border-spacing: 2px;
          --card-primary-font-size: 17px;
            icon-size: 50px;
            background: url('/local/images/dining_area.jpg'), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 80%);
            background-size: 80% auto, cover;
            background-position: right;
            background-repeat: no-repeat;
            background-blend-mode: saturation;

        }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-chips-card
        fill_container: true
        chips:
          - type: template
            entity: light.livingroom_lights
            icon: >-
              {% if is_state('light.dining_table_lights', 'on') %}
              mdi:lightbulb-on  {% else %}  mdi:lightbulb  {% endif %}
            icon_color: >-
              {% if is_state('light.dining_table_lights', 'on') %} amber {% else
              %}  grey {% endif %}
            content: >-
              {% if is_state('light.dining_table_lights', 'on') %} {{
              expand(state_attr('light.dining_table_lights', 'entity_id')) |
              selectattr('state','eq','on') | list | count }}{% endif %}
          - type: template
            content: '{{ states(''sensor.kitchen_temperature'') }} ºC'
            icon: mdi:thermometer
            icon_color: >-
              {% set state=states('sensor.kitchen_temperature')|float(0) %} {%
              if state<20 %} blue {% elif state<23 %} green {% elif state<25 %}
              amber {% else %} red {% endif %}
          - type: template
            content: '{{ states(''sensor.kitchen_humidity'') }} %'
            icon: mdi:water-percent
            icon_color: >-
              {% set state=states('sensor.kitchen_humidity')|float(0) %} {%
              if state<40 %} red {% elif state<50 %} amber {% elif state<60 %}
              blue {% else %} blue {% endif %}
        alignment: start
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
              --chip-height: 40px;   
            }
    view_layout:
      grid-column: 1
      grid-row: 3
    card_mod:
      style: |
        ha-card {
          border-radius: 0px 0px 10px 10px;
          height: 40px;
          margin-top: -14px;
          outline-color: red;
          --chip-spacing: 0px;
          --ha-card-background: #352E1F;

        }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-chips-card
        fill_container: true
        chips:
          - type: template
          - type: action
            tap_action:
              action: call-service
              service: light.turn_off
              data: {}
              target:
                entity_id:
                  - light.dining_table_lights
                  - light.liqour_cabinet_led_strip
            icon: mdi:lightbulb-group-off-outline
          - type: action
            tap_action:
              action: call-service
              service: scene.turn_on
              data: {}
              target:
                entity_id: scene.dining_area_bright_2
            icon: mdi:white-balance-sunny
          - type: action
            icon: mdi:weather-night
            tap_action:
              action: call-service
              service: scene.turn_on
              data: {}
              target:
                entity_id: scene.dining_area_cozy
        alignment: end
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0; 
              --chip-height: 40px; 
            }
    view_layout:
      grid-column: 1
      grid-row: 3
    card_mod:
      style: |
        ha-card {
          height: 40px;
          margin-top: -14px;
          border-radius: 0px 0px 10px 10px;
          --ha-card-background: none;
        }

Kitchen Room Card Code

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: auto
  grid-template-rows: auto
  column-gap: 0px
  row-gap: 0px
  grid-template-areas: |
    "1"
    "2"
    "3"
    "4"
    "5"
    "6"
    "7"
    "8"
    "9"
    "10"
    "11"
    "12"
cards:
  - type: custom:gap-card
    height: 25
  - type: custom:mushroom-light-card
    entity: light.kitchen_spotlights
    fill_container: true
    show_brightness_control: true
    use_light_color: false
    icon: mdi:lightbulb-spot
    name: Kitchen Area
    secondary_info: none
    layout: horizontal
    tap_action:
      action: call-service
      service: light.toggle
      data: {}
      target:
        entity_id:
          - light.kitchen_spotlights
    view_layout:
      grid_areas: 1
    card_mod:
      style: |
        :host([dark-mode]) {
          --ha-card-background: #2D3033;
          --mush-icon-size: 50px;
            height: 113px;
        }
        ha-card {
          border-radius: 10px 10px 0px 0px;
          --control-height: 40px;
          --control-top: 16px;
          --control-border-radius: 5px;
          --control-border-spacing: 2px;
          --card-primary-font-size: 20px;
            icon-size: 50px;
            background: url('/local/images/kitchen.jpg'), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 80%);
            background-size: 80% auto, cover;
            background-position: right;
            background-repeat: no-repeat;
            background-blend-mode: saturation;

        }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-chips-card
        fill_container: true
        chips:
          - type: template
            entity: light.kitchen_spotlights
            icon: >-
              {% if is_state('light.kitchen_spotlights', 'on') %}
              mdi:lightbulb-on  {% else %}  mdi:lightbulb  {% endif %}
            icon_color: >-
              {% if is_state('light.kitchen_spotlights', 'on') %} amber {% else
              %} grey {% endif %}
            content: >-
              {% if is_state('light.kitchen_spotlights', 'on') %} {{
              expand(state_attr('light.kitchen_spotlights', 'entity_id')) |
              selectattr('state','eq','on') | list | count + 1}}{% endif %}
          - type: template
            content: '{{ states(''sensor.kitchen_temperature'') }} ºC'
            icon: mdi:thermometer
            icon_color: >-
              {% set state=states('sensor.kitchen_temperature')|float(0) %} {%
              if state<20 %} blue {% elif state<23 %} green {% elif state<25 %}
              amber {% else %} red {% endif %}
          - type: template
            content: '{{ states(''sensor.kitchen_humidity'') }} %'
            icon: mdi:water-percent
            icon_color: >-
              {% set state=states('sensor.kitchen_humidity')|float(0) %} {%
              if state<40 %} red {% elif state<50 %} amber {% elif state<60 %}
              blue {% else %} blue {% endif %}
        alignment: start
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;  
              --chip-height: 40px;
            }
    view_layout:
      grid-column: 1
      grid-row: 3
    card_mod:
      style: |
        ha-card {
          border-radius: 0px 0px 10px 10px;
          height: 40px;
          margin-top: -14px;
          outline-color: red;
          --chip-spacing: 0px;
          --ha-card-background: #352E1F;

        }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-chips-card
        fill_container: true
        chips:
          - type: template
            content: >-
              {% if is_state('switch.grill', 'on') %} The Grill Is Turned On!!!!{% endif %}

        alignment: center
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: {% if is_state('switch.grill', 'on') %} red{% endif %};
              --chip-spacing: 0; 
              --chip-height: 38px; 

            }
    view_layout:
      grid-column: 1
      grid-row: 3
    card_mod:
      style: |
        ha-card {
          height: 40px;
          margin-top: -14px;
          border-radius: 0px 0px 10px 10px;
          --ha-card-background: none;
        }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-chips-card
        fill_container: true
        chips:
          - type: template
          - type: action
            icon: mdi:grill
            tap_action:
              action: call-service
              service: switch.toggle
              data: {}
              target:
                entity_id:
                  - switch.grill

        alignment: end
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0; 
              --chip-height: 40px; 
            }
    view_layout:
      grid-column: 1
      grid-row: 3
    card_mod:
      style: |
        ha-card {
          height: 40px;
          margin-top: -14px;
          border-radius: 0px 0px 10px 10px;
          --ha-card-background: none;
        }