Hi, I would be very interested to see your code, especially with the sidebar menu
On the first 3 screens, how did you get the icons for the rooms in the top left corner? And how did you color the boxes
Hi,
this is the first card, the other are all the same:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
secondary: Cucina e soggiorno
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: soggiorno
icon_color: blue
multiline_secondary: true
primary: Zona giorno
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperatura_soggiorno
icon_color: blue
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: entity
entity: sensor.umidita_soggiorno_knx
icon_color: blue
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
1 Like
that is the whole YAML. This is a popup card using browser mod. This goes in your raw configuration lovelace ui under view
You can have a look at my Room Card shared here:
1 Like
Just a note on the use of those chevron dropdowns, this only reliably works if there’s 1 device/person using that dashboard, as the dropdown functions globally. I’ve reverted to using popups now using custom more-info + fire-dom-event popups for different hold/tap actions, which seems the cleanest way to prevent a cluttered interface while keeping everything configurable and accessible.
Hey mate, i have used your room card, and want to see what an image looks behind the text . I dont know CSS so im just finding code i like, and sort of learning from there.
This is the picture im wanting to try. i added it to my /config/image/backyard.png. Any help would be appreciated!
https://img.freepik.com/free-vector/scene-backyard-with-fence_1308-93251.jpg?t=st=1658540839~exp=1658541439~hmac=72015f20b219d72d7341cb0c9ca3ba491c3fdceb6ae9259d30817a023714b13c&w=1380
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Master Bedroom
secondary: >-
{{ states('sensor.master_bedroom_climate_brads_orchid_temperature') |
round(0) }}°C | {{
states('sensor.master_bedroom_climate_brads_orchid_humidity') | round(0)
}}%
icon: mdi:bed-king
entity: light.area_master_bedroom_lights_group
tap_action:
action: toggle
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 80px;
height: 66px;
margin-left: -26px !important;
}
You could do something like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Outside
secondary: '{{ states(''sensor.weatherflow_air_temperature'') | round (0) }} °C'
icon: mdi:tree
entity: group.outside_lights
tap_action:
action: navigate
navigation_path: outside
hold_action:
action: toggle
icon_color: '{{ ''teal'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host {
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.weatherflow_is_raining
state: 'on'
chip:
type: template
icon_color: grey
icon: >-
mdi:weather-{{ states('weather.weatherflow_hourly_based_forecast')
}}
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: group.outside_gates_doors
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:gate
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
background: url('/local/backyard.png') center;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.8);
{% if is_state('group.outside_lights', 'on') %}
box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
{% endif %}
}
9 Likes
Thanks! i like it. i was hoping the image would fill the top section and the bottom section still be white.
Would i just the move that code up to where the top card is?
Yes, just like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Outside
secondary: '{{ states(''sensor.weatherflow_air_temperature'') | round (0) }} °C'
icon: mdi:tree
entity: group.outside_lights
tap_action:
action: navigate
navigation_path: outside
hold_action:
action: toggle
icon_color: '{{ ''teal'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host {
background: url('/local/backyard.png') center;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.8);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.weatherflow_is_raining
state: 'on'
chip:
type: template
icon_color: grey
icon: >-
mdi:weather-{{ states('weather.weatherflow_hourly_based_forecast')
}}
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: group.outside_gates_doors
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:gate
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('group.outside_lights', 'on') %}
box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
{% endif %}
}
4 Likes
got it sorted!
Legend!
1 Like
Is anyone able to help me understand how to change the font size of a mushroom template card? I’ve done some searching / reading and seen some tips but my HA knowledge is still new and I couldn’t quite work it out. I understand enough CSS to get by, I can write a bit of Python, I can do some templating, but I need a bit of help understanding what goes where.
Loving all the contributions here, it’s giving me a ton of great inspiration.
So I’m looking to combine two different animations on the template card and I’m having trouble with it. Essentially, the fan icon for the AC spins when turned on and shows up as different colors depending on the mode (heating, cooling etc). That works great, but it’d be even better if I can add a colored pulse effect to that IF there’s a boolean timer (named timer.edwins_office_ac_blast’ that’s on. I’ve got both codes working separately, but as soon as I try and combine them, it all goes wrong.
Original code with just the fan spinning animation (in different colors)
type: custom:mushroom-template-card
primary: Edwin's Office
secondary: ''
icon: fas:fan
tap_action:
action: navigate
navigation_path: edwinsofficeac
layout: vertical
entity: climate.edwin_s_office
icon_color: |-
{% if is_state(entity, 'cool') %}
blue
{% endif %}
{% if is_state(entity, 'dry') %}
yellow
{% endif %}
{% if is_state(entity, 'heat') %}
red
{% endif %}
double_tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon
{
{{ '--icon-animation: rotation 1s linear infinite;' if not is_state('climate.edwin_s_office', 'off') }}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
… and here’s the pulse animation that I’m trying to add to it:
style: |-
{% if is_state("climate.edwin_s_office", "cool") and is_state('timer.edwins_office_ac_blast', 'idle')%}
mushroom-shape-icon {
display: flex;
border-radius: 60%;
animation: pulse-black 1.3s infinite;
}
@keyframes pulse-black {
0% {
box-shadow: 0 0 0 0 rgb(var(--rgb-blue), 0.8);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--rgb-blue), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0);
}
}
{% endif %}
{% if is_state("climate.edwin_s_office", "heat") and is_state('timer.edwins_office_ac_blast', 'idle')%}
mushroom-shape-icon {
display: flex;
border-radius: 60%;
animation: pulse-black 1.3s infinite;
}
@keyframes pulse-black {
0% {
box-shadow: 0 0 0 0 rgb(var(--rgb-red), 0.8);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--rgb-red), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0);
}
}
{% endif %}
{% if is_state("climate.edwin_s_office", "dry") and is_state('timer.edwins_office_ac_blast', 'idle')%}
mushroom-shape-icon {
display: flex;
border-radius: 60%;
animation: pulse-black 1.3s infinite;
}
@keyframes pulse-black {
0% {
box-shadow: 0 0 0 0 rgb(var(--rgb-yellow), 0.8);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--rgb-yellow), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--rgb-yellow), 0);
}
}
{% endif %}
Any help would be much appreciated. Although this might be an if statement too far …
Hey again
any chance of helping out with the below. had 2 notes on the attachment?
I went to https://www.w3schools.com/css/css_text.asp, but coukdnt really understand or make the text change…
I
You can darken the shape with:
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-teal), 0.4) !important;
}
Change --rgb-[color] to any of the Mushroom colors and adjust the opacity with the last number.
Like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Outside
secondary: '{{ states(''sensor.weatherflow_air_temperature'') | round (0) }} °C'
icon: mdi:tree
entity: group.outside_lights
tap_action:
action: navigate
navigation_path: outside
hold_action:
action: toggle
icon_color: '{{ ''teal'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host {
background: url('/local/backyard.png') center;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.8);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'teal' if is_state('group.outside_lights', 'on') else 'disabled' }}), 0.4) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.weatherflow_is_raining
state: 'on'
chip:
type: template
icon_color: grey
icon: >-
mdi:weather-{{ states('weather.weatherflow_hourly_based_forecast')
}}
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: group.outside_gates_doors
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:gate
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('group.outside_lights', 'on') %}
box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
#background: rgba(0, 150, 136, 0.1); {% endif %}
}
1 Like
You can add a text shadow to the primary text like this:
type: custom:mushroom-template-card
primary: |
Why did the mushroom go to the party?
secondary: Because he’s a fungi!
icon: ''
picture: /local/mushroom_face.png
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 4px 4px 3px rgba(var(--rgb-disabled), 0.8);
}
Be aware that this may break with future Mushroom updates.
You can add it to my Room Card like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Outside
secondary: '{{ states(''sensor.weatherflow_air_temperature'') | round (0) }} °C'
icon: mdi:tree
entity: group.outside_lights
tap_action:
action: navigate
navigation_path: outside
hold_action:
action: toggle
icon_color: '{{ ''teal'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 4px 4px 3px rgba(var(--rgb-disabled), 0.8);
}
.: |
:host {
background: url('/local/backyard.png') center;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.8);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'teal' if is_state('group.outside_lights', 'on') else 'disabled' }}), 0.4) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.weatherflow_is_raining
state: 'on'
chip:
type: template
icon_color: grey
icon: >-
mdi:weather-{{ states('weather.weatherflow_hourly_based_forecast')
}}
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: group.outside_gates_doors
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:gate
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('group.outside_lights', 'on') %}
box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
#background: rgba(0, 150, 136, 0.1);
{% endif %}
}
1 Like
Have a look here:
Thank you!! so much that you can do!
1 Like
You can combine the animations like this:
type: custom:mushroom-template-card
primary: Edwin's Fan
secondary:
icon: mdi:fan
icon_color: blue
picture: ''
card_mod:
style: |
mushroom-shape-icon {
display: flex;
border-radius: 60%;
animation: rotation-pulse 1s linear infinite;
}
@keyframes rotation-pulse {
0% {
box-shadow: 0 0 0 0 rgb(var(--rgb-blue), 0.8);
transform: rotate(0deg);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--rgb-blue), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0);
transform: rotate(360deg);
}
}
4 Likes
It does not work no matter what!
i try:
style: |
ha-card {
--secondary-text-color: 'green';
}
and no luck!
1 Like