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

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 :slight_smile:

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

Share all the code please.

1 Like

Hi,

I will share my bar code soon.

Regarding ChatGPT, I went through this integration:

1 Like

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.

Result:

mushroom

Here is the full code for my top bar:

19 Likes

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.

image

Any suggestions?

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.

1 Like

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 %}
      }

2 Likes

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.

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.

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

@rhysb

Kindly guideā€¦

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.

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

20230607153742

  - 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;
              }       
1 Like

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?

image

Add a ā€œspacerā€ as the last ā€œchipā€

1 Like

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

Can something help please

Is there any way to change entity card height?

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.

1 Like

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!