Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

Some rooms Iā€™ve got additional secondary info like temp, and others I do not. However, I want cards to have consistent height.

If I omit the secondary info, I get this:

I tried adding a space for secondary info like this:

type: custom:mushroom-template-card
icon: ''
icon_color: ''
primary: Living room
secondary: ' '
layout: horizontal
fill_container: false

but that doesnā€™t work, I get the same card height. Is there a trick to adding a space or getting consistent height another way?

1 Like

Set this one to true.

Unfortunately that didnā€™t change anything. I tried with and without ' ' for secondary info:

type: custom:mushroom-template-card
primary: ''
secondary: ' '
icon: mdi:sofa
icon_color: red
fill_container: true

type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:sofa
icon_color: red
fill_container: true

could someone please tell me how I can change the height of the mushroom light brightness bar so its not so thick?
thanks

Try removing the quotes around config.entity:

You can change the value of the mush-control-height variable in the Mushroom theme file (or define it in whichever theme youā€™re using).

mush-control-height: 20px
thanks

Does anyone know how I can apply :first-line CSS-element for chips and other cards?

When i navigate through my pages, the page is not shown that way, that i see the top of the page, but scrolled down just like the state was the page iā€™m coming from. That seems only to occur when iā€™m using the app.
I hope you can understand what i mean. Is there a way to fix this?

Currently iā€™m creating my room cards, based on rhysbā€™s code.

If i use 2 cards side by side on a mobile phone i do not have enough space for all the state infos (see Kinderzimmer).

Using just 1 card per row look kind of empty.

Any ideas how to fit all the infos in the 2 rooms per row design?

1 Like

could you share your whole code? trying to do something similar, but not sure how to get a clock as big as yours :slight_smile:

thank you in advance!

Sure. Hereā€™s the Pastebin.

But the clock is digital-clock, and like everything else, itā€™s adjusted with card_mod.

I canā€™t take credit for the design - someone else posted it on Facebook and I modified the hell out of it to work for my use case. Mine is designed to be used on a Google Nest Hub Max (so, DashCast) in a bedroom thatā€™ll be utilized by people caretaking me after I have a major surgery. The original version showed how many lights were on in the house, motion detectors, radiators, things like that. So thereā€™s really endless opportunities to how you could use this.

Thank you very much! Got it to my liking now :slight_smile:

all the best with your surgery and recovery!

1 Like

How did you mount the tablet under your cabinet? Iā€™ve been pondering the same thing in the kitchen for the obvious plus recipes and such.

Thanks

Thatā€™s another Google Nest Hub Max, and I bought this invisible mount off of Etsy. Heā€™s got a version for the non-max version of the Home Hub as well. And thatā€™s pretty much exactly why Iā€™ve got it there - easy to acces timer, recipes, and Iā€™ve got an aqara button hidden up under there as well that triggers a DashCast view similar to my normal kitchen view, but with the ability to add/view a grocery list (and eventually meal plans).

I have wall-mounted tablets I bought from this shop, he also has a website.

Hope this helps!

1 Like

Nice work - what theme are you running?

Noctis :grinning_face_with_smiling_eyes:

1 Like

Can i do a conditional chip that is show if the a state is below or above a certain value?
like light.xx.brightness > 30

Hi, I checked in all the documentation but I didnā€™t find a way to make a multiline content of a template chip. This is my example


I tried with the classical \n, but it didnā€™t work. Am I missing something?

make the icons smaller or put the info on 2 lines instead of 1.