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

[0tto0o]

That looks amazing! I am also using a bottom bar, but I haven’t been able to get it exacly how I want it. Would you mind sharing your code on how you did it? I am very interested in implementing the “left-right” swiping.

Also, I saw your search button is linked to ChatGPT? Can I ask you how you have integrated that?

Thanks

[Mattia2399]

great!
I was really looking for someone to help me with the development.

Share all the code please.

[Guizmos]

Hi,

I will share my bar code soon.

Regarding ChatGPT, I went through this integration:

ChatGPT Integration for Home Assistant: Enhance Your Smart Home with AI

Home Assistant OpenAI Response Sensor I’m excited to share my latest project, a custom integration that brings the power of OpenAI’s ChatGPT directly into your Home Assistant setup. With this integration, you can harness the potential of AI-driven conversations and automations to make your smart home even more intelligent and versatile. From incorporating ChatGPT into dashboard views to triggering automations based on AI-generated responses, the possibilities are endless. [videothumbnail.PNG] …

[Guizmos]

I opted for a dashboard with a single view. To keep and use only one menu bar on my entire dashboard.
I chose to use local-conditional-card to do this.
It also allows me to easily manage which cards are shown or hidden.

GitHub - PiotrMachowski/Home-Assistant-Lovelace-Local-Conditional-card: This...

Result:

Here is the full code for my top bar:

Guizmos123/Mushroom/blob/2f7ce39f13c445dbdc86864b8f4e2a8c36268ee5/Menu_bar.txt

[dbs179]

Is there anyway to change the colors of the alarm card icon? The normal alarm card uses blue for disarmed and green for armed. I’d like to make it green for disarmed, and red for armed, but I don’t see options in the visual editor or looking over the options on github. I’m guessing I’d have to use a template card, but I also want the arm/disarm buttons at the bottom of the card.

This is how I want it to look, just the colors of the icon different.

Any suggestions?

[davidnestico]

Can you make a version of this with “type: custom:search-card” if you have it, please? Thanks.

I replaced the first card with it and doesn’t look right for me so maybe you can style it better.

[danwooller]

something like this…

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state('xxxx', 'on') %}
           --shape-color: rgba(var(--rgb-red), 0.25);
           --icon-color: rgba(var(--rgb-white), 1);
        {% else %}
           --shape-color: rgba(var(--rgb-green), 0.25);
           --icon-color: rgba(var(--rgb-white), 1);
        {% endif %}
      }

[dbs179]

Thank you, that worked perfectly. I hadn’t thought about using a card mod, and honestly, I’d never used one before to know how to do that even if I had. I really appreciate it.

[illascanbe]

Hi,

I’m facing an issue where I can’t get nested mushroom template chips (combined with different mushroom cards in a vertical-stack-in-card) to be visible in chrome or edge browser on e.g. desktop/tablet or the companion app on my phone.

However, it is working when showing the same view on my mobile in brave browser or opera on my desktop. And I can also see those conditional mushroom chips in edit mode, every time.

Is there anybody who has an idea, why that is the case? I can’t seem to figure out, why this is behaving so inconsistently.

I’ve already been playing around and tested different approaches (for the conditional visibility). I tried the “original” approach, from the code example I started with, with the conditional card and also tried to achieve a similar behaviour with only a conditional if-clause in the icon-value.

I also played around with different margins and sizes in general. But it was never consistently showing in all contexts (except for the mentioned contexts where it always works, e.g. edit mode).

My current approach is using conditional if-clauses in the icon parameter value, instead of conditional cards. Here’s a code example.

- type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
	entity: sensor.lights_currently_turned_on
	icon: mdi:lightbulb-group
	icon_color: |
	  {% if states('sensor.lights_currently_turned_on') == '0' %}
		grey
	  {% else %}  
		#f39c12
	  {% endif %}
	primary: Licht
	secondary: |
	  {% if states('sensor.lights_currently_turned_on') == '0' %}
		aus
	  {% else %}
		{{ states('sensor.lights_currently_turned_on') }} eingeschaltet
	  {% endif %}
	layout: horizontal
	tap_action:
	  action: navigate
	  navigation_path: /dashboard-start/lichtsteuerung
	double_tap_action:
	  action: navigate
	  navigation_path: /dashboard-start/lichtsteuerung
	hold_action:
	  action: toggle
	card_mod:
	  style:
		mushroom-state-info$: |
		  .primary {
			font-size: 14px !important;
			position: relative;
			top: -50px;
			left: -160px;
			overflow: visible !important;
			white-space: normal !important;
		  }
		  .secondary {
			position: relative;
			overflow: visible !important;
			top: -52px;
			left: -160px;
		  }
		mushroom-shape-icon$: |
		  .shape {
			position: relative;
			left: -50px;
			top: 45px;
		  }
		.: |
		  :host {
			--mush-icon-size: 146px;
		  }
  - type: custom:mushroom-chips-card
	chips:
	  - type: template
		entity: media_player.player
		icon: >-
		  {% if is_state('media_player.player', 'on') or
		  is_state('media_player.player_zone_2', 'on') %}
			{% if is_state('media_player.player', 'on') and (is_state_attr('media_player.player', 'source',
				'strm-box') or                
				is_state_attr('media_player.player', 'source',
				'video1') or
				is_state_attr('media_player.player', 'source',
				'video2') or
				is_state_attr('media_player.player', 'source',
				'video3') or
				is_state_attr('media_player.player', 'source',
				'video4') or
				is_state_attr('media_player.player', 'source',
				'video5') or
				is_state_attr('media_player.player', 'source',
				'video6')) %}
				  mdi:television-play
			{% else %} 
			  mdi:music
			{% endif %}
		  {% else %}

		  {% endif %}
		icon_color: blue
		content_info: none
	card_mod:
	  style:
		.: |
		  ha-card {
			width: 66px;
			margin-left: 75%;;
			top: -70px;
			background: none;
			--chip-border-width: 0;
		  }
		  :host {
			--mush-icon-size: 20px;
			--mush-chip-spacing: -2.9px;
		  }

The result remains the same.
In card-editor view the “conditional mushroom chips” work like a charm.

In most contexts the “conditional mushroom template chips” can only be seen, if the whole browser/app was stopped and re-run. Sometimes those chips become visible. But after some time it stops working again and needs a new restart-cycle, to maybe become visible again.

[dicko (Martyn)]

I dont suppose anyone has got a card that you can add a google calendar event ?

I want to choose the date, time and name and pick the calendar I would like to add it to.

The service for this isnt the friendliest, so was hoping there was a card or way to do this

Thanks

[Vandana (Vandana Dass)]

@rhysb

Kindly guide…

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

[d7158fd4f5f05b4bb9b1e9c657a22f740b0892b1] How do I change the height and font size of the encircled part? Kindly guide

[dyego.hass (Dyego Porto Barbosa)]

Put this code in your configuration.yaml

binary_sensor:
   - platform: template
     sensors:
       general_high_temperature_alert sensation:
         friendly_name: "Kitchen high temperature warning."
         value_template: "{{ states('sensor.media_thermal_sensation') | float > 25 }}"

       general_low_temperature_alert sensation:
         friendly_name: "Kitchen low temperature warning."
         value_template: "{{ states('sensor.media_thermal_sensation') | float < 15 }}"

This will create the necessary sensors to work in friend code, I’ve changed the names to my language, feel free to customize. The principle will be the same.

About the sensor.nightstate, I didn’t use it, I preferred to put an entity that shows humidity, but if you want:

sensor:
   - platform: template
     sensors:
       night_state:
         friendly_name: "State of the Night"
         value_template: >
           {% if is_state('sun.sun', 'below_horizon') %}
             Night
           {% else %}
             Day
           {% endif %}

Sorry for any translation errors, I’m using google.

[kelvinrafaeli (kelvin)]

How can I make it work vertically to increase and decrease using the mouse

  - type: grid
    columns: 1
    cards:
      - type: custom:mushroom-number-card
        entity: input_number.set_temperatura
        fill_container: false
        secondary_info: none
        icon_type: none
        primary_info: state
        icon_color: red
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                position: absolute;
                top: 35px !important;
                left: 200px !important;
              }
            .: |
              ha-card {
                top: 100px!important;
                width: 300px !important;
                transform: rotate(-90deg);
                background: transparent !important;
                box-shadow: none !important;
              }       

[dbs179]

I’m sure this is another simple fix, but I’m trying to get Chips to align closer together. They look ok if you have several with a bunch of text, but I’m trying to have a Menu Chip, Back Chip, and a Navigation Chip all together in a Horizontal Stack. How can I move them closer together to the left side of the Stack?

[Michael_Dahl]

Add a “spacer” as the last “chip”

[dbs179]

That worked, I had to add a bunch to get them moved over where I wanted them, but it solved the issue. Thanks!!!

[yuval221183 (yuval)]

Can something help please

[Twig_Bark]

Is there any way to change entity card height?

[danwooller]

That’s not the best practice, you’ll get more control using this, you can put them in a cell and specify how far across they go.

Layout-card - Take control of where your cards end up

Finally released on HACS! This card lets you tweak how cards are placed in your lovelace views. Here’s just one example. [image] With some work, this can be used to create responsive designs: [responsive%201] [responsive%202] [responsive%203]

[edwardtich]

Good afternoon
How to remove this color transition strip? Transition between colors black and gray?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-entity-card
    entity: sensor.aloe_soil_moisture
    primary_info: state
    secondary_info: name
    name: Humidity
    icon_color: blue
    card_mod:
      style: |
        ha-card {
          z-index: 1;
          --ha-card-border-width: 0;
        }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.aloe_soil_moisture
        name: Humidity
        color: var(--blue-color)
    height: 60
    hours_to_show: 24
    line_width: 3
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 100%;
          top: 0px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
        }

thank you in advance!