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

[berkans (Berkan Sezer)]

So I have been trying to create a dynamic football page for a while.

Currently I have this setup.

I am tracking 4 football teams and their fixture. The chip on the picture states that there won’t be any much scheduled for today. If there is gonna be any match listed then the ball icon changes into the logo of the team who has a fixture on the same day.

Again “no match” info will turn into “Maç Günü” (Match day) with the logo of team included.

So when I click it a new popup comes up and the new page gives details about the schedules if any exists.

Now I am developing this page with a more dynamic view. I am putting an rss feed into the page regarding news from the media.

As I said before, new design will be fully dynamic. If a team is gonna play a match on that day its logo will appear on the main screen. When I click the logo a new page will popup. The first line will be the dynamic picture of the team who has a match. The picture will be taken from rss so it changes constantly. On the second line there will be match details: start time, opponents name etc… The third line will consist of the news regarding the match day team including some info like lineup. At the end of the event this page will refresh and turns into a general football news page.

With this method you can almost track anything. You can filter the news you like from any subject even from the general news. I am also planning to display weather news on my weather card page later.

I will post the code when I complete the page.

[coolhand]

Perhaps this is something @piitaya can comment on. I may be missing something simple, but is it possible to just inherit the colors of the user-selected theme? I’ve had some trouble replicating the --shape-color opacity, but then I realized this may be something you already considered? I’ve attempted to use the “default” color value in most of your cards, but that does not seem to inherit the user-selected theme colors. Again, I feel like I’m missing something simple.

Thank you for your hard work on this project. I love it btw.

[Sdomotica_Automation]

@berkans

d before, new design will be fully dynamic. If a team is gonna play a match on that da

I made a similar tool, could you share your code?
Thks
Sandro

[Vintage89]

Thanks a lot

[Kabala (Cata)]

new media setup share

off

close

open

all three players play

[freibiergesicht]

Thank you very much! Excellent!!!

Just one more question: Is it possible to exclude the group entity in the popup? I mean "group.all_lights" in your code

[pbohannon (PB)]

Hello again! I’m working to try and implement a version of your updated room-card and the only area in which I’m having issues is in matching icon colors to the backgrounds (both of the chips and template cards). Here’s an example of one of your examples that I’m particularly interested in. I like this because the color changes are subtle but add flavor beyond just using the default orange.

However, I’m struggling to implement this. I’m trying to change the background in the :host section of card_mon/styling blocks. Here’s an example [using decluttering cards to save some space here but alsio has been replicated by extrapolating out to your original code]:

room-card:
  default:
    - icon_color: 'orange'
  card:
    type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: '[[primary]]'
        secondary: '{{ states(''[[temp_entity]]'') | round(0) }} °C'
        icon: mdi:food
        entity: '[[entity]]'
        tap_action:
          action: navigate
          navigation_path: kitche
        hold_action:
          action: toggle
        icon_color: '{{ ''[[icon_color]]'' if is_state(entity, ''on'') else ''disabled'' }}'
        fill_container: true
        layout: horizontal
        multiline_secondary: false
        card_mod:
          style: |
            :host([dark-mode]) {
              background: rgba(var(--rgb-primary-background-color), 0.2);
            } 
            :host {
              background: rgba(var(--mush-rgb-red));
              --mush-icon-size: 76px;
              height: 66px;
              margin-left: -18px !important;
            }

1/ I can pass in a variable with the simple text name of a color and the above code works properly to change the icon colors.
2/ I can pass in the simple text name of a color and we’re getting closer.

:host {
              background: red;

But I can’t seem to figure out how to turn the color into RGB representation without hand-setting it such that I can use the gradient. I’ve spent a few hours trying to understand where and where I get access to the --mush-rgb-xxxx and --rgb-xxxx variables, but I’m pretty lost at this point. If I use the Inspector, zoom in to the closest element available, I have an ha-card with a shadow root underneath it, which I think is why your code uses the :host header. Clicking that in Inspector does allow me to see I have access to some color variables:

Ok, so let’s change it to use the variable:

:host {
              background: rgba(var(--rgb-red));

![image|300x192](upload://5sHWQZNPidXBRuuMzeDlNLlnZvk.png)

Getting better..  Let's get fancy and try to variableize it:

:host {
              background: rgba(var(--rgb-[[icon-color]]));

:host {
              background: rgba(var(--rgb-''[[icon-color]]''));

No bueno.

So… would you mind to give me a nudge as to how you’re making the background colors follow the icon colors for your room-card? Again, I think my gap is in knowing CSS very little to begin with and not understand when I have access to the --mush and --rgb variables. Any help much appreciated!

[tempus2016 (Tempus)]

This is an example of mine.

type: conditional
conditions:
  - entity: light.all_lights_group
    state: 'on'
chip:
  type: entity
  entity: sensor.lights_on_count
  icon: ''
  tap_action:
    action: fire-dom-event
    haptic: success
    browser_mod:
      command: popup
      card:
        type: custom:auto-entities
        card:
          type: entities
          state_color: true
          show_header_toggle: false
        filter:
          include:
            - domain: light
              state: 'on'
          exclude:
            - attributes:
                entity_id: $$*
        show_empty: false
      dark_mode: true
      deviceID:
        - this
      title: Lights On

Add the same exclude:

          exclude:
            - attributes:
                entity_id: $$*

[cirmi (Daniel)]

Is the haptic feedback working for you? Even if I set “haptic: success” in the code like you did above, I am not getting any vibration. Did you have to do some extra setup to make it work?

[Pedro050763]

Hi, really nice cards. Can you share your code. Thanks

[berkans (Berkan Sezer)]

So I have fınished my dynamic football page.

Dynamic Football Page

Every single detail on the page changes according to the data received from calendar and rss feeds. If there is no match : the general football page and upcoming macthes data will be displayed. If any of the teams have a fixture then their logo, match details and team news will be in front.

type: custom:stack-in-card
layout_type: masonry
layout: {}
cards:
  - square: false
    columns: 1
    type: grid
    cards:
      - type: conditional
        conditions:
          - entity: input_boolean.futbol_haber
            state: 'on'
        card:
          type: custom:list-card
          entity: sensor.futbol
          title: ''
          feed_attribute: entries
          row_limit: 1
          columns:
            - title: ''
              type: image
              add_link: link
              field: image
              width: 350
              height: 220
          card_mod:
            style: |
              :host {
                --ha-card-background: transparent;
              }
                  ha-card {
                    margin-top: auto;
                    margin-left: 1px;
                    margin-right: 1px;
                    margin-bottom: 5px;
                    padding: 15px;
                    width: auto;
                  }
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: conditional
            conditions:
              - entity: input_boolean.futbol_haber
                state: 'on'
            card:
              type: custom:stack-in-card
              cards:
                - type: custom:mushroom-template-card
                  primary: Süperlig
                  secondary: Maç Programı
                  picture: /local/png/futbol.png
                  icon: mdi:weather-cloudy
                  icon_color: blue
                  card_mod:
                    style: |
                      :host([dark-mode]) {
                        background: rgba(var(--rgb-primary-background-color), 0.2);
                        --card-primary-font-size: 16px;
                        --card-secondary-font-size: 13px
                      } 
                      :host {
                        background: rgba(var(--rgb-primary-text-color), 0.025);
                        --mush-icon-size: 53px;
                        height: 76px;
                        margin-left: 0px !important;
                        margin-bottom: -10px !important;
                      }
                - type: custom:atomic-calendar-revive
                  entities:
                    - entity: calendar.trabzonspor
                      blocklist: (word1)|(word2)
                      name: Trabzonspor
                    - entity: calendar.galatasaray
                      blocklist: (word1)|(word2)
                      name: Galatasaray
                    - entity: calendar.fenerbahce
                      blocklist: (word1)|(word2)
                      name: Fenerbahçe
                    - entity: calendar.besiktas
                      blocklist: (word1)|(word2)
                      name: Beşiktaş
                  maxDaysToShow: 10
                  firstDayOfWeek: 1
                  refreshInterval: 600
                  showMonth: true
                  showCurrentEventLine: false
                  showDate: false
                  sortByStartTime: true
                  showDeclined: true
                  showRelativeTime: true
                  showMultiDay: false
                  showMultiDayEventParts: true
                  hideDuplicates: false
                  showLastCalendarWeek: false
                  calShowDescription: true
                  disableCalLink: false
                  disableCalLocationLink: false
                  disableCalEventLink: false
                  dimFinishedEvents: false
                  showProgressBar: false
                  showDescription: false
                  card_mod:
                    style: |
                      ha-card {
                        background: transparent;
                        font-size: 14px;
              card_mod:
                style: |
                  ha-card {
                    background: transparent;
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: conditional
            conditions:
              - entity: input_boolean.futbol_haber
                state: 'on'
            card:
              type: custom:stack-in-card
              cards:
                - type: custom:mushroom-template-card
                  primary: Haberler
                  picture: /local/png/news7.png
                  icon: mdi:weather-cloudy
                  icon_color: blue
                  card_mod:
                    style: |
                      :host([dark-mode]) {
                        background: rgba(var(--rgb-primary-background-color), 0.2);
                        --card-primary-font-size: 18px;
                        --card-secondary-font-size: 13px
                      } 
                      :host {
                        background: rgba(var(--rgb-primary-text-color), 0.025);
                        --mush-icon-size: 53px;
                        height: 76px;
                        margin-left: 0px !important;
                        margin-bottom: -10px !important;
                      }
                - type: custom:list-card
                  entity: sensor.futbol
                  title: ''
                  feed_attribute: entries
                  row_limit: 15
                  columns:
                    - title: ''
                      type: image
                      add_link: link
                      field: image
                      width: 140
                      height: 80
                      card_mod:
                        style: |
                          ha-card {
                            padding: 1px;
                            background: rgba(var(--rgb-primary-background-color), 0.5);
                            margin-bottom: -5px;
                    - title: ''
                      field: title
                      add_link: link
                      style:
                        - white-space: wrap
                  card_mod:
                    style: |
                      ha-card {
                        padding: 1px;
                        background: rgba(var(--rgb-primary-background-color), 0.5);
                        margin-bottom: -5px;
                        margin-right: -10px;
                        margin-left: -10px;
              card_mod:
                style: |
                  ha-card {
                    background: transparent;
  - square: false
    columns: 1
    type: grid
    cards:
      - type: conditional
        conditions:
          - entity: input_boolean.fenerbahce
            state: 'on'
        card:
          type: custom:list-card
          entity: sensor.fenerbahce
          title: ''
          feed_attribute: entries
          row_limit: 1
          columns:
            - title: ''
              type: image
              add_link: link
              field: image
              width: 350
              height: 220
          card_mod:
            style: |
              :host {
                --ha-card-background: transparent;
              }
                  ha-card {
                    margin-top: auto;
                    margin-left: 1px;
                    margin-right: 1px;
                    margin-bottom: 5px;
                    padding: 15px;
                    width: auto;
                  }
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: conditional
            conditions:
              - entity: input_boolean.fenerbahce
                state: 'on'
            card:
              type: custom:stack-in-card
              cards:
                - type: custom:mushroom-template-card
                  primary: Fenerbahçe
                  secondary: Maç Programı
                  picture: /local/png/fenerbahce.png
                  icon: mdi:weather-cloudy
                  icon_color: blue
                  card_mod:
                    style: |
                      :host([dark-mode]) {
                        background: rgba(var(--rgb-primary-background-color), 0.2);
                        --card-primary-font-size: 16px;
                        --card-secondary-font-size: 13px
                      } 
                      :host {
                        background: rgba(var(--rgb-primary-text-color), 0.025);
                        --mush-icon-size: 53px;
                        height: 76px;
                        margin-left: 0px !important;
                        margin-bottom: -10px !important;
                      }
                - type: custom:atomic-calendar-revive
                  entities:
                    - entity: calendar.fenerbahce
                      blocklist: (word1)|(word2)
                      name: Fenerbahçe
                  maxDaysToShow: 7
                  firstDayOfWeek: 1
                  refreshInterval: 600
                  showMonth: true
                  showCurrentEventLine: false
                  showDate: false
                  sortByStartTime: true
                  showDeclined: true
                  showRelativeTime: true
                  showMultiDay: false
                  showMultiDayEventParts: true
                  hideDuplicates: false
                  showLastCalendarWeek: false
                  calShowDescription: true
                  disableCalLink: false
                  disableCalLocationLink: false
                  disableCalEventLink: false
                  dimFinishedEvents: false
                  showProgressBar: false
                  showDescription: false
                  card_mod:
                    style: |
                      ha-card {
                        background: transparent;
                        font-size: 14px;
              card_mod:
                style: |
                  ha-card {
                    background: transparent;
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: conditional
            conditions:
              - entity: input_boolean.fenerbahce
                state: 'on'
            card:
              type: custom:stack-in-card
              cards:
                - type: custom:mushroom-template-card
                  primary: Haberler
                  picture: /local/png/news7.png
                  icon: mdi:weather-cloudy
                  icon_color: blue
                  card_mod:
                    style: |
                      :host([dark-mode]) {
                        background: rgba(var(--rgb-primary-background-color), 0.2);
                        --card-primary-font-size: 18px;
                        --card-secondary-font-size: 13px
                      } 
                      :host {
                        background: rgba(var(--rgb-primary-text-color), 0.025);
                        --mush-icon-size: 53px;
                        height: 76px;
                        margin-left: 0px !important;
                        margin-bottom: -10px !important;
                      }
                - type: custom:list-card
                  entity: sensor.fenerbahce
                  title: ''
                  feed_attribute: entries
                  row_limit: 7
                  columns:
                    - title: ''
                      type: image
                      add_link: link
                      field: image
                      width: 140
                      height: 80
                      card_mod:
                        style: |
                          ha-card {
                            padding: 1px;
                            background: rgba(var(--rgb-primary-background-color), 0.5);
                            margin-bottom: -5px;
                    - title: ''
                      field: title
                      add_link: link
                      style:
                        - white-space: wrap
                  card_mod:
                    style: |
                      ha-card {
                        padding: 1px;
                        background: rgba(var(--rgb-primary-background-color), 0.5);
                        margin-bottom: -5px;
                        margin-right: -10px;
                        margin-left: -10px;
              card_mod:
                style: |
                  ha-card {
                    background: transparent;
  - square: false
    columns: 1
    type: grid
    cards:
      - type: conditional
        conditions:
          - entity: input_boolean.besiktas
            state: 'on'
        card:
          type: custom:list-card
          entity: sensor.besiktas
          title: ''
          feed_attribute: entries
          row_limit: 1
          columns:
            - title: ''
              type: image
              add_link: link
              field: image
              width: 350
              height: 220
          card_mod:
            style: |
              :host {
                --ha-card-background: transparent;
              }
                  ha-card {
                    margin-top: auto;
                    margin-left: 1px;
                    margin-right: 1px;
                    margin-bottom: 5px;
                    padding: 15px;
                    width: auto;
                  }
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: conditional
            conditions:
              - entity: input_boolean.besiktas
                state: 'on'
            card:
              type: custom:stack-in-card
              cards:
                - type: custom:mushroom-template-card
                  primary: Beşiktaş
                  secondary: Maç Programı
                  picture: /local/icons/besiktas2.png
                  icon: mdi:weather-cloudy
                  icon_color: blue
                  card_mod:
                    style: |
                      :host([dark-mode]) {
                        background: rgba(var(--rgb-primary-background-color), 0.2);
                        --card-primary-font-size: 16px;
                        --card-secondary-font-size: 13px
                      } 
                      :host {
                        background: rgba(var(--rgb-primary-text-color), 0.025);
                        --mush-icon-size: 53px;
                        height: 76px;
                        margin-left: 0px !important;
                        margin-bottom: -10px !important;
                      }
                - type: custom:atomic-calendar-revive
                  entities:
                    - entity: calendar.besiktas
                      blocklist: (word1)|(word2)
                      name: Beşiktaş
                  maxDaysToShow: 10
                  firstDayOfWeek: 1
                  refreshInterval: 600
                  showMonth: true
                  showCurrentEventLine: false
                  showDate: false
                  sortByStartTime: true
                  showDeclined: true
                  showRelativeTime: true
                  showMultiDay: false
                  showMultiDayEventParts: true
                  hideDuplicates: false
                  showLastCalendarWeek: false
                  calShowDescription: true
                  disableCalLink: false
                  disableCalLocationLink: false
                  disableCalEventLink: false
                  dimFinishedEvents: false
                  showProgressBar: false
                  showDescription: false
                  card_mod:
                    style: |
                      ha-card {
                        background: transparent;
                        font-size: 14px;
              card_mod:
                style: |
                  ha-card {
                    background: transparent;
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: conditional
            conditions:
              - entity: input_boolean.besiktas
                state: 'on'
            card:
              type: custom:stack-in-card
              cards:
                - type: custom:mushroom-template-card
                  primary: Haberler
                  picture: /local/png/news7.png
                  icon: mdi:weather-cloudy
                  icon_color: blue
                  card_mod:
                    style: |
                      :host([dark-mode]) {
                        background: rgba(var(--rgb-primary-background-color), 0.2);
                        --card-primary-font-size: 18px;
                        --card-secondary-font-size: 13px
                      } 
                      :host {
                        background: rgba(var(--rgb-primary-text-color), 0.025);
                        --mush-icon-size: 53px;
                        height: 76px;
                        margin-left: 0px !important;
                        margin-bottom: -10px !important;
                      }
                - type: custom:list-card
                  entity: sensor.besiktas
                  title: ''
                  feed_attribute: entries
                  row_limit: 7
                  columns:
                    - title: ''
                      type: image
                      add_link: link
                      field: image
                      width: 140
                      height: 80
                      card_mod:
                        style: |
                          ha-card {
                            padding: 1px;
                            background: rgba(var(--rgb-primary-background-color), 0.5);
                            margin-bottom: -5px;
                    - title: ''
                      field: title
                      add_link: link
                      style:
                        - white-space: wrap
                  card_mod:
                    style: |
                      ha-card {
                        padding: 1px;
                        background: rgba(var(--rgb-primary-background-color), 0.5);
                        margin-bottom: -5px;
                        margin-right: -10px;
                        margin-left: -10px;
              card_mod:
                style: |
                  ha-card {
                    background: transparent;
  - square: false
    columns: 1
    type: grid
    cards:
      - type: conditional
        conditions:
          - entity: input_boolean.galatasaray
            state: 'on'
        card:
          type: custom:list-card
          entity: sensor.galatasaray
          title: ''
          feed_attribute: entries
          row_limit: 1
          columns:
            - title: ''
              type: image
              add_link: link
              field: image
              width: 350
              height: 220
          card_mod:
            style: |
              :host {
                --ha-card-background: transparent;
              }
                  ha-card {
                    margin-top: auto;
                    margin-left: 1px;
                    margin-right: 1px;
                    margin-bottom: 5px;
                    padding: 15px;
                    width: auto;
                  }
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: conditional
            conditions:
              - entity: input_boolean.galatasaray
                state: 'on'
            card:
              type: custom:stack-in-card
              cards:
                - type: custom:mushroom-template-card
                  primary: Galatasaray
                  secondary: Maç Programı
                  picture: /local/png/galatasaray.png
                  icon: mdi:weather-cloudy
                  icon_color: blue
                  card_mod:
                    style: |
                      :host([dark-mode]) {
                        background: rgba(var(--rgb-primary-background-color), 0.2);
                        --card-primary-font-size: 16px;
                        --card-secondary-font-size: 13px
                      } 
                      :host {
                        background: rgba(var(--rgb-primary-text-color), 0.025);
                        --mush-icon-size: 53px;
                        height: 76px;
                        margin-left: 0px !important;
                        margin-bottom: -10px !important;
                      }
                - type: custom:atomic-calendar-revive
                  entities:
                    - entity: calendar.galatasaray
                      blocklist: (word1)|(word2)
                      name: Galatasaray
                  maxDaysToShow: 10
                  firstDayOfWeek: 1
                  refreshInterval: 600
                  showMonth: true
                  showCurrentEventLine: false
                  showDate: false
                  sortByStartTime: true
                  showDeclined: true
                  showRelativeTime: true
                  showMultiDay: false
                  showMultiDayEventParts: true
                  hideDuplicates: false
                  showLastCalendarWeek: false
                  calShowDescription: true
                  disableCalLink: false
                  disableCalLocationLink: false
                  disableCalEventLink: false
                  dimFinishedEvents: false
                  showProgressBar: false
                  showDescription: false
                  card_mod:
                    style: |
                      ha-card {
                        background: transparent;
                        font-size: 14px;
              card_mod:
                style: |
                  ha-card {
                    background: transparent;
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: conditional
            conditions:
              - entity: input_boolean.galatasaray
                state: 'on'
            card:
              type: custom:stack-in-card
              cards:
                - type: custom:mushroom-template-card
                  primary: Haberler
                  picture: /local/png/news7.png
                  icon: mdi:weather-cloudy
                  icon_color: blue
                  card_mod:
                    style: |
                      :host([dark-mode]) {
                        background: rgba(var(--rgb-primary-background-color), 0.2);
                        --card-primary-font-size: 18px;
                        --card-secondary-font-size: 13px
                      } 
                      :host {
                        background: rgba(var(--rgb-primary-text-color), 0.025);
                        --mush-icon-size: 53px;
                        height: 76px;
                        margin-left: 0px !important;
                        margin-bottom: -10px !important;
                      }
                - type: custom:list-card
                  entity: sensor.galatasaray
                  title: ''
                  feed_attribute: entries
                  row_limit: 7
                  columns:
                    - title: ''
                      type: image
                      add_link: link
                      field: image
                      width: 140
                      height: 80
                      card_mod:
                        style: |
                          ha-card {
                            padding: 1px;
                            background: rgba(var(--rgb-primary-background-color), 0.5);
                            margin-bottom: -5px;
                    - title: ''
                      field: title
                      add_link: link
                      style:
                        - white-space: wrap
                  card_mod:
                    style: |
                      ha-card {
                        padding: 1px;
                        background: rgba(var(--rgb-primary-background-color), 0.5);
                        margin-bottom: -5px;
                        margin-right: -10px;
                        margin-left: -10px;
              card_mod:
                style: |
                  ha-card {
                    background: transparent;
  - square: false
    columns: 1
    type: grid
    cards:
      - type: conditional
        conditions:
          - entity: input_boolean.trabzonspor
            state: 'on'
        card:
          type: custom:list-card
          entity: sensor.trabzonspor
          title: ''
          feed_attribute: entries
          row_limit: 1
          columns:
            - title: ''
              type: image
              add_link: link
              field: image
              width: 350
              height: 220
          card_mod:
            style: |
              :host {
                --ha-card-background: transparent;
              }
                  ha-card {
                    margin-top: auto;
                    margin-left: 1px;
                    margin-right: 1px;
                    margin-bottom: 5px;
                    padding: 15px;
                    width: auto;
                  }
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: conditional
            conditions:
              - entity: input_boolean.trabzonspor
                state: 'on'
            card:
              type: custom:stack-in-card
              cards:
                - type: custom:mushroom-template-card
                  primary: Trabzonspor
                  secondary: Maç Programı
                  picture: /local/png/trabzonspor.png
                  icon: mdi:weather-cloudy
                  icon_color: blue
                  card_mod:
                    style: |
                      :host([dark-mode]) {
                        background: rgba(var(--rgb-primary-background-color), 0.2);
                        --card-primary-font-size: 16px;
                        --card-secondary-font-size: 13px
                      } 
                      :host {
                        background: rgba(var(--rgb-primary-text-color), 0.025);
                        --mush-icon-size: 53px;
                        height: 76px;
                        margin-left: 0px !important;
                        margin-bottom: -10px !important;
                      }
                - type: custom:atomic-calendar-revive
                  entities:
                    - entity: calendar.trabzonspor
                      blocklist: (word1)|(word2)
                      name: Galatasaray
                  maxDaysToShow: 10
                  firstDayOfWeek: 1
                  refreshInterval: 600
                  showMonth: true
                  showCurrentEventLine: false
                  showDate: false
                  sortByStartTime: true
                  showDeclined: true
                  showRelativeTime: true
                  showMultiDay: false
                  showMultiDayEventParts: true
                  hideDuplicates: false
                  showLastCalendarWeek: false
                  calShowDescription: true
                  disableCalLink: false
                  disableCalLocationLink: false
                  disableCalEventLink: false
                  dimFinishedEvents: false
                  showProgressBar: false
                  showDescription: false
                  card_mod:
                    style: |
                      ha-card {
                        background: transparent;
                        font-size: 14px;
              card_mod:
                style: |
                  ha-card {
                    background: transparent;
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: conditional
            conditions:
              - entity: input_boolean.trabzonspor
                state: 'on'
            card:
              type: custom:stack-in-card
              cards:
                - type: custom:mushroom-template-card
                  primary: Haberler
                  picture: /local/png/news7.png
                  icon: mdi:weather-cloudy
                  icon_color: blue
                  card_mod:
                    style: |
                      :host([dark-mode]) {
                        background: rgba(var(--rgb-primary-background-color), 0.2);
                        --card-primary-font-size: 18px;
                        --card-secondary-font-size: 13px
                      } 
                      :host {
                        background: rgba(var(--rgb-primary-text-color), 0.025);
                        --mush-icon-size: 53px;
                        height: 76px;
                        margin-left: 0px !important;
                        margin-bottom: -10px !important;
                      }
                - type: custom:list-card
                  entity: sensor.trabzonspor
                  title: ''
                  feed_attribute: entries
                  row_limit: 7
                  columns:
                    - title: ''
                      type: image
                      add_link: link
                      field: image
                      width: 140
                      height: 80
                      card_mod:
                        style: |
                          ha-card {
                            padding: 1px;
                            background: rgba(var(--rgb-primary-background-color), 0.5);
                            margin-bottom: -5px;
                    - title: ''
                      field: title
                      add_link: link
                      style:
                        - white-space: wrap
                  card_mod:
                    style: |
                      ha-card {
                        padding: 1px;
                        background: rgba(var(--rgb-primary-background-color), 0.5);
                        margin-bottom: -5px;
                        margin-right: -10px;
                        margin-left: -10px;
              card_mod:
                style: |
                  ha-card {
                    background: transparent;
card_mod:
  style: |
    ha-card {
      padding: 1px;
      background: rgba(var(--rgb-primary-background-color), 0.5);

You have to have atomic calendar, feedparse and list card to be installed from HACS.

You can almost display any specific info on your mushroom interface. You can filter any content from any news and have them displayed on your dashboard.

Create input booleans for your favorite teams. And also create one boolean for the general football news. Connect them together.

Every single detail on that page is changing according to the data. Even the images.

[antoine_g (Antoine)]

Hello,

I’m looking for the solution to display the date in template card like entity card for the secondary line.
By defaut, we’ve a date format “XX minutes ago” but when we use the template card, it show a timestamp.

How can I convert the timestamp to have the same resultat that the entity card by default ?

Here is my secondary line for the template card

secondary: |
  {{ states(entity) }}

Thanks.

[xAPPO (Kevin Hawkins)]

@berkans

So I fınished my dynamic football page

Whilst I am not a football fan I can see the considerable work that has gone into this and it looks great. Well done.

[GuySie]

This is the route I ended up taking, thanks very much for pointing me in this direction! It’s not quite perfect yet, but minimalist area card definitely does manage to cover most of the functionality I was looking for in migrating. Moving over to mushroom has been very enjoyable so far!

[berkans (Berkan Sezer)]

Thank you very much. I am trying to use Home Assistant not only for Smart home but for smart life. Now I have found much more informative calendars for football as well. I think I may also display match results from fixtures, but of course it mostly depends on how accurately and fast these services upload the scores to calendar events.

Later on I am also planning to use rss services for different pages.

[rhysb (Rhys)]

Mushroom cards create the --rgb-[color] dynamically, so are only available within a Mushroom card. If --mush-rgb-[color] is defined it uses this value, otherwise it uses the hardcoded --default-[color] value. The --mush-rgb-[color] values can be defined in a theme file and these will then also be available to other cards. So, if you want to use the CSS values outside of the Mushroom cards you will need to define them in a custom theme. The quick and easy way to do this is to copy @piitaya’s example from his theme github and place it in a new theme file.

GitHub - piitaya/lovelace-mushroom-themes: Additional themes for Lovelace...

[rhysb (Rhys)]

Here is a Mushroom Input Number card if anyone needs one. It requires stack-in-card, mushroom-card, car-mod and my-slider from my-cards.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: input_number.lounge_pc_volume
    icon: |
      {% set vol_level = states(entity) | float %}
      {% if vol_level == 0 %}
        mdi:volume-mute
      {% elif vol_level > 0.66 %}
        mdi:volume-high
      {% elif vol_level < 0.33 %}
        mdi:volume-low
      {% else %}
        mdi:volume-medium
      {% endif %}
    icon_color: indigo
    primary: Volume
    secondary: |
      {% set vol = states(entity) | float * 100 %}
      {{ vol | round | int }}%
  - type: custom:my-slider
    entity: input_number.lounge_pc_volume
    radius: 12px
    height: 42px
    mainSliderColor: rgb(var(--mush-rgb-indigo))
    secondarySliderColor: rgba(var(--mush-rgb-indigo), 0.2)
    mainSliderColorOff: rgb(var(--mush-rgb-disabled))
    secondarySliderColorOff: rgba(var(--mush-rgb-disabled), 0.2)
    thumbHorizontalPadding: 0px
    thumbVerticalPadding: 0px
    thumbWidth: 0px
    card_mod:
      style: |
        ha-card {
          padding: 0px 11px 11px;
          --mush-rgb-disabled: 189,189,189;
          --mush-rgb-indigo: 63, 81, 181;
        }

[proffalken (Matthew Macdonald Wallace)]

Hey folks,

I’m just starting to migrate over to the Mushroom Cards, and I want to show a chip for each person with the appropriate battery level as the icon, coloured based on the battery percentage.

The following code returns the correct result in developer settings -> templates, however when I move it into the card editor for the dashboard it throws missed comma between flow collection entries

{% for p in states.person -%}
{% set name = p.entity_id -%}
# Make sure we have a source from which to collect the battery level
{% if  state_attr(name, 'source') -%}
# Get the battery_level data for the appropriate user
{% set battery_level = states('sensor.{}_battery_level'.format(state_attr(name,
      'source').split('.')[1])) -%}
{% else -%}
# If we don't have a battery_level, set it to -1 so we can filter on it later
{% set battery_level = -1 -%}
{% endif -%}
type: custom:mushroom-chips-card
chips:
  - type: template
    content: >
      {{ state_attr(name, "friendly_name") }} {% if (battery_level != "unknown") and (battery_level | int >= 0) %}({{ battery_level }}%){% endif %}
    {% if (battery_level != "unknown") and (battery_level | int >= 0) %} 
    icon: >-
      {{ state_attr(states('sensor.{}_battery_level'.format(state_attr(name,
      'source').split('.')[1])), 'icon') }}
    icon_color: >-
      {% if states('sensor.{}_battery_level'.format(state_attr(name,
      'source').split('.')[1])) | int < 20 -%}
        red
      {% elif states('sensor.{}_battery_level'.format(state_attr(name,
      'source').split('.')[1])) | int < 50 -%}
        orange
      {% else -%}
        green
      {% endif %}
    {% endif %}
{% endfor -%}

The resulting card should look like this for each user:

Is anyone able help?

[Kabala (Cata)]

type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: true
  border_radius: true
  margin: true
  outer_padding: true
  background: true
cards:
  - type: vertical-stack
    cards:
      - type: conditional
        conditions:
          - entity: media_player.garage
            state_not: 'off'
        card:
          type: custom:mini-media-player
          style: |
            :host {
              --mini-media-player-name-font-weight: 500;
              --mini-media-player-artwork-opacity: 1;
              --mini-media-player-media-cover-info-color: white;
              --mini-media-player-overlay-base-color: #2196f3;
            }
          entity: media_player.garage
          info: scroll
          artwork: cover
          volume_stateless: false
          toggle_power: true
          hide:
            runtime_remaining: false
            runtime: false
            info: false
            power: true
            power_state: false
            progress: false
            source: false
            play_stop: true
            volume_level: false
            controls: true
            volume: true
            icon: true
            name: false
      - type: conditional
        conditions:
          - entity: media_player.kuche
            state_not: 'off'
        card:
          type: custom:mini-media-player
          style: |
            :host {
              --mini-media-player-name-font-weight: 500;
              --mini-media-player-artwork-opacity: 1;
              --mini-media-player-media-cover-info-color: white;
              --mini-media-player-overlay-base-color: #2196f3;
            }
          entity: media_player.kuche
          info: scroll
          artwork: cover
          volume_stateless: false
          toggle_power: true
          hide:
            runtime_remaining: false
            runtime: false
            info: false
            power: true
            power_state: false
            progress: false
            source: false
            play_stop: true
            volume_level: false
            controls: true
            volume: true
            icon: true
            name: false
      - type: conditional
        conditions:
          - entity: media_player.tv_samsung_6_series_55
            state: 'on'
        card:
          type: custom:mini-media-player
          style: |
            :host {
              --mini-media-player-name-font-weight: 500;
              --mini-media-player-artwork-opacity: 1;
              --mini-media-player-media-cover-info-color: white;
              --mini-media-player-overlay-base-color: #2196f3;
            }
          entity: media_player.tv_samsung_6_series_55
          info: scroll
          artwork: cover
          volume_stateless: false
          toggle_power: true
          hide:
            runtime_remaining: false
            runtime: false
            info: false
            power: true
            power_state: false
            progress: false
            source: false
            play_stop: true
            volume_level: false
            controls: true
            volume: true
            icon: true
            name: false
      - type: conditional
        conditions:
          - entity: media_player.laptop
            state: playing
        card:
          type: custom:mini-media-player
          style: |
            :host {
              --mini-media-player-name-font-weight: 500;
              --mini-media-player-artwork-opacity: 1;
              --mini-media-player-media-cover-info-color: white;
              --mini-media-player-overlay-base-color: #2196f3;
            }
          entity: media_player.laptop
          info: scroll
          artwork: cover
          volume_stateless: false
          toggle_power: true
          hide:
            runtime_remaining: false
            runtime: false
            info: false
            power: true
            power_state: false
            progress: false
            source: false
            play_stop: true
            volume_level: false
            controls: true
            volume: true
            icon: true
            name: false
  - square: false
    columns: 4
    type: grid
    cards:
      - type: custom:mushroom-template-card
        style: |
          :host { 
            --primary-text-color: 
            {% if is_state('input_select.lms_player', 'garage')%} #2196f3
            {% else %} #9e9e9e
            {% endif %}
            }
        secondary: ''
        icon: mdi:radio
        entity: media_player.garage
        primary: Garage
        multiline_secondary: true
        icon_color: >-
          {{ is_state("input_select.lms_player", "garage") | iif("blue",
          "disabled") }}
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: garage
          target:
            entity_id: input_select.lms_player
        fill_container: true
        hold_action:
          action: more-info
        layout: vertical
      - type: custom:mushroom-template-card
        style: |
          :host { 
            --primary-text-color: 
            {% if is_state('input_select.lms_player', 'kuche')%} #2196f3
            {% else %} #9e9e9e
            {% endif %}
            }
        secondary: ''
        icon: mdi:silverware-fork-knife
        entity: media_player.kuche
        primary: Küche
        multiline_secondary: true
        icon_color: >-
          {{ is_state("input_select.lms_player", "kuche") | iif("blue",
          "disabled") }}
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: kuche
          target:
            entity_id: input_select.lms_player
        fill_container: true
        layout: vertical
        hold_action:
          action: more-info
      - type: custom:mushroom-template-card
        style: |
          :host { 
            --primary-text-color: 
            {% if is_state('input_select.lms_player', 'tv_samsung_6_series_55')%} #2196f3
            {% else %} #9e9e9e
            {% endif %}
            }
        secondary: ''
        icon: mdi:television-classic
        entity: media_player.tv_samsung_6_series_55_3
        multiline_secondary: true
        icon_color: >-
          {{ is_state("input_select.lms_player", "tv_samsung_6_series_55") |
          iif("blue", "disabled") }}
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: tv_samsung_6_series_55
          target:
            entity_id: input_select.lms_player
        fill_container: true
        layout: vertical
        hold_action:
          action: more-info
        primary: TV
      - type: custom:mushroom-template-card
        style: |
          :host { 
            --primary-text-color: 
            {% if is_state('input_select.lms_player', 'laptop')%} #2196f3
            {% else %} #9e9e9e
            {% endif %}
            }
        secondary: ''
        icon: mdi:laptop
        entity: media_player.laptop
        primary: Laptop
        multiline_secondary: true
        icon_color: >-
          {{ is_state("input_select.lms_player", "laptop") | iif("blue",
          "disabled") }}
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: laptop
          target:
            entity_id: input_select.lms_player
        fill_container: true
        layout: vertical
        hold_action:
          action: more-info
  - type: entities
    entities:
      - type: custom:fold-entity-row
        padding: 0
        style:
          ha-icon:
            $: |
              ha-svg-icon {
               color: #ff5722;
                }
        head:
          type: custom:button-card
          name: Romania Radiostation
          tap_action:
            action: none
          styles:
            card:
              - margin-bottom: 0px
              - padding-bottom: 0px
              - padding-top: 0px
              - box-shadow: none
            name:
              - justify-self: start
              - padding-left: 8px
              - font-size: 15px
              - font-weight: bold
              - color: '#795548'
        entities:
          - type: custom:mushroom-chips-card
            card_mod:
              style: |
                ha-card {
                  --chip-border-radius: 12px;
                  --primary-text-color: grey;
                }
            chips:
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station", "ProFM")
                  | iif("blue", "disabled") }}
                content: 'Pro FM '
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station", "ProFM")
                  | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: ProFM
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station", "KissFM")
                  | iif("blue", "disabled") }}
                content: Kiss FM
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station", "KissFM")
                  | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: KissFM
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "EuropaFM") | iif("blue", "disabled") }}
                content: Europa FM
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "EuropaFM") | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: EuropaFM
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "RadioZu") | iif("blue", "disabled") }}
                content: RadioZu
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "RadioZu") | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: RadioZu
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station", "DigiFM")
                  | iif("blue", "disabled") }}
                content: Digi FM
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station", "DigiFM")
                  | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: DigiFM
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "MagicFM") | iif("blue", "disabled") }}
                content: Magic FM
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "MagicFM") | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: MagicFM
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "VirginRadio") | iif("blue", "disabled") }}
                content: Virgin Radio
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "VirginRadio") | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: VirginRadio
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "RadioMedias") | iif("blue", "disabled") }}
                content: Radio Medias
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "RadioMedias") | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: RadioMedias
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "RadioPetrecere") | iif("blue", "disabled") }}
                content: Radio Petrecere
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "RadioPetrecere") | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: RadioPetrecere
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "NationalFM") | iif("blue", "disabled") }}
                content: National FM
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "NationalFM") | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: NationalFM
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "WefunkRadio") | iif("blue", "disabled") }}
                content: WeFunk Radio
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "WefunkRadio") | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: WefunkRadio
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "FunkyRadio") | iif("blue", "disabled") }}
                content: Funky Radio
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "FunkyRadio") | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: FunkyRadio
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "RadioFunkyThrills") | iif("blue", "disabled") }}
                content: Radio Funky Thrills
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "RadioFunkyThrills") | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: RadioFunkyThrills
                  target:
                    entity_id: input_select.chromecast_radio_station
            alignment: null
  - type: entities
    entities:
      - type: custom:fold-entity-row
        padding: 0
        style:
          ha-icon:
            $: |
              ha-svg-icon {
               color: #ff5722;
                }
        head:
          type: custom:button-card
          name: Lokalsender
          tap_action:
            action: none
          styles:
            card:
              - margin-bottom: 0px
              - padding-bottom: 0px
              - padding-top: 0px
              - box-shadow: none
            name:
              - justify-self: start
              - padding-left: 8px
              - font-size: 15px
              - font-weight: bold
              - color: '#795548'
        entities:
          - type: custom:mushroom-chips-card
            card_mod:
              style: |
                ha-card {
                  --chip-border-radius: 12px;
                  --primary-text-color: grey;
                }
            chips:
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "Bayern1") | iif("blue", "disabled") }}
                content: Bayern1
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "Bayern1") | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: Bayern1
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "Bayern3") | iif("blue", "disabled") }}
                content: Bayern3
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "Bayern3") | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: Bayern3
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "Charivari") | iif("blue", "disabled") }}
                content: Charivari
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station",
                  "Charivari") | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: Charivari
                  target:
                    entity_id: input_select.chromecast_radio_station
              - type: template
                entity: input_select.chromecast_radio_station
                icon_color: >-
                  {{ is_state("input_select.chromecast_radio_station", "Energy")
                  | iif("blue", "disabled") }}
                content: Energy
                icon: >-
                  {{ is_state("input_select.chromecast_radio_station", "Energy")
                  | iif("mdi:checkbox-blank-circle",
                  "mdi:checkbox-blank-circle-outline") }}
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    option: Energy
                  target:
                    entity_id: input_select.chromecast_radio_station
  - type: custom:mushroom-chips-card
    chips:
      - type: action
        icon_color: blue
        icon: mdi:play
        tap_action:
          action: call-service
          service: script.lms
          service_data: {}
          target: {}
      - type: action
        icon_color: deep-orange
        icon: mdi:stop
        tap_action:
          action: call-service
          service: script.lms_stop
          service_data: {}
          target: {}
      - type: action
        tap_action:
          action: call-service
          service: input_number.decrement
          service_data: {}
          target:
            entity_id: input_number.lms_volume
        icon: mdi:volume-minus
        icon_color: grey
      - type: action
        icon: mdi:volume-plus
        tap_action:
          action: call-service
          service: input_number.increment
          service_data: {}
          target:
            entity_id: input_number.lms_volume
        icon_color: grey

[Danny2100]

Has anyone used mushroom card/custom in stack card with input_selects and input_numbers? If yes can you share yaml/pictures?