Hi!
I just want to share with you my last Room Card template. To create the card, you need to install Mushroom Cards, Card-mod, Stack in card, and ApexCharts Card through HACS.
You can get full code and guide in my blog. Since is one of the ‘most like’ among my crads, i wrote the guide both in english and spanish.
Hope you like it!
Hello @TiToTB, all,
This is really beautifull card. I tried to use it but I am expiriencing problems with alignement.
Displaying in computer browser looks like that:
after F5 it look like this:
On my Samsung phone it is much better but still not as good as You have it.
Is it possible to fix this behaviour?
Yan
Hi!
As far as i know, if you have many cards in the same panel, it will load slower and It may cause this issues. Also if you have Home Assistant in less powerful hardware like a RPi 3 or so.
If It sounds familiar, try to move some of your cards to other panels.
Regarding alignment, you can fix It using ‘margin left’, but i guess you already know this.
I hope It helps
I’ve found adjusting the browser zoom will cause the temp dial to offset. Maybe try adjusting browser zoom to see if that works for you.
Wow! This cards are absolutely beautiful! Thank you so much for sharing!
Is there a way to make the text in the header bigger? I tried almost everything with card-mod without success… 
and could you tell me, how you make the washing machine shake, I really love that! 
One thing I want to mention for others who want to use your cards: after the last update of mushroom cards, one should use
custom:mushroom-legacy-template-card
instead of
custom:mushroom-template-card
in order to get the old functionality we are used to and your instructions expect.
Thanks!
I haven’t played yet with the new version of mushoroom template and card mod.
Have you tried this?
–card-primary-font-size: 20px;
I use the mushroom-legacy-template-card.
–card-primary-font-size did not work
But I found a solution meanwhile:
card_mod:
style:
mushroom-state-info$: |
.container .primary {
font-size: 20px !important;
font-weight: 600 !important;
font-variant: small-caps;
}
.container .secondary {
font-size: 16px !important;
}
Hi first of all beautiful cards. I’m trying to use your cards with the following code:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/local/habitaciones/dormitorio.jpg');
background-position: center;
background-size: cover;
--primary-text-color: #ffffff;
min-height: 133px;
}
cards:
- type: custom:mushroom-legacy-template-card
primary: Living Room
icon: mdi:sofa
card_mod:
style: |
ha-card {
border: 0px;
}
tap_action:
action: none
- type: custom:mushroom-legacy-template-card
layout: horizontal
primary: ""
secondary: ""
icon: mdi:bed
icon_color: teal
tap_action:
action: none
card_mod:
style: |
ha-card {
border: 0px;
--icon-size: 100px;
margin-left: -25px;
margin-bottom: -55px;
margin-top: -32px;
}
mushroom-badge-icon {
margin-right: 10px;
margin-top: 10px;
--badge-icon-size: 10px;
--badge-size: 20px;
}
badge_icon: >
{% if (states('sensor.sensor_temperatura_dormitorio_humidity') | int) >=
60 %} mdi:water {% elif
(states('sensor.sensor_temperatura_dormitorio_temperature') | int) >= 26
%} mdi:fire {% elif
(states('sensor.sensor_temperatura_dormitorio_temperature') | int) <= 18
%} mdi:snowflake {% endif %}
badge_color: >
{% if (states('sensor.sensor_temperatura_dormitorio_humidity') | int) >=
60 %} blue
{% elif (states('sensor.sensor_temperatura_dormitorio_temperature') | int)
>= 26 %} red
{% elif (states('sensor.sensor_temperatura_dormitorio_temperature') | int)
<= 18 %} blue
{% endif %}
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: transparent!important;
margin-top: -110px;
margin-left: auto;
margin-right: 5px;
width: 44%;
border: 0px;
}
cards:
- type: grid
square: false
columns: 1
cards:
- type: custom:mushroom-legacy-template-card
primary: ""
secondary: ""
layout: vertical
icon: mdi:ceiling-light
entity: switch.living_room_li
icon_color: >
{% if (states('light.bombilla_dormitorio')) == 'on' %} teal {%
endif %}
card_mod:
style: |
ha-card {
border: 0px;
--icon-size: 35px;
margin: -10px!important;
}
- type: custom:mushroom-legacy-template-card
primary: ""
secondary: ""
layout: vertical
icon: mdi:lightbulb-variant-outline
entity: light.bombilla_dormitorio_filamento
icon_color: >
{% if (states('light.bombilla_dormitorio_filamento')) == 'on' %}
teal {% endif %}
card_mod:
style: |
ha-card {
border: 0px;
--icon-size: 35px;
margin: -10px!important;
}
- type: custom:mushroom-legacy-template-card
primary: ""
secondary: ""
layout: vertical
icon: mdi:television
entity: media_player.box
tap_action:
action: more-info
icon_color: >
{% if (states('media_player.tv_dormitorio')) == 'off' %} {% else
%} teal {% endif %}
card_mod:
style: |
ha-card {
border: 0px;
--icon-size: 35px;
margin: -10px!important;
}
However I’m getting an unformmatted card like this:
Any idea of what am I missing?
Thanks!
Have you install all required cards?
