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.
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:
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!
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.
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.
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.
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:
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!
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.
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
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!
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.
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.
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
