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

Share your Projects!
,
268

This is helpful, but it doesnā€™t appear to be in the nice, small ā€œchipā€ size. Curious if you know of a way to shrink it up like that?

I think I have some options, but keeping that ā€œchipā€ look is a goal.

269

Looking for this as well!

270

very nice but have question iā€™m very newbee so hope you can help I have this yaml
image

Is it possible to make the icon or the name red when selected and stay red untill another one is pushed

271

Feeling a bit stupid but canā€™t find the custom cards in Lovelaceā€¦ I installed using HACS but when adding a card in Lovelace no Mushroom cards can be found, am I missing a step in the setup?

272

did you do a reboot? when you couldnā€™t find them?

273

Yes I did but didnā€™t help.

274

Also refreshed your browser?

275

Using the app but yes, I also tried another browser and in inkognito.

Below screenshot to show it is installed and canā€™t be found.

Screenshot_20220402-225729
Screenshot_20220402-2257291079Ɨ1534 72.5 KB

Screenshot_20220402-225701
Screenshot_20220402-2257011079Ɨ1500 153 KB

Edit:
Canā€™t remember, is downloading in HACS enough or do I need to register it or do anything else after download, like when registering modules under resources?

276

Hi @piitaya, hi all,
I just became aware of this beautiful card / card system through the latest video of Zack Barret.

Though I already have great dashboards, I really would like to include Mushroom cards. But to do so, I definitely need CSS control for fine-tuning or else my existing dashboard compositions will be blown apart.

So I started trying to tune a Mushroom Light Card with card-mod. One of my first goals is to reduce the bottom-margin of mushroom-state-item (the upper part of the card) and the height of div.actions (the brightness slider). But I really get lost in #shadow-root hell when I try to find selectors that access the mushroom-state-item and the div.actions.

image =>

image image

I just donā€™t get it working with card-mod.
Any help would be very much appreciated!

A big thank you goes to piitaya for all the work he has put into this!

1 Like
277

Hi Paul,

I am sorry for my late reply, but I was not sure you message was for me? (still a bit unsure)
Well for your question, I am using horizontal/vertical cards to make sure I use 100% of the width of my ā€œterminalā€ that is how I am showing 2 cards in with 1-card-view

279

Yes, I was able to do this using something like this:

card_mod:
  style: >
    {% if is_state('input_select.home_mode', 'Home') %}
      :host {
        --card-mod-icon-color: yellow;
      }
    {% else %}
      :host {
        --card-mod-icon-color: black;
      }
    {% endif %}
2 Likes
280

Did you find a solution? Iā€™m in the same boat. I donā€™t see it in Lovelace. I can see other custom cards installed by HACS but not the mushroom card.

281

Your code will work. However it requires you to immediately reload the that page to actually apply the edit mode.

282

No, unfortunately not. I also have other custom cards working but canā€™t get Mushroom cards to show up.

283

Iā€™m sorry for being late, but hereā€™s my config for the conditional chip:

type: conditional
conditions:
  - state: 'on'
    entity: group.indoor_lights
chip:
  type: entity
  entity: group.indoor_lights
  icon_color: amber
  icon: mdi:lightbulb-on
  tap_action:
    action: more-info
  hold_action:
    action: call-service
    service: light.turn_off
    service_data: {}
    target:
      entity_id: group.indoor_lights
  double_tap_action:
    action: more-info

Hereā€™s a template chip where you can put a template for the icon_color (but I just picked ā€œlight-blueā€ without a template):

type: template
content: '{{ states(entity) }} Ā°F'
icon: '{{ state_attr(''sensor.outside_temperature_trend_text'', ''icon'') }}'
tap_action:
  action: fire-dom-event
  browser_mod:
    command: more_info
    entity_id: sensor.outside_temperature
    large: true
icon_color: light-blue
entity: sensor.outside_temperature
2 Likes
284

By the way, an idea for improving the visuals: I would go ahead and put a mandated spacing between separate columns in the UI. When thereā€™s no space, everything looks too confusing on a screen wider than a cellphoneā€™s. I managed this in custom CSS (and nicer headers that match the UI Lovelace Minimalist by making them bold) by doing this, though I donā€™t think any of it can be done using themes, but as an integration developer, you may have a way around that:

.columns {
  flex-wrap: wrap; # (or flex-flow: row wrap;)
  column-gap: 50px;
}

.column {
  min-width: 360px;
}

.card-header {
  font-weight: bold;
}
285

@Lunkobelix @Datwood2009 When I installed Mushroom a couple weeks ago, it wouldnā€™t work. I found out eventually that if I went to Settings ā†’ Dashboards ā†’ Resources, instead of saying /hacsfiles/lovelace-mushroom/mushroom.js?hacstag=xxxxxxxxxxx, it said /hacsfiles/lovelace-mushroom/null?hacstag=xxxxxxxxxxx (notice the null there).

I had to manually replace it with mushroom.js (and then clear my browser cache) for it to work. Maybe you guys have the same problem.

1 Like
286

Thank you for your help! Was a bit surprised that I donā€™t have any reference at all to Mushroom under Resources. Shouldnā€™t that be added there automatically? I just today got an update notification for a new version to Mushroom so it is installed (and I have reinstalled it and rebooted).

287

Capture

Any way to fix the text ā€œMaster Bedroomā€? I would like it center it and have it on one line.
EDIT: Using a title card

288

Hmm it should, but itā€™s flaky apparently. Try adding the one I showed in there, restart HA, clear browser cache, and see what happens.