Does anyone use a Nest hub?
Is it the theme that changes the width or do i have to change it on a dedicated view?
examples would be preciated.
br
gotcha!, now working!
1 Like
Hello everyone, I am doing a energy card, and I am getting issues with the doble and tripple. backgrounds.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
keep:
box_shadow: false
margin: false
border_radius: false
background: false
outer_padding: false
cards:
- type: custom:stack-in-card
mode: vertical
keep:
box_shadow: false
margin: false
border_radius: false
background: false
outer_padding: false
cards:
- type: custom:mushroom-template-card
primary: 'Casa: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: green
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: 5px;
margin-bottom: 2px;
width: 180px;
margin-left: 10px;
}
- type: custom:apexcharts-card
chart_type: donut
header:
show: false
show_states: false
colorize_states: false
series:
- entity: sensor.resto_c
show:
legend_value: false
datalabels: false
- entity: sensor.shelly_ion
show:
legend_value: false
datalabels: false
- entity: sensor.rpabellon
show:
legend_value: false
datalabels: false
- entity: sensor.shelly_
show:
legend_value: false
datalabels: false
- entity: sensor.depuradora
show:
legend_value: false
datalabels: false
- entity: sensor.lights_po
show:
legend_value: false
datalabels: false
update_interval: 120s
apex_config:
legend:
show: false
chart:
height: 180px
card_mod:
style: |
ha-card {
margin-left: +10px;
width: 180px;
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: 'Otros: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: yellow
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: 5px;
margin-bottom: 0px;
width: 180px;
margin-left: 0px;
}
- type: custom:mushroom-template-card
primary: 'Cocina: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: green
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: 0px;
width: 180px;
margin-left: 0px;
}
- type: custom:mushroom-template-card
primary: 'Pabellón: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: red
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: 0px;
width: 180px;
margin-left: 0px;
}
- type: custom:mushroom-template-card
primary: 'Pérgola: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: deep-purple
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: 0px;
width: 180px;
margin-left: 0px;
}
- type: custom:mushroom-template-card
primary: 'Depuradora: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: green
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: 0px;
width: 180px;
margin-left: 0px;
}
- type: custom:mushroom-template-card
primary: 'Luces piscina: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: green
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: 0px;
width: 180px;
margin-left: 0px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.energy
color: rgba(245,6,54,0.5)
hours_to_show: 24
points_per_hour: 4
line_width: 1
font_size: 70
animate: true
height: 100
show:
name: false
icon: false
state: false
extrema: false
average: false
legend: false
card_mod:
style: |
ha-card {
margin-top: -50px;
}
view_layout:
position: sidebar
fake values for now
1 Like
Think you need to add the following to each of the ha-card style elements:
border-width: 0;
Like this?
card_mod:
style: |
ha-card {
margin-top: 5px;
margin-bottom: 2px;
width: 180px;
margin-left: 10px;
border-width: 0;
}
I would like to make all my icon with circle background like in mushroom card, but in all other card. I know there is theme customization possiblities for that, but no clue how it is possible to do that)
Anyone can help me ?
Someone who can guide me?
type: custom:mushroom-template-card
primary: Dag
secondary: ''
icon: mdi:history
icon_color: red
card_mod:
style: |
mushroom-shape-icon:
$: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--icon-size: 164px;
}
I tried you code, but it didnt change the icon size and also animation is not working:
card_mod:
style: |
mushroom-shape-icon:
$: |
ha-icon {
{% set ventil = states('sensor.obyvacka.ventil') | int %}
{% if ventil > 0.00 %}
--icon-animation: pulse 2s ease-in-out infinite;
ha-card {
--icon-size: 164px;
}
border 0 o 0px?
I dont think its the border, might be the drop shadow, how do you style that one?
Done with:
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
Thanks!
1 Like
this just for resizing
card_mod:
style: |
ha-card {
--icon-size: 139px;
}
Here is your answer:
type: custom:mushroom-template-card
primary: Dag
secondary: ''
icon: mdi:history
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {--icon-animation: rotating 4.0s linear infinite;}
@keyframes rotating {
0% {transform: rotate(0degree);}
100% {transform: rotate(360deg);}
}
.: |
ha-card {
--icon-size: 164px;
}
Hello, good afternoon,
First thank you for your great work.
Second, ask you how I can make the images of the people have a larger size and the color circle remains thin.
I have tried the following way, the image grows, but the color margin grows gradually and it is not pretty, I would like it to be like an alo, something fine.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: alarm-control-panel
entity: alarm_control_panel.casa
content_info: none
name: Alarma
- type: template
entity: lock.front_door
icon: >-
{{ 'mdi:lock' if is_state('lock.front_door', 'locked') else
'mdi:lock-open' }}
icon_color: '{{ ''green'' if is_state(''lock.front_door'', ''locked'') else ''red'' }}'
content: null
tap_action:
action: more-info
- type: conditional
conditions:
- entity: light.grup_llums_casa
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.light.grup_llums_casa) | selectattr( 'state',
'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: light.grup_llums_casa
icon_color: grey
- type: conditional
conditions:
- entity: binary_sensor.grup_finestres
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:window-open
content: >-
{{ expand(states.binary_sensor.grup_finestres) | selectattr(
'state', 'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: binary_sensor.grup_finestres
- type: conditional
conditions:
- entity: binary_sensor.grup_portes_casa
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:door-open
content: >-
{{ expand(states.binary_sensor.grup_portes_casa) | selectattr(
'state', 'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: binary_sensor.grup_portes_casa
- type: conditional
conditions:
- entity: binary_sensor.grup_sensors_inundacio
state: 'on'
chip:
type: template
icon_color: light-blue
icon: mdi:water-alert
tap_action:
action: more-info
entity: binary_sensor.grup_sensors_inundacio
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: group.smoke_alarm
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fire-alert
tap_action:
action: more-info
entity: group.smoke_alarm
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
card_mod:
style: |
:host {
--ha-card-background: var(--card-background-color);
}
- square: false
columns: 2
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.vero
state: home
chip:
type: entity
entity: person.vero
content_info: none
use_entity_picture: true
mush-chip-height: 60px
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
--chip-height: 68px;
}
- type: conditional
conditions:
- entity: person.jordi
state: home
chip:
type: entity
entity: person.jordi
content_info: none
use_entity_picture: true
mush-chip-height: 60px
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.9);
margin-top: 5px;
margin-bottom: 10px;
--chip-height: 68px;
}
- type: conditional
conditions:
- entity: person.jan
state: home
chip:
type: entity
entity: person.jan
content_info: none
use_entity_picture: true
mush-chip-height: 60px
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
--chip-height: 68px;
}
- type: conditional
conditions:
- entity: person.marti
state: home
chip:
type: entity
entity: person.marti
content_info: none
use_entity_picture: true
mush-chip-height: 60px
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
--chip-height: 68px;
}
alignment: start
card_mod:
style: |
ha-card {
margin-left: 8px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.vero
state_not: home
chip:
type: entity
entity: person.vero
content_info: none
use_entity_picture: true
mush-chip-height: 60px
card_mod:
style: |
ha-card {
{% if is_state('person.vero', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.vero', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
--chip-height: 68px;
}
- type: conditional
conditions:
- entity: person.jordi
state_not: home
chip:
type: entity
entity: person.jordi
content_info: none
use_entity_picture: true
mush-chip-height: 60px
card_mod:
style: |
ha-card {
{% if is_state('person.jordi', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.jordi', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
--chip-height: 68px;
}
- type: conditional
conditions:
- entity: person.jan
state_not: home
chip:
type: entity
entity: person.jan
content_info: none
use_entity_picture: true
mush-chip-height: 60px
card_mod:
style: |
ha-card {
{% if is_state('person.jan', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.jan', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
--chip-height: 68px;
}
- type: conditional
conditions:
- entity: person.marti
state_not: home
chip:
type: entity
entity: person.marti
content_info: none
use_entity_picture: true
mush-chip-height: 60px
card_mod:
style: |
ha-card {
{% if is_state('person.marti', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.marti', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
--chip-height: 68px;
}
alignment: end
card_mod:
style: |
ha-card {
margin-right: 8px;
}
- type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% if (time >= 20) %}
Bona nit, {{user}}!
{% elif (time >= 14) %}
Bona tarda, {{user}}!
{% elif (time >= 5) %}
Bon dia, {{user}}!
{% else %}
Hola, {{user}}
{% endif %}
subtitle: ''
- type: custom:simple-weather-card
entity: weather.aemet_daily
name: a El Prat de Llobregat
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Prat
icon: mdi:warehouse
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Llums
icon: mdi:lightbulb
icon_color: amber
layout: vertical
tap_action:
action: navigate
navigation_path: Llums
card_mod: null
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Seguretat
icon: mdi:shield
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: seguretat
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Media
icon: mdi:speaker
layout: vertical
icon_color: red
tap_action:
action: navigate
navigation_path: media
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Energia
icon: mdi:solar-power
layout: vertical
icon_color: cyan
tap_action:
action: navigate
navigation_path: energia
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.01);
}
2 Likes
Great, it works now. Only thing I want to put in the code is, that the animation will be only if sensor value is bigger as 0
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
columns: 2
layout: {}
cards:
- type: custom:mushroom-template-card
entity: climate.spalna_teplota
primary: Spálňa
secondary: >-
{{ states('sensor.58_2d_34_3a_1f_f3_temperature') }} °C | Ventil
otvorený na {{ states('sensor.spalna_ventil') }} %
icon: mdi:bed
icon_color: |
{% if is_state('sensor.spalna_ventil', '0.00') %}
grey
{% elif is_state('sensor.spalna_ventil', 'unknown') %}
grey
{% else %}
red
{% endif %}
layout: vertical
fill_container: true
multiline_secondary: true
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {--icon-animation: pulse 2s ease-in-out infinite;}
@keyframes rotating {
0% {transform: rotate(0degree);}
100% {transform: rotate(360deg);}
}
.: |
ha-card {
--icon-size: 70px;
}
- type: custom:mushroom-climate-card
entity: climate.spalna_teplota
icon_type: none
primary_info: none
secondary_info: none
show_temperature_control: true
collapsible_controls: true
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
background: none;
padding: 0px;
}
#container .button {
height: 100%;
width: 30%;
}
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.7);
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.7);
}
card_mod:
style: |
:host {
background: rgba(var(--rgb-primary-text-color), 0.01);
--ha-card-background: transparent;;
}
I have there tis condition:
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% set ventil = states('sensor.spalna.ventil') | int %}
{% if ventil > 0 %}
--icon-animation: pulse 2s ease-in-out infinite;
}
The cause could not be determined.
I fixed it temporarily with code
style: |
ha-card {
border-style: none;
}
Hi.
Tried looking through all the posts.
Is it possible to show number of lights on in a badge icon ?
I have a sensor with the number and just want to see the number rather than text in primary and secondary template.
Thanks in advance
Martyn
Hi! Is this what you mean?
type: conditional
conditions:
- entity: light.all_lamps_living_room
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.light.all_lamps_living_room) | selectattr( 'state', 'eq',
'on') | list | count }}
entity: light.all_lamps_living_room
icon_color: amber
tap_action:
action: none
2 Likes
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: PERSIANA
secondary: '{{ current_position(''cover.persiana_comedor'') | round(0) }} %'
icon: |-
{% if is_current_position(current_position, '0') %}
phu:shutter-0
{% elif is_current_position(current_position, '10') %}
phu:shutter-10
{% elif is_current_position(current_position, '20') %}
phu:shutter-20
{% elif is_current_position(current_position, '30') %}
phu:shutter-30
{% elif is_current_position(current_position, '40') %}
phu:shutter-40
{% elif is_current_position(current_position, '50') %}
phu:shutter-50
{% elif is_current_position(current_position, '60') %}
phu:shutter-60
{% elif is_current_position(current_position, '70') %}
phu:shutter-70
{% elif is_current_position(current_position, '80') %}
phu:shutter-80
{% elif is_current_position(current_position, '90') %}
phu:shutter-90
{% elif is_current_position(current_position, '100') %}
phu:shutter-100
{% else %}
phu:shutter
{% endif %}
entity: cover.persiana_comedor
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: planta1
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: vertical
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);
}
alignment: end }
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.interruptor_llum_golfes', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
:host {
background: var(--card-background-color);
border-radius: var(--ha-card-border-radius);
}
Hello good evening.
I am very lost. I try to create a cover card mushroom so that the icon changes at each percentage of the blind state, but I can’t get it to come out, the code is wrong
If you want to have a number in the Badge you can do it like this.
Mushroom Badge Number:
type: custom:mushroom-template-card
primary: All Lights
icon: mdi:lightbulb
icon_color: amber
entity: group.all_lights
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
26 Likes
This is what I was after.
Thank you very much. Loving all the work your putting into this, just changed some icons today to moving icons 
1 Like