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

[image969 (James Scialdone)]

The hue bulb is on a regular dumb wall switch. The switch gets used more than the light card on my phone. So when there’s no power going to it hole assistant can’t detect the entity. It makes sense and it should say unavailable cause it is. I’m trying to find a way to change the word unavailable to off and get rid of the unavailable icon badge so ot looks better. So ot looks available even when it’s not .

Template was my first option, but I don’t think I can put the light slider in template card . Correct me if I’m wrong

[KTibow (Kendell R)]

Have you considered
a. removing the switch and wiring it to always on
b. putting tape over the switch or using a cover
or c. getting a smart switch to replace it?
But seriously, you could probably do something like this with a conditional card, showing a template card when it’s unavailable and the light card when not. However I don’t see any benefit to having it show as “off”; it’ll only be more confusing when you want to turn it on.

[image969 (James Scialdone)]

My girlfriend will dissaprove of messing with that switch, it’s in her office lol
But YES I already have the conditional card set up with exactly what you said…However. I dont know how to make the template card look like the light card. Is there a way to code in the light slider color temp controls that a hue bulb has?

It wont be confusing to me. It will help my OCD of seeing the word unavialble and that litle ugly orange badge icon lol

[KTibow (Kendell R)]

Then why is your smart bulb in there lol
Maybe you could do something with card-mod for the light card?

[image969 (James Scialdone)]

because i have all recessed lighting and I needed a spot for a 50 dollar light bulb that came with my kit other than the kitchen drawer lol

I actually was able to use card mod to put badge size at 0px. that part worked. I guess I can live with the word unavailable.

Mushroom 2.0 came so close to answer my prayers with the primary and secondary on each card. but I cant customize what secondary says, or else it woudl be perfect. Certiantly not a first world problem. Ill survive lol thanks for the help

[Valdorama]

Honestly this seems like a great candidate for a generic Mushroom battery card. UI-Minimalist has a dedicated battery card, and it would be nice to add this to Mushroom.

[nappyjim (Jim)]

I’m sure this has been answered and I did search (unfornatetly trying to search the page was specific text keeps bringing up the HA website search)

I want to change the font size of one card, not all cards. Is there a way to do that from the code editor?

See the entity on the right, you cant see the entire title. I want that text smaller

type: horizontal-stack
cards:
  - type: custom:mushroom-entity-card
    entity: switch.linktap
    secondary_info: none
    name: Water Plants
    icon: mdi:sprout-outline
    icon_color: light-green
    fill_container: true
    use_entity_picture: false
    layout: vertical
    double_tap_action:
      action: toggle
    tap_action:
      action: none
    primary_info: name
  - type: custom:mushroom-entity-card
    entity: switch.outdoor_plug
    secondary_info: none
    name: Birdbath
    icon: mdi:bird
    icon_color: light-blue
    layout: vertical
    fill_container: true
    double_tap_action:
      action: toggle
    tap_action:
      action: none
  - type: custom:mushroom-entity-card
    entity: input_boolean.disable_backyard_soakers
    secondary_info: none
    fill_container: true
    layout: vertical

[markus78]

Many thanks for this fantastic implementation. I love it. When did you plan the implementation for the climate card? I can’t really wait . Any way … fantastic work!

Following a few Screen’s of my Tab Dashboard created with Mushroom

[D0doooh]

hej, where can I find this room card as well as the last used entities?

this looks great!

[fpschris]

Just wanted to add my title card code as I’ve been going round in circles and figured it out after playing with some stuff at work today, something clicked!

It will say hello to the logged in user, give you the number of lights on, how many doors are open and the temperature of whatever sensor you need or add more.

type: custom:mushroom-title-card
title: Hello {{ user }} ^_^
subtitle: >-
  Currently  {{ states.light | selectattr('state','eq','on') | list | count }}
  lights are on,  {{ states.binary_sensor | selectattr("entity_id", "search",
  ".magnet*") |selectattr('state','eq','on') | list | count }} doors are open!
  and your bedroom is {{ states("sensor.weather_temperature_masterbedroom") }}°C

[Step]

I’m look for a way to color (text and background), I have the card-mod installed…

…one of these, and red when it’s todays date or yellow when it’s one day before this date.

I’m currently not getting there (this is color for the text anyhow):

{% if is_state(“sensor.oneofthese”, “timestamp.now”) %}
red
{% elif is_state(“sensor.oneofthese”, “timestamp.now minus one day”) %}
yellow
{%else%}

{%endif%}

Also it has to be something for the background like this:

card_mod:
style: |
ha-card {
height: 102px;
{% if is_state(“sensor.oneofthese”, “timestamp.now”) %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}

[Danny2100]

I don’t know lol that was my question to the op. I posted it for reference to what I was asking for.

[tempus2016 (Tempus)]

    style: |
      ha-card {
      --card-primary-font-size: 10px;
      }

[nappyjim (Jim)]

Is it possible to make template card toggle a switch, but change states (colored vs not) based on a binary sensor?

I have a DIY garage opener using a Shelly1 to activate the door, and a magnetic reed switch to see if its open or close.

So for the button, I would want it to toggle ‘switch.garage’, but then the actual visual I would want it to be not colored if ‘binary_sensor.garage’ was OFF, and colored if it was on. Is that even possible?

[KTibow (Kendell R)]

Yes, definitely! Would you want us to share code, or can you do this yourself? However a better implementation would be a template cover so you can use it better throughout Home Assistant.

[nappyjim (Jim)]

@KTibow

Yes, definitely! Would you want us to share code, or can you do this yourself? However a better implementation would be a template cover so you can use it better throughout Home Assistant.

I cant do it, that’s why I’m asking lol.

So I tried the cover card, but I don’t technically have a cover enitity. I have a switch and a binary sensor. Or is there a workaround?

[KTibow (Kendell R)]

I was saying to create a cover entity from the switch and the binary sensor.

[tempus2016 (Tempus)]

Use the template card then add this as the icon colour:

{% if is_state("switch.cabin_heaters_group", "on") %}
                    orange
                {% else %}
                    #44739e
                {% endif %}

Change the sensor to suit your own. For the toggle, change the default action to toggle. Make sure the entity is switch.garage.

[berkans (Berkan Sezer)]

I have tweaked some cards a bit. The only thing left is to change font size and color ? Will you help me if possible ? I want to change the font size in this code.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: LIGHTS
    icon: null
    picture: '{{ state_attr(''person.cavidan'',''entity_picture'') }}'
    entity: group.office
    tap_action:
      action: navigate
      navigation_path: bathroom
    hold_action:
      action: toggle
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host {
          --mush-icon-size: 60px;
          height: 49px;
          margin-left: -20px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.hue_motion_sensor_3_motion_3
            state: 'on'
        chip:
          type: template
          icon_color: orange
          icon: mdi:motion-sensor
      - type: conditional
        conditions:
          - entity: binary_sensor.hue_motion_sensor_3_motion_3
            state: 'off'
        chip:
          type: template
          icon_color: blue
          icon: mdi:motion-sensor
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          top: -36px;
        } 
card_mod:
  style: |
    ha-card {
      height: 46px;
      {% if is_state('group.allhouse', 'on') %}
         background: rgba(191, 142, 6, 0.4);
      {% endif %}
    }

[D0doooh]

okay, i almost thought so, currently this threat is taking on an incredibly large scale with replays and in between questions, if you get an answer or find out keep me updated