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

[RodgerDodger]

I do not but rhysb has a base for you:

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

While you wait for the new feature, you can achieve what you want with a little CSS. [Mushroom image Icon] Vertical: type: custom:mushroom-template-card icon: mdi primary: LS50 secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} ' entity: switch.ls50-1 fill_container: false multiline_secondary: false layout: vertical card_mod: style: | mushroom-card { background: var(--card-background-color) url( '/local/LS50.png' ) no-repeat center 0px; background-size: 4…

[dmertens (Danny)]

@piitaya Feature request: I really would like the have a room card like this: Room Card - UI Lovelace Minimalist maybe this can be added to the probably already enormous todo list?

Thanks for considering this, and for the great work, this and the grid cart are probably the greatest editions in years to how we can build awesome dashboards!

Thanks for the awesome work you put in to this!

Kind regards

[mgb66 (Carl Scarlett)]

Quick question, I’m using the mushroom-chips-card with my alarm.

On the chip the disarmed icon is blue and armed is green but if you tap to get the details disarmed is green and armed is red. Is there a way to make the colours on the chip match those in the details? Is there a reason why they are different?

[fanaticDavid (David)]

I’m trying to show the time and weather in the header of my Home Assistant UI. My first attempt was successful:

Achieved with:

header_cards:
  cards:
    - type: custom:mushroom-chips-card
      chips:
        - type: entity
          entity: sensor.time
        - type: weather
          entity: weather.owm
          show_conditions: true
          show_temperature: true

The only problem with this is: it takes up prime real estate within the Home Assistant app on my phone. I came up with the following code so that the time and weather would only show on the desktop, but they won’t show at all now:

header_cards:
  cards:
    - type: custom:state-switch
      entity: mediaquery
      states:
        '(min-width: 1200px)':
          type: custom:mushroom-chips-card
          chips:
            - type: entity
              entity: sensor.time
            - type: weather
              entity: weather.owm
              show_conditions: true
              show_temperature: true
        all:
          type: custom:blank-card

The issue seems to be with the mushroom-chips-card because I can replace it with something more basic which does work:

header_cards:
  cards:
    - type: custom:state-switch
      entity: mediaquery
      states:
        '(min-width: 1200px)':
          type: markdown
          content: "This does work!"
        all:
          type: custom:blank-card

The width of the window is not the issue as I’m currently working on an ultrawide monitor (3840px). With that last test, I can also make the markdown hide and show by making the browser window narrower and wider.

Is this a bug or am I doing something wrong? Thanks for any and all suggestions!

[Valdorama]

Are you using Mushroom Theme?

There are variables in there you can change to configure the alarm status colours.

[Paadsz]

Can you share your code for this ?

[mgb66 (Carl Scarlett)]

Thanks, yes I am. I’ll look at that, I hadn’t spotted those entries.

[neilimixamo]

Hi, this is a very interesting badge usage.
However, “mdi:numeric-” icons have a 0 to 10 range. Do you know how to display higher numbers?

[SpookyAwol]

I think youd run out of room very quickly in an icon badge? youd have to display them outside the badge

[swifty]

I noticed an issue with the new badge option for the template card - the badge icon seems to be shifted slightly to the upper left, ie. it’s not centered within the circle… see attached

Anyone else have this? - I tried it with a blank dashboard, no extra card-mod etc… and see the same result.

[Dibbler (Thomas Bail)]

Hmmm, this badge seems to be OK

and this seems to be shifted to the upper left

[niekniek89 (Niek)]

Nice, what config do you use for the number of open doors?

[niekniek89 (Niek)]

Nice, what config do you use for the number of open doors?

[nkkfs0]

Hello, can you guys advise me how to achieve card for number.xxx entity as a slider or matching theme with mushroom design? I’d use it for oscillate angle option for fan or icon brightness with comes with number domain.

[Valdorama]

I guess you would need additional icons for that from somewhere else, since the MDI ones only go up to ten.

[dvbit]

I agree …
BIG FAT DISCLAIMER: I LOVE mushroom cards and praise your work , but…
All coding shall be hidden and the rest shall be essential (as in the original cards)

lawsofsimplicity_johnmaeda.pdf

1 reduce The simplest way to achieve simplicity is through thoughtful reduction. 2 organize Organization makes a system of many appear fewer.
3 time Savings in time feel like simplicity.
4 learn Knowledge makes everything simpler.

5 diΩerences Simplicity and complexity need each other.
6 context What lies in the periphery of simplicity is definitely not peripheral. 7 emotion More emotions are better than less.
8 trust In simplicity we trust.
9 failure Some things can never be made simple.

10 the one Simplicity is about subtracting the obvious, and adding the meaningful.

Dieter Rams 10 Principles of “Good Design”

Good Design Is Innovative : The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.

Good Design Makes a Product Useful : A product is bought to be used. It has to satisfy certain criteria, not only functional but also psychological and aesthetic. Good design emphasizes the usefulness of a product while disregarding anything that could possibly detract from it.

Good Design Is Aesthetic : The aesthetic quality of a product is integral to its usefulness because products are used every day and have an effect on people and their well-being. Only well-executed objects can be beautiful.

Good Design Makes A Product Understandable : It clarifies the product’s structure. Better still, it can make the product clearly express its function by making use of the user’s intuition. At best, it is self-explanatory.

Good Design Is Unobtrusive : Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.

Good Design Is Honest : It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept

Good Design Is Long-lasting : It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.

Good Design Is Thorough Down to the Last Detail : Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.

Good Design Is Environmentally Friendly : Design makes an important contribution to the preservation of the environment. It conserves resources and minimises physical and visual pollution throughout the lifecycle of the product.

Good Design Is as Little Design as Possible : Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.

[swifty]

I use a helper that has all of my door contact sensors added and then also a template sensor that breaks it out to a count of opened ones.

Create your helper via the UI and add the doors you want to monitor, then for the template sensor:

 - name: "Doors Open Count"
    state: >
      {{ expand('binary_sensor.all_doors') | selectattr('state','eq','on') | list | length }}

[SpookyAwol]

It does everything promised, you dont have to use add-ons. People like to push the boundaries to see what is possible, and as a result, some of those ideas (such as badges) can be included into the base code. That allows those who want the ‘easy option’ to reap the benefits
This thread though has perhaps diverted from the original intent, and its been mentioned a few times that maybe we need a dedicated thread to the design and modifying the mushroom cards

[niekniek89 (Niek)]

thnx for sharing. did you use this for bades also?

[swifty]

Yes - you can use the helpful code posted by Valdorama previously in this post:

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

Now that we have icon badges: [image] If you’re using the Mail & Packages integration, you can use the badge to show the number of packages delivered… badge_icon: > {% if states('sensor.mail_packages_delivered')|int > 0 %} {{ 'mdi:numeric-' + states('sensor.mail_packages_delivered') + '-circle' }} {% endif %} badge_color: orange

Simply swap out ‘sensor.mail_packages_delivered’ for your door template sensor created in my last reply.