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

[LiQuid_cOOled]

• *I think you are looking for margins. Padding would be on the individual cards.

example settings
margin: 25px 50px 75px;

• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px

type: custom:mod-card
style: |
  ha-card {
    --ha-card-header-color: red;
    --ha-card-header-font-size: 20px;
    --vertical-stack-card-margin: 0px 20px 10px 20px;
  }
card:
  type: vertical-stack
  title: Zeit & Wetter
  cards:
    - type: entity
      entity: sensor.date_time
      name: Zeit
    - show_current: true
      show_forecast: true
      type: weather-forecast
      entity: weather.forecast_home
      forecast_type: daily
      name: ' '

[LiQuid_cOOled]

Found a better way

type: custom:mod-card
card:
  type: vertical-stack
  title: Zeit & Wetter
  cards:
    - type: entity
      entity: sensor.date_time
      name: Zeit
    - show_current: true
      show_forecast: true
      type: weather-forecast
      entity: weather.forecast_home
      forecast_type: daily
      name: ' '
card_mod:
  style: |
    ha-card {
      padding-top:30px;
      color: red !important;
      font-size: 10px;
      --ha-card-header-font-size: 20px;
      --ha-card-header-color: blue  !important;
       }
        

[RkcCorian]

Nearly… I would like to reduce the spaceing before and after the heading/title. With padding it adds a space only, or I’m wrong?

[LiQuid_cOOled]

just use a negative number, -10px for example.

[RkcCorian]

It does not work for me unfortunately. I think to use “custom:mushroom-title-card”. Would it be possible there to reduce the spacing here somehow?

My code

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Zeit & Wetter
    title_tap_action:
      action: navigate
      navigation_path: /dashboard-test/sicherheit
  - type: entity
    entity: sensor.date_time
    name: Zeit
  - show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.forecast_home
    forecast_type: daily
    name: ' '

[LiQuid_cOOled]

This should work. I’ll direct message you as well.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Zeit & Wetter
    title_tap_action:
      action: navigate
      navigation_path: /dashboard-test/sicherheit
    card_mod: 
      style: |
        ha-card {
        --title-padding: 10px 10px 1px;
        --title-font-size: 15px;
        --primary-text-color: red;
        --title-font-weight: 400;
         }  
  - type: entity
    entity: sensor.date_time
    name: Zeit
  - show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.forecast_home
    forecast_type: daily
    name: ' '

[RkcCorian]

@LiQuid_cOOled

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Zeit & Wetter
    title_tap_action:
      action: navigate
      navigation_path: /dashboard-test/sicherheit
    card_mod: 
      style: |
        ha-card {
        --title-padding: 10px 10px 1px;
        --title-font-size: 15px;
        --primary-text-color: red;
        --title-font-weight: 400;
         }  
  - type: entity
    entity: sensor.date_time
    name: Zeit
  - show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.forecast_home
    forecast_type: daily
    name: ' '

Many thanks!!

[HA_n00b]

How to add battery info in the secondary_info of mushroom-cover-card?

type: custom:mushroom-cover-card
entity: cover.cover_first_floor
name: Cover First Floor
show_position_control: true
show_buttons_control: true
primary_info: name
tap_action:
  action: none
hold_action:
  action: more-info
double_tap_action:
  action: none
secondary_info: state

I want the secondary_info shows “Open 50% | battery 97%”.

Anyone can help?

[LiQuid_cOOled]

Please use the back tick to post your code. #11

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

Yes, what you’re looking for is possible if you have card-mod installed.

[HA_n00b]

I do have card_mod installed. @LiQuid_cOOled Can you please share your code?

Thanks.

[LiQuid_cOOled]

You could also adjust the % color based on the battery level.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Bedroom Curtains
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr
      margin: 0px 0px 0px 0px
    cards:
      - type: custom:mushroom-cover-card
        entity: cover.pc_curtains
        show_position_control: true
        show_tilt_position_control: false
        show_buttons_control: true
        layout: horizontal
        card_mod:
          style: |
            ha-state-icon:after {
            content: " {{ states('sensor.pc_curtains_battery') }}%";
            background: none;
            font-size: 10px;
            font-weight: 500;
            border-width: 2px;
            border-radius: 50%;
            margin-top: 29px;
            margin-left: 125px;
            position: absolute;
            color: yellow;
                }
card_mod:
  style: |
    ha-card {
     border:none !important;
        }

[LiQuid_cOOled]

If you want to change the color based on the battery level add this code to color:

color:  {% if states('sensor.pc_curtains_battery') | int < 15 %}
                     red
                    {% elif states('sensor.pc_curtains_battery') | int < 50 %}
                     yellow  
                     {% else %}
                     lime
                    {% endif %}

Entire card code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Bedroom Curtains
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr
      margin: 0px 0px 0px 0px
    cards:
      - type: custom:mushroom-cover-card
        entity: cover.pc_curtains
        show_position_control: true
        show_tilt_position_control: false
        show_buttons_control: true
        layout: horizontal
        card_mod:
          style: |
            ha-state-icon:after {
            content: " {{ states('sensor.pc_curtains_battery') }}%";
            background: none;
            font-size: 10px;
            font-weight: 500;
            border-width: 2px;
            border-radius: 50%;
            margin-top: 29px;
            margin-left: 130px;
            position: absolute;
            color:  {% if states('sensor.pc_curtains_battery') | int < 15 %}
                     red
                    {% elif states('sensor.pc_curtains_battery') | int < 50 %}
                     yellow  
                     {% else %}
                     lime
                    {% endif %}
                    }      
      - type: custom:mushroom-cover-card
        entity: cover.bed_curtains
        show_position_control: true
        show_tilt_position_control: false
        show_buttons_control: true
        layout: horizontal
        card_mod:
          style: |
            ha-state-icon:after {
            content: " {{ states('sensor.bed_curtains_battery') }}%";
            background: none;
            font-size: 10px;
            font-weight: 500;
            border-width: 2px;
            border-radius: 50%;
            margin-top: 29px;
            margin-left: 130px;
            position: absolute;
            color:  {% if states('sensor.bed_curtains_battery') | int < 15 %}
                     red
                    {% elif states('sensor.bed_curtains_battery') | int < 50 %}
                     yellow  
                     {% else %}
                    lime
               
                    {% endif %}
                      }
      - type: custom:mushroom-cover-card
        entity: cover.tv_curtains
        show_position_control: true
        show_tilt_position_control: false
        show_buttons_control: true
        layout: horizontal
        card_mod:
          style: |
            ha-state-icon:after {
            content: " {{ states('sensor.tv_curtains_battery') }}%";
            background: none;
            font-size: 10px;
            font-weight: 500;
            border-width: 2px;
            border-radius: 50%;
            margin-top: 29px;
            margin-left: 130px;
            position: absolute;
            color:  {% if states('sensor.tv_curtains_battery') | int < 15 %}
                     red
                    {% elif states('sensor.tv_curtains_battery') | int < 50 %}
                     yellow  
                     {% else %}
                     lime
                    {% endif %}
                    }
card_mod:
  style: |
    ha-card {
     border:none !important;
        }

[Faecon (Jo)]

did you found a solution for the conditial card with numeric condition

edit: solution here

2 questions about conditional Card

- type: conditional conditions: - condition: "numeric_state" below: 20 - entity: input_number.keuken_vaatwas_ingevenaantalblokjes card: type: custom:stack-in-card keep: margin: false box_shadow: false background: false cards: - type: custom:numberbox-card entity: input_number.keuken_…

[dimitri.landerloos]

it is done like this. the syntax is wrong for what he posted.

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - condition: numeric_state
        entity: sensor.all_standby_energy
        above: 0
        below: 1000
    chip:
      type: template
      icon: mdi:test-tube

[Faecon (Jo)]

Yes. Thanks. i already found it and posted the solution in the other post

[dimitri.landerloos]

“The other post” ? did you cross post the same question somewhere else? your initial question is not edited with the solution.

[Faecon (Jo)]

sorry. Changed the post …

[FilipeOS]

Hi,

I need some advise. I have this webrtc cards without grids, but how can I make 2 columns only in mobile? So I can see more cameras?

Thank you

[Soulsedge]

Hello,
There is a way to size up the circle/shadow behind the icon ?

type: custom:mushroom-light-card
entity: light.light_livingroom
use_light_color: true
show_brightness_control: true
name: Entrée
show_color_temp_control: true
layout: horizontal
show_color_control: true
collapsible_controls: false
icon: mdi:coat-rack
fill_container: false
secondary_info: none
card_mod:
          style: |
            :host {
              --mush-icon-symbol-size: 65px;
            }
            ha-card {
               border: none !important;
               box-shadow: none !important;
               box-shadow: none !important;
             }

I can’t use the mush-icon-size because the light control bar don’t align the middle of the logo compared to mush-icon-symbol-size

Thanks

[dimitri.landerloos]

Take a look at the guide linked in my profile