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

[Jshaw20 (Jack)]

yes that did the trick

[dimitri.landerloos]

FYI this is the closest i could get each

Code

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:horizontal-layout
    cards:
      - type: custom:mushroom-template-card
        primary: Hello
        secondary: test2
        icon: mdi:home
        layout: vertical
        card_mod:
          style: |
            ha-card {
              box-shadow: none !important;
              padding: 10px 0px 10px 0px !important;
              margin: 0px 20px 0px 20px;
            }
      - type: custom:mushroom-template-card
        primary: Hello
        secondary: test2
        icon: mdi:home
        layout: vertical
        card_mod:
          style: |
            ha-card {
              box-shadow: none !important;
              padding: 10px 0px 10px 0px !important;
              margin: 0px 20px 0px 20px;
            }
      - type: custom:mushroom-template-card
        primary: Hello
        secondary: test2
        icon: mdi:home
        layout: vertical
        card_mod:
          style: |
            ha-card {
              box-shadow: none !important;
              padding: 10px 0px 10px 0px !important;
              margin: 0px 20px 0px 20px;
            }
      - type: custom:mushroom-template-card
        primary: Hello
        secondary: test2
        icon: mdi:home
        layout: vertical
        card_mod:
          style: |
            ha-card {
              box-shadow: none !important;
              padding: 10px 0px 10px 0px !important;
              margin: 0px 20px 0px 20px;
            }
      - type: custom:mushroom-template-card
        primary: Hello
        secondary: test2
        icon: mdi:home
        layout: vertical
        card_mod:
          style: |
            ha-card {
              box-shadow: none !important;
              padding: 10px 0px 10px 0px !important;
              margin: 0px 20px 0px 20px;
            }
      - type: custom:mushroom-template-card
        primary: Hello
        secondary: test2
        icon: mdi:home
        layout: vertical
        card_mod:
          style: |
            ha-card {
              box-shadow: none !important;
              padding: 10px 0px 10px 0px !important;
              margin: 0px 20px 0px 20px;
            }
      - type: custom:mushroom-template-card
        primary: Hello
        secondary: test2
        icon: mdi:home
        layout: vertical
        card_mod:
          style: |
            ha-card {
              box-shadow: none !important;
              padding: 10px 0px 10px 0px !important;
              margin: 0px 20px 0px 20px;
            }
    layout:
      max_cols: 8
      width: 50
      padding: 16px 0px 20px 0px
      card_margin: '-20px'

[Jshaw20 (Jack)]

i increased the icon size and this is how is looks on a mobile device;

[vinceskahan]

I’m looking to have less duplication in my yaml and would appreciate help and ideally examples if you have any pointers.

I have the following code so far for an entity displaying a temperature coming from a MQTT topic subscription. There are a half-dozen such cards that I’d like to display with the same color thresholds. The only difference between the cards is the entity and name value.

Ideally I’d like to do something like build a list of entity+name combinations and loop over them to create the cards, if that’s something doable reasonably. ???

Secondary question would be ‘is there a way to make the definition shorter’ without getting crazy in obfuscated code ? The attached is to me at least readable, but I’m not sure if it’s suggested HA way to do it or not.

Any pointers etc. appreciated…

 - type: custom:mushroom-entity-card
    entity: sensor.ecowitttempsensor1
    name: sensor1
    layout: vertical
    icon: mdi:thermometer
    frontend: null
    style: |
      ha-card {
      {% set x = states(config.entity) | int %}   
      --primary-text-color:
        {% if x >= 75 %}   white;
        {% else %}        yellow;
        {% endif %}
        --secondary-text-color:
        {% if x >= 80 %}    white;
        {% else %}         cyan;
        {% endif %}
      background:
        {% if x >= 90 %}    red
        {% elif x >= 80 %}   orange
        {% elif x >= 70 %}   green
        {% elif x >= 50 %}   cyan
        {% else %}          blue
        {% endif %}
      }

Example output from a few cards here. Don’t worry the colors etc being (un)readable. This just example output.

[berkans (Berkan Sezer)]

My Light page will be seperate from the main page. This section is for quick access to lights only.

My new light cards will look like this. (still on beta)

My light cards are still on development. I am trying to choose which one of should I use.

And also I have updated my previous room cards as well

[dimitri.landerloos]

3 things.

1. Auto entities. to automatically populate entities into your predefined cards. Can even use card-mod on your predefined card and then load in your entities. (Likely your best bet)
2. Decluttering card. to repeat code in your cards like for example your icon colors etc. If they are set through the card itself. Dont believe that this works for card-mod, but dont quote me on that.
3. Anchors. this is for your card-mod css. You can create an anchor and use it again later in the same parent card (if for example you have things in a grid or stack. Or just in your main dashboard yaml config) Example of anchoring below.
   
   

square: false
type: grid
cards:
  - type: custom:mushroom-template-card
    primary: Hello, {{user}}
    secondary: How are you?
    icon: mdi:home
    card_mod: &teststyle
      style: |
        ha-card {
          background: blue;
        }
  - type: custom:mushroom-template-card
    primary: Hello, {{user}}
    secondary: How are you?
    icon: mdi:home
    card_mod:
      <<: *teststyle

Keep in mind that anchoring only really works for editing your raw yaml page. As soon as you save a card it and open it in the visual editor it will just apply the full style in text form to any card that has the anchor.

[dimitri.landerloos]

Love the shadow effect with stacking shapes. What does that use? :before :after? Or just a filter of some kind that i dont know about? Looks dope nonetheless

[berkans (Berkan Sezer)]

Thanks. It is just a simple box-shadow effect used with if statement.

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px; 

When the light is “on” stacking shapes appear. When it is “off” it will display like this:

There are many examples of box shadows on the net, like this one:

Beautiful CSS box-shadow examples - CSS Scan

You can also try “Box Shadow Generators”

[vinceskahan]

@dimitri.landerloos

Keep in mind that anchoring only really works for editing your raw yaml page. As soon as you save a card it and open it in the visual editor it will just apply the full style in text form to any card that has the anchor.

sigh - yes. Ugly behavior.

This did work, FWIW, which gets me a little closer (thanks!).

square: false
type: grid
cards:
  - type: custom:mushroom-entity-card
    entity: sensor.ecowitttempsensor1
    name: sensor1
    layout: vertical
    icon: mdi:thermometer
    frontend: null
    card_mod: &teststyle
      style: |
        ha-card {
          {% set x = states(config.entity) | int %}   
          --primary-text-color:
            {% if x >= 75 %}   white;
            {% else %}        yellow;
            {% endif %}
          --secondary-text-color:
            {% if x >= 80 %}    white;
            {% else %}         cyan;
            {% endif %}
          background:
            {% if x >= 90 %}    red
            {% elif x >= 80 %}   orange
            {% elif x >= 70 %}   green
            {% elif x >= 50 %}   cyan
            {% else %}          blue
            {% endif %}
        }
  - type: custom:mushroom-entity-card
    entity: sensor.ecowitttempsensor2
    name: sensor2
    layout: vertical
    icon: mdi:thermometer
    frontend: null
    card_mod:
      <<: *teststyle
columns: 5

[dimitri.landerloos]

Happy to help! Still think auto entities is your best bet in these situations. It can create many of the same type of card but inject different entities and names into them either using a regular filter (visual editor) or via a template filter so something like the below as an example.

              type: custom:auto-entities
              card:
                type: custom:bar-card
                card_mod:
                  style: |
                    bar-card-currentbar, bar-card-backgroundbar {
                      border-radius: 19px;
                    }
              filter:
                template: |-
                  {% for state in states.sensor -%}
                    {%- if state.entity_id | regex_match("sensor.*battery*", ignorecase=False) and "SM" not in state.attributes.friendly_name and "Dimitri" not in state.attributes.friendly_name and 'unknown' not in state.state and 'unavailable' not in state.state and state.state | int <= 10-%}
                      {{
                        {
                          'entity': state.entity_id,
                          'name': state.attributes.friendly_name.split(' battery')[0]
                        }
                      }},
                    {%- endif -%}
                  {%- endfor %}
              sort:
                method: state
                numeric: true

[ncd]

THANK YOU so much! I will definitely look into this!

[spacekiek]

My current fan speed setup is messy, is there card/code available to have 1 icon/card with selects a certain fan speed. (I have 5 speeds based on xx % send)

[eMeF]

Check this out 🔹 Card-mod - Add css styles to any lovelace card - #4973 by eMeF?

You can combine that with mushroom-fan-card into single card using custom-stacked-card.

You can achieve something like this

[g0m]

Hi guys, quick question:

How can I change the icon color in a cove card please?
I am using styles to change the background color of the card but can’t figure out how to change that icon color!

thank you so much

[dimitri.landerloos]

Please post your current YAML so we can help you

[g0m]

I was trying this:

type: custom:mushroom-cover-card
entity: cover.voletsmaison
tap_action:
  action: more-info
show_position_control: false
show_buttons_control: true
fill_container: false
layout: horizontal
name: m a i s o n
secondary_info: none
icon-color: grey
card_mod:
  style: |
    ha-card {
      --primary-text-color: rgb(54,57,59);
      --primary-icon-color: rgb(255,148,9);
    }

The font color works, but the icon color doesn’t.
I am sure I am doing something wrong here!

[dimitri.landerloos]

No, nothing wrong just add this:

type: custom:mushroom-cover-card
entity: cover.voletsmaison
tap_action:
  action: more-info
show_position_control: false
show_buttons_control: true
fill_container: false
layout: horizontal
name: m a i s o n
secondary_info: none
card_mod:
  style: |
    ha-card {
      --primary-text-color: rgb(54,57,59);
      --primary-icon-color: rgb(255,148,9);
    }
    mushroom-shape-icon {
      --shape-color: rgba(255, 0, 0, 0.2) !important;
      --icon-color: rgba(255, 0, 0, 1) !important;
    }

of course change the color to whatever you want to use

[g0m]

thanks mate, works like a charm

May I ask another question:
Is there anyway to change the font type?

[dimitri.landerloos]

Yes! Check out my guide here:

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

easier than telling you every option

[g0m]

fantastic, sorry I missed that!