Iām making good progress with my dashboard using the mushroom-template-card:
Iād appreciate help in how to adjust the card height
cards:
- type: custom:mushroom-template-card
primary: Zone 1
secondary: '{{ relative_time(states.switch.sonoff_irrigation21.last_changed) }} ago'
icon: mdi:sprinkler
entity: switch.sonoff_irrigation21
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
multiline_secondary: false
fill_container: false
badge_icon: none
badge_color: |-
{% set state = states('sensor.irrigation21_on_today_min') %}
{% if state | is_number and state | float > 1 %}
green
{% elif state | is_number and state | float > 15 %}
yellow
{% elif state | is_number and state | float > 25 %}
red
{% endif %}
picture: ''
layout: vertical
card_mod:
style: |
ha-card {
--card-primary-font-size: 10px;
--card-secondary-font-size: 8px;
#background: transparent;
--icon-size: 30px;
#width: 66px;
#margin-left: auto;
#margin-right: auto;
#margin-bottom: 2px;
}
mushroom-badge-icon:after {
content: "{{states("sensor.irrigation21_on_today_min")}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
#background: rgb(var(--rgb-green));
color: var(--card-background-color);
font-weight: bolder;
#border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
- type: custom:mushroom-template-card
primary: Zone 2
secondary: '{{ relative_time(states.switch.sonoff_irrigation22.last_changed) }} ago'
icon: mdi:sprinkler
entity: switch.sonoff_irrigation22
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
multiline_secondary: false
fill_container: false
badge_icon: none
badge_color: |-
{% set state = states('sensor.irrigation22_on_today_min') %}
{% if state | is_number and state | float > 1 %}
green
{% elif state | is_number and state | float > 15 %}
yellow
{% elif state | is_number and state | float > 25 %}
red
{% endif %}
picture: ''
layout: vertical
card_mod:
style: |
ha-card {
--card-primary-font-size: 10px;
--card-secondary-font-size: 8px;
#background: transparent;
--icon-size: 30px;
#width: 66px;
#margin-left: auto;
#margin-right: auto;
#margin-bottom: 2px;
}
mushroom-badge-icon:after {
content: "{{states("sensor.irrigation22_on_today_min")}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
#background: rgb(var(--rgb-green));
color: var(--card-background-color);
font-weight: bolder;
#border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
- type: custom:mushroom-template-card
primary: Zone 3
secondary: '{{ relative_time(states.switch.sonoff_irrigation24.last_changed) }} ago'
icon: mdi:sprinkler
entity: switch.sonoff_irrigation24
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
picture: ''
multiline_secondary: false
fill_container: false
badge_icon: none
layout: vertical
badge_color: |-
{% set state = states('sensor.irrigation24_on_today_min') %}
{% if state | is_number and state | float > 1 %}
green
{% elif state | is_number and state | float > 31 %}
yellow
{% elif state | is_number and state | float > 40 %}
red
{% endif %}
card_mod:
style: |
ha-card {
--card-primary-font-size: 10px;
--card-secondary-font-size: 8px;
#background: transparent;
--icon-size: 30px;
#width: 66px;
#margin-left: auto;
#margin-right: auto;
#margin-bottom: 2px;
}
mushroom-badge-icon:after {
content: "{{states("sensor.irrigation24_on_today_min")}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
#background: rgb(var(--rgb-green));
color: var(--card-background-color);
font-weight: bolder;
#border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
- entity: sensor.fertilizer_level
scale: 27px
severity:
amber: 15
green: 40
red: 0
title: Fertilizer tank
type: custom:gauge-card
type: horizontal-stack
1 Like
Thanks I got it sorted in the end
ice3m
June 26, 2023, 4:56pm
7158
Dan,
That got it! Thank you!!!
Hi team,
How can I remove the border on this?
This has just been an issue on the latest versions and I canāt figure it out:
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: '{{ now().strftime(''%I'') }}:{{ now().strftime(''%M %p'') | lower }}'
subtitle: >-
{{ now().strftime('%A') }}, {{ now().strftime('%B') }} {{
now().strftime('%d') }}
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 12px 12px 3px;
}
.title {
font-size: 34px!important;
spacing: 100px;
}
.subtitle {
font-size: 25px!important;
}
ha-card {
height: 98px !important;
}
ha-card-border: 0px
}
ha-card-box-shadow: none;
}
ha-card-box-shadow: 0px
}
Thanks in advance
dyego.hass
June 26, 2023, 11:02pm
7160
Dude, could you share the code?
hidi92
June 27, 2023, 7:41am
7161
hi, did you finally get that bar to work? I really like the design of it but I canāt get it to work completely. thanks :))
Hi, I read last year that more-info does not work with chips. Is that still the case? I got some sensors i want to see some history of thats in a chip card.
berkans
June 27, 2023, 12:19pm
7163
Dude I am not using them anymore.
Google it. Search for home assistant history stats and history stats conversions.
Sorry I couldnāt help
Faecon
June 27, 2023, 4:21pm
7164
title: "verlichting"
path: "verlichting"
cards:
- type: 'custom:button-card'
template: card_title
name: ""
- type: custom:swipe-card
cards:
- square: false
columns: 1
type: grid
cards:
#### Boven
- type: custom:mod-card
style:
hui-horizontal-stack-card$: |
#root {
justify-content: center;
}
card:
type: horizontal-stack
cards:
- type: 'custom:button-card'
template: card_title
name: Boven
- type: "custom:stack-in-card"
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Slaapkamers
fill_container: true
tap_action:
action: none
hold_action:
action: none
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
height: 49px;
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
height: 49px;
}
is it possible to have a button on the very right of āslaapkamersā ? And on the very right of āBovenā
i want there 2 buttons to kill all the lights āupstairsā or in the submenuāsā¦
Nope, more-info works fine with chips. I think it always has (at least Iāve had it working for a while).
Can height be modulated on custom:mushroom-template-card?
really? nothing happens for me. Can you tell what Iām missing here?
> - type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
content: '{{ states(''sensor.inomhustemp'') }} ĀŗC'
icon: mdi:thermometer
tap_action:
action: more-info
entity: sensor.inomhustemp
icon_color: >-
{% set state=states('sensor.inomhustemp')|float(0) %} {% if
state<19 %} blue {% elif state<22 %} green {% elif state<26 %}
amber {% else %} red {% endif %}
- type: template
content: '{{ states(''sensor.luftfuktighet'') }} %'
icon: mdi:thermometer
icon_color: >-
{% set state=states('sensor.luftfuktighet')|float(0) %} {% if
state<38 %} blue {% elif state<68 %} green {% elif state<60 %}
amber {% else %} red {% endif %}
shogun168
June 27, 2023, 10:00pm
7168
Sorry, no idea ā¦ I just tested with a simple template and it works fine for me:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: more-info
entity: sensor.sun_next_dusk
icon: mdi:sun-angle
icon_color: blue
paddy0174
June 27, 2023, 10:50pm
7169
Could you please copy the exact code and use the proper formatting for it? The indentation in YAML is very important, and we canāt see if the error lies in the indentation or if itās something else.
In the code you posted, the indentation of āchips:ā is wrong, but that can be just the formatting as I said.
fugley
June 28, 2023, 3:55am
7170
card_mod:
style: |
ha-card {
height: 162px;
}
Iāve tried it however it does not change the card height. Is something else overriding it?
cards:
- type: custom:mushroom-template-card
primary: Zone 1
secondary: '{{ relative_time(states.switch.sonoff_irrigation21.last_changed) }} ago'
icon: mdi:sprinkler
entity: switch.sonoff_irrigation21
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
multiline_secondary: false
fill_container: false
badge_icon: none
badge_color: |-
{% set state = states('sensor.irrigation21_on_today_min') %}
{% if state | is_number and state | float > 1 %}
green
{% elif state | is_number and state | float > 15 %}
yellow
{% elif state | is_number and state | float > 25 %}
red
{% endif %}
picture: ''
layout: vertical
card_mod:
style: |
ha-card {
--card-primary-font-size: 10px;
--card-secondary-font-size: 8px;
#background: transparent;
#--icon-size: 30px;
#width: 66px;
height: 100px;
#margin-left: auto;
#margin-right: auto;
#margin-bottom: 2px;
}
mushroom-badge-icon:after {
content: "{{states("sensor.irrigation21_on_today_min")}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
#background: rgb(var(--rgb-green));
color: var(--card-background-color);
font-weight: bolder;
#border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
- type: custom:mushroom-template-card
primary: Zone 2
secondary: '{{ relative_time(states.switch.sonoff_irrigation22.last_changed) }} ago'
icon: mdi:sprinkler
entity: switch.sonoff_irrigation22
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
multiline_secondary: false
fill_container: false
badge_icon: none
badge_color: |-
{% set state = states('sensor.irrigation22_on_today_min') %}
{% if state | is_number and state | float > 1 %}
green
{% elif state | is_number and state | float > 15 %}
yellow
{% elif state | is_number and state | float > 25 %}
red
{% endif %}
picture: ''
layout: vertical
card_mod:
style: |
ha-card {
--card-primary-font-size: 10px;
--card-secondary-font-size: 8px;
#background: transparent;
#--icon-size: 30px;
#width: 66px;
height: 50px;
#margin-left: auto;
#margin-right: auto;
#margin-bottom: 2px;
}
mushroom-badge-icon:after {
content: "{{states("sensor.irrigation22_on_today_min")}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
#background: rgb(var(--rgb-green));
color: var(--card-background-color);
font-weight: bolder;
#border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
- type: custom:mushroom-template-card
primary: Zone 3
secondary: '{{ relative_time(states.switch.sonoff_irrigation24.last_changed) }} ago'
icon: mdi:sprinkler
entity: switch.sonoff_irrigation24
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
picture: ''
multiline_secondary: false
fill_container: false
badge_icon: none
layout: vertical
badge_color: |-
{% set state = states('sensor.irrigation24_on_today_min') %}
{% if state | is_number and state | float > 1 %}
green
{% elif state | is_number and state | float > 31 %}
yellow
{% elif state | is_number and state | float > 40 %}
red
{% endif %}
card_mod:
style: |
ha-card {
--card-primary-font-size: 10px;
--card-secondary-font-size: 8px;
#background: transparent;
#--icon-size: 30px;
#width: 66px;
height: 200px;
#margin-left: auto;
#margin-right: auto;
#margin-bottom: 2px;
}
mushroom-badge-icon:after {
content: "{{states("sensor.irrigation24_on_today_min")}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
#background: rgb(var(--rgb-green));
color: var(--card-background-color);
font-weight: bolder;
#border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
- entity: sensor.fertilizer_level
scale: 27px
severity:
amber: 15
green: 40
red: 0
title: Fertilizer tank
type: custom:gauge-card
type: horizontal-stack
1 Like
fugley
June 28, 2023, 9:19am
7172
best i can see is itās something in that gauge card not playing fair ?
andyblac
June 28, 2023, 10:34am
7173
@friendodevil try adding !important ie
card_mod:
style: |
ha-card {
--card-primary-font-size: 10px;
--card-secondary-font-size: 8px;
#background: transparent;
#--icon-size: 30px;
#width: 66px;
height: 200px !important;
#margin-left: auto;
#margin-right: auto;
#margin-bottom: 2px;
}
1 Like
Yeah sure, this is just some code i copied from someone else, it displays right so I think the format is correct, but not 100% sure
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
column-gap: 0px
row-gap: 0px
grid-template-areas: |
"1"
"2"
"3"
"4"
"5"
"6"
"7"
"8"
"9"
"10"
"11"
"12"
cards:
- type: custom:mushroom-light-card
entity: light.kok
fill_container: true
show_brightness_control: true
use_light_color: true
icon: mdi:fridge
name: Kƶk
secondary_info: none
layout: horizontal
view_layout:
grid_areas: 1
card_mod:
style: |
:host([dark-mode]) {
--ha-card-background: #2D3033;
--mush-icon-size: 24px;
}
ha-card {
border-radius: 10px 10px 0px 0px;
--icon-size: 24px;
--control-height: 20px;
--control-top: 16px;
--control-border-radius: 5px;
--control-border-spacing: 2px;
--card-primary-font-size: 14px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
content: '{{ states(''sensor.inomhustemp'') }} ĀŗC'
icon: mdi:thermometer
tap_action:
action: more-info
entity: sensor.inomhustemp
icon_color: >-
{% set state=states('sensor.inomhustemp')|float(0) %} {% if
state<19 %} blue {% elif state<22 %} green {% elif state<26 %}
amber {% else %} red {% endif %}
- type: template
content: '{{ states(''sensor.luftfuktighet'') }} %'
icon: mdi:thermometer
icon_color: >-
{% set state=states('sensor.luftfuktighet')|float(0) %} {% if
state<38 %} blue {% elif state<68 %} green {% elif state<60 %}
amber {% else %} red {% endif %}
alignment: start
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
view_layout:
grid-column: 1
grid-row: 2
card_mod:
style: |
ha-card {
border-radius: 0px 0px 10px 10px;
height: 35px;
margin-top: -14px;
outline-color: red;
--chip-spacing: 0px;
--ha-card-background: #352E1F;
}
is this better?
paddy0174
June 28, 2023, 1:44pm
7175
Hmmmā¦ Thatās not what I was hoping forā¦
I honestly have no idea, why itās not working for you. I tried numerous attempts, including putting this code into my dashboard, and it works as it shouldā¦ Happens not very often, but I really have no idea how to further approach this, as I canāt see any errors or faults.
My only way would be, to start step by step, beginning with an empty view and adding the chips card to see how that goes. And if it works, adding back one by one.
Sorry, couldnāt be of more help here.
