Is it possible to add a row of icons to act as shortcuts for scenes (eg Hue scenes) to the mushroom lights card?

Hi all,
I love the mushroom light card but I wish I could add a row for icons on the bottom where each icon represents my most used scenes from Hue (e.g. Natural Light, Rolling Hills, Tokyo) so I can activate with one click.
After a lot of poking around, I found the GitHub - bokub/rgb-light-card: 💡 A Lovelace custom card for RGB lights but it seems it’s only compatible with the default lovelace entities card.
Any ideas if I can somehow splice them together :). Or if there’s a totally different solution to what I’m looking for.

Thank you very much!

1 Like

You could just use mushroom chip cards for the icons. If you want them to appear as if they’re part of the light card, you could include the light and chips in a “custom:stack-in-card” in vertical mode and then turn off the borders on the other cards:

        style: |
          ha-card {
            border: none;
          }

You would probably also want to include a padding at the bottom of the chips card or they will butt up against the card border. So there you would use:

        style: |
          ha-card {
            border: none;
            padding-bottom: 10px;
          }

If your first and last chips are of type “spacer” then the chips will be centered.

1 Like

wow that is amazing! this is a lot more advanced than i’ve played with before (super new to the frontend / dashboard side of things) but your answer is making me really excited about what i could do
i’m going to read up on all these ideas!
question - if i do want to keep using the RGB cards for the custom-icon support, can i use the same approach you outline above? either way i’ll probably switch to chips to keep it all mushroom.
thanks again! once i’ve played with it tomorrow and am sure it works i will mark this as the answer!

which of those 3 do you recommend i should install?

I use “stack in card” - it has a mode to specify horizontal or vertical. I’m not sure what benefits the other cards have, but I tend to look at the download count, and stack-in-card wins with over 50,000.

And yes, you could use the RGB card instead of the chips card. The stack-in-card with no border approach will make any number of cards look like they are just one card. If you alternatively use the chips card you can specify an “icon_color” and you can choose to have no content or border and use an icon of “mdi:circle” to get a similar effect (but smaller) to the RGB card.

The main advantage the RGB card has is you just specify the colors you want, whereas with chips you would have to do a service call for each to set the color. However, if you’re wanting to activate Hue scenes, the RGB card would have to use service calls too.

1 Like

thanks very much for all this, i’m planning to take sometime this weekend to play with this!

So everything is working great in terms of the first few steps, they look exactly as I want them other than the borders (didn’t go with the chips for now).
Now I realized I don’t know where this bit goes.
Sorry total newb.

style: |
  ha-card {
    border: none;
  }

The docs for mushroom cards don’t seem to cover it, but you put it under the “type:” section. In the example below, the Alarm chip has the border off, and the chips-card has the border off and padding set. You would have to do this by displaying the YAML, as you can’t do it in the visual editor. But I don’t think stack-in-card supports the visual editor anyway.

              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    content: "Alarm"
                    style: |
                      ha-card {
                        border: none;
                      }
                style: |
                  ha-card {
                    border: none;
                    padding-bottom: 10px;
                  }

Also, the RGB card might not support styling this way. In that case you could use “card_mod” from HACS. The only difference is then it all comes under a separate tag like this:

              - type: custom:rgb-card-thing
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                    }
1 Like

You are amazing, thank you for taking the time to answer on a weekend! Learning a lot from this! I think Ill go with using the chips as I just googled a bunch about card_mod and seems like you take on a lot of responsibility keeping things updated if details of Lovelace change. Perhaps the same is true for mushroom but I feel it’s a lot more heavily supported so likely issues like that would be updated by the author (or community) whereas with direct card-mod use I’m on my own.
Thanks again man, I marked your answer as the solution yesterday btw. I’ll be using this technique for a lot of stuff to create a more custom look. I think Lovelace should support natively nesting cards, it’s incredibly useful!

FYI doesn’t seem like the mushroom light card responds to this styling, i think i’ll have to add it the card mod anyway

Sorry a followup question. I noticed the stack in card leaves a lot of space at the top.
Do you know how I can tighten this. There is also a fair amount of space between the two cards (mushroom light and RGB) but it’s not as bad as the space above.
image

And to be really ambitious the dream will be to move the icon, the 50% and the slider bar onto a single line but that would involve modifying the mushroom light card, probably way too much and too brittle. But I’m trying to figure out how to at least kill the dead space above the light icon

EDIT: i’m an idiot, removing the “title” from the stack in card removed the space :slight_smile:
now if I can tighten the rest of the spacing and co-locate the light icon and 50% with the slider bar… if you have any ideas pls let me know!

EDIT2: with a bit of googling and realizing padding cannot be negative, I tried margins and it worked! So happy! Thanks for cluing me in about all this styling stuff!

          ha-card {
            border: none;
            margin-top: -10px;
          }

That might have been a poor assumption I my part. I had card mod installed, but whenever I’ve done styles on a mushroom card, I’ve never had to put it in a “card_mod:”. If it’s not being done by mushroom I guess I have some other HACS frontend extension doing it (none seem obvious though). Regardless, card mod can do it as you’ve obviously found out. Glad you could get it working how you want.

1 Like

thanks man, i couldn’t have done it without you!

Hey @ncd, I was interested in doing something similar with my Philips Hue lights. Would you mind sharing your code for doing this? Thanks.

1 Like

Sure, I ended up using the rgb-light-card.
I’ve been investing all my time in making the main dashboard for our home extremely functional so I’ve deprioritized the dashboards for each individual room (as we barely find the need to use them).
Since this particular feature is in the bedroom, I won’t refocus on it for some time so it might no be the best solution at all.

  - type: vertical-stack
    keep:
      background: false
    cards:
      - type: custom:mushroom-light-card
        entity: light.XXX
        card_mod:
          style: |
            ha-card {
              border: none;
            }
        use_light_color: true
        show_brightness_control: true
        show_color_temp_control: true
        collapsible_controls: false
        layout: horizontal
        name: ''
        secondary_info: none
        fill_container: false
        primary_info: none
        tap_action:
          action: call-service
          service: light.toggle
          target:
            entity_id: light.XXX
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: entities
        show_header_toggle: false
        entities:
          - type: custom:rgb-light-card
            entity: light.XXX
            justify: between
            size: 29
            colors:
              - type: call-service
                service: scene.turn_on
                service_data:
                  entity_id: scene.XXX_natural_light
                icon_color: >-
                  center/107%
                  url('/local/hue-images/hue-scene-natural-light.png') #E8F5FF
              - type: call-service
                service: scene.turn_on
                service_data:
                  entity_id: scene.XXX_concentrate
                icon_color: '#FFFCF1'
              - type: call-service
                service: scene.turn_on
                service_data:
                  entity_id: scene.XXX_read
                icon_color: rgb(255, 217, 182)
              - type: call-service
                service: scene.turn_on
                service_data:
                  entity_id: scene.XXX_rest
                icon_color: rgb(255, 184, 114)
              - type: call-service
                service: scene.turn_on
                service_data:
                  entity_id: scene.XXX_arctic_aurora
                icon_color: >-
                  center/100%
                  url('/local/hue-images/hue-scene-arctic-aurora.png')
              - type: call-service
                service: scene.turn_on
                service_data:
                  entity_id: scene.XXX_motown
                icon_color: center/100% url('/local/hue-images/hue-scene-motown.png')
            card_mod:
              style: |
                .color {
                  box-shadow: none;
                  transition: none;
                }
                .color-circle {
                  box-shadow: none;
                  transition: none;
                  border-style: solid;
                  border-color: rgba(224, 224, 224, 0.5);
                  border-width: 1px;
                }
        card_mod:
          style: |
            ha-card {
              border: none;
              margin-top: -15px;
            }

BTW I’ve switched to using the adaptive lighting addon (with some heavy customization) so I never find the need for Hue’s day-time scenes. We only occasionally use the more colorful scenes, so that’s another reason why I don’t care as much about this right now. It might change in the future :slight_smile:

1 Like