What am i missing?
- type: custom:mushroom-template-card
layout: vertical
tap_action:
action: navigate
navigation_path: house
icon: mdi:home-assistant
icon_color: blue
primary: ""
secondary: Home
card_mod:
style: |
ha-state-icon {
animation: boing 3s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
.: |
ha-card {
background: var(--card-background-color);
#width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
j.otte
September 26, 2024, 10:47am
1253
hi all
type: custom:mushroom-template-card
primary: Kaarsen
secondary: ''
icon: mdi:candle
icon_color: >-
{% if
is_state('input_boolean.kaarsen',
'on') %}
yellow
{% else %}
grey
{% endif %}
entity: input_boolean.kaarsen
layout: vertical
fill_container: true
tap_action:
action: more-info
Many thanks!
1 Like
is there a way to show up the Person Picture in a badge?
type: custom:mushroom-template-badge
picture: person.xxxx
Yes,
type: custom:mushroom-template-badge
content: xxxxx
entity: person.xxxxx
picture: /local/images/Xxxxx.jpg
1 Like
Would it be possible to add a icon before the title? “mdi:shower”
@dimitri.landerloos
This is a very good looking card!
To make even better for my purposes. Is it possible to also include a toggle for lights in the upper right corner of the lower card?
Something like this
[image]
# Bathroom
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.indoor_humidity
icon: mdi:shower
# show_icon: false
name: Bathroom
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: "-3%"
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.indoor_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.indoor_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.indoor_temperature
name: Temperature
color: "#ff8c00"
- entity: sensor.indoor_humidity
name: Humidity
color: "#3399ff"
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
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);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.0x00178801023e71ab
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
3 Likes
Frosty
September 27, 2024, 7:49pm
1258
you need the button card thread.
the icon is there but not within the card. if you change the height you can see it.
try adding “i” to the grid layout
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
you will get better help in the relevant forum thread
Frazic
September 28, 2024, 3:56pm
1259
hi but it is possible to replicate this card exactly like and with mushroom or with something else without using minimalist ui:https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_nik_door/
Can someone assist me in enforcing height and width of a card?
- type: custom:vertical-stack-in-card
cards:
- type: custom:swipe-card
parameters:
spaceBetween: 8
cards:
- type: custom:mushroom-template-card
primary: Livingroom
secondary: "{{ states('sensor.0x001788010bcfb11d_temperature') }}°C"
icon: mdi:fireplace
tap_action:
action: navigate
navigation_path: livingroom
- type: glance
show_name: false
show_icon: true
show_state: false
state_color: true
theme: mushroom_room
entities:
- entity: sensor.0x001788010bcfb11d_temperature
- entity: media_player.living_room_r_2
card_mod:
style: |
ha-card {
height: 100% !important;
margin-top: -20px;
margin-bottom: -20px;
box-shadow: none;
background: rgba(0, 0, 0, 0);
}
- type: custom:mushroom-media-player-card
entity: media_player.home_display
use_media_artwork: true
use_media_info: true
collapsible_controls: true
show_volume_level: false
fill_container: false
tap_action:
action: call-service
service: media_player.media_play_pause
data: {}
target:
entity_id: media_player.home_display
card_mod:
style: |
ha-card {
border-radius: 16px 16px 0px 0px;
{% if is_state(config.entity, 'playing') or is_state(config.entity, 'paused') %}
background: rgba(var(--rgb-card-background-color), 0.9) url( '{{ state_attr(config.entity, "entity_picture" ) }}' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% else %}
{% endif %}
}
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
left: 3px;
--ha-card-border-width: 0;
}
majdzik84
October 1, 2024, 6:41am
1262
I have been having a problem with my cards for some time now. They don’t load correctly. After refreshing several times it will load correctly. Is anyone able to help?
Card code:
type: custom:vertical-stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
entity_id: light.natalia
primary: Natalia
secondary: '{{ state_attr(''climate.natalia'', ''current_temperature'') }} °C'
picture: /local/img/natalia-avatar2.png
layout: horizontal
multiline_secondary: false
badge_icon: >-
{{ 'mdi:motion-sensor' if is_state('binary_sensor.natalka', 'on') else
'mdi:motion-sensor-on' }}
tap_action:
action: call-service
service: light.toggle
service_data: {}
target:
entity_id: light.natalia
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
top: -12px;
right: 15px;}
mushroom-badge-icon {
left: 135px;
top: 10px;
--icon-color: red;
--main-color: none;
}
:host {
--mush-badge-font-size: 25px;
--mush-badge-icon-size: 18px;
}
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
--chip-height: 38px;
--chip-spacing: 0;
top: -28px;
}
alignment: end
chips:
- type: template
entity: light.natalia
icon: mdi:lightbulb
tap_action:
action: call-service
service: light.toggle
service_data: {}
target:
entity_id: light.natalia
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
amber
{% elif state=='off' %}
#6f6f6f
{% else %}
#6f6f6f
{% endif %}
- type: template
entity: light.lozko_natali
icon: mdi:track-light
tap_action:
action: call-service
service: light.toggle
service_data: {}
target:
entity_id: light.lozko_natali
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
amber
{% elif state=='off' %}
#6f6f6f
{% else %}
#6f6f6f
{% endif %}
- type: template
entity: cover.natalia_2
icon: >-
{% if states('binary_sensor.natalia2_contact')=='on' %}
mdi:door-open
{% elif states('binary_sensor.natalia2_contact')=='off' and
states('cover.natalia_2')=='closed' %}
mdi:window-shutter
{% else %}
mdi:door
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% if states('binary_sensor.natalia2_contact')=='on' %}
red
{% elif states('binary_sensor.natalia2_contact')=='off' %}
#6f6f6f
{% else %}
#6f6f6f
{% endif %}
- type: template
entity: cover.natalia
icon: >-
{% if states('binary_sensor.natalia1_contact')=='on' %}
mdi:door-open
{% elif states('binary_sensor.natalia1_contact')=='off' and
states('cover.natalia')=='closed' %}
mdi:window-shutter
{% else %}
mdi:door
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% if states('binary_sensor.natalia1_contact')=='on' %}
red
{% elif states('binary_sensor.natalia1_contact')=='off' %}
#6f6f6f
{% else %}
#6f6f6f
{% endif %}
card_mod:
style: |
:host {
--mush-icon-size: 55px;
top: -20px ;
}
ha-card {
height: 85px;
box-shadow:
{% if is_state('light.lampy_natalia', 'on') %} 0 0 0.3em #FFD700 {%
else %} {% endif %}
}
}
I am looking for the same!
Just an animated icon with a candle, would be awesome.
Start by changing
to this
card_mod:
style: |
ha-card {
--icon-size: 55px;
top: -20px ;
}
Xeelos
October 3, 2024, 6:05pm
1265
Hi im trying to make a new dashboard using mushrooms cards, but when i use this code
card_mod:
style: |
ha-card {
background: none;
border: 2px outset #cc8418;
}
the text gets invisible when i cast it to my google home nest, is there a way to change the text color so i can see the text ?
i have tryed with this code
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
--card-secondary-color: orange;
}
but i cant use these two codes together or im doing something wrong.
I have a silly issue. I’m using Ecobee thermostats, all of which have the ability to turn on just the fan on our HVAC units. The default Lovelace Climate card also allows this functionality. The Mushroom card, unfortunately, does not.
I think this is because our HVAC integration doesn’t have a ‘fan_only’ option under ‘hvac_modes’. Rather, it only has a separate ‘fan_modes’ entity that can be either ‘auto’ or ‘on’. Does anyone know if there is a way to make that work with the Mushroom climate card so that we can toggle the fans on and off separately when we want to circulate the air?
Twig_Bark
October 8, 2024, 12:32pm
1267
Is it possible use mushroom chip card what displays only entity value without icon. I can remove icon but this gray area remains where icon was.
soo
October 9, 2024, 4:39am
1268
How to integrate this into yaml THEME in order to be applied to each card. This is from the guide in the first post Mushroom Cards Card Mod Styling/Config Guide - #10 by dimitri.landerloos
mushroom-shape-icon$: |
.shape {
background-color: transparent !important;
}
?
This construction:
ha-card.type-custom-mushroom-light-card
{
mushroom-shape-icon$: |
.shape {
background-color: transparent !important;
}
}
doesn’t work
hrana
October 9, 2024, 8:57pm
1269
I modified some code earlier in the thread to add a 4th badge (bottom left) but I can’t seem to make that badge opaque. Can someone help me out?
type: custom:mushroom-template-card
primary: Test Icon
icon: mdi:dots-grid
icon_color: red
badge_icon: mdi:bug
badge_color: green
card_mod:
style: |
{% if is_state('light.test_light', 'on') %}
mushroom-badge-icon:after {
content: "humidity_indoor";
font-size: 0.9em;
font-family: 'Material Symbols Outlined';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 26px;
color: var(--icon-color);
background: var(--main-color);
width: var(--mush-badge-size, 16px);
height: var(--mush-badge-size, 16px);
border-radius: var(--mush-badge-border-radius, 50%);
}
mushroom-badge-icon:before {
content: "bug_report";
font-size: 0.9em;
font-family: 'Material Icons';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: 26px;
color: var(--icon-color);
background: var(--main-color);
width: var(--mush-badge-size, 16px);
height: var(--mush-badge-size, 16px);
border-radius: var(--mush-badge-border-radius, 50%);
}
mushroom-shape-icon:before {
content: "bug_report";
font-size: 0.9em;
font-family: 'Material Icons';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
bottom: -3px;
left: -3px;
color: white;
background-color: green !important;
width: var(--mush-badge-size, 16px);
height: var(--mush-badge-size, 16px);
border-radius: var(--mush-badge-border-radius, 50%);
}
{% endif %}
MelleD
October 11, 2024, 10:50am
1270
My climate control cannot use the action turn on and turn off. I there a possibilty to use template for the tab action in the climate mushroom card?
cards:
- type: custom:mushroom-climate-card
entity: climate.room_climate_xxx
show_temperature_control: true
hvac_modes:
- "off"
- "heat"
tap_action:
action: climate.set_hvac_mode
target:
entity_id:
- climate.room_climate_xxx
data:
hvac_mode: |-
{% if states('climate.room_climate_xxx') == "off" %}
heat
{% else %}
off
{% endif %}
but did not work to toogle hvac
hey, is there a way to use custom:mushroom-template-badge in auto-entities?
)
