Thank you! I’m actually trying to have the fan-slider color adapt, but the @media tag is helpful.
With mushroom-fan-card, the slider changes to darker colors when it switches to dark mode, but I can’t figure out how to also have my custom slider color adapt.
card_mod:
style:
mushroom-fan-percentage-control$: |
mushroom-slider {
--main-color: #7fdee9 !important;
--bg-color: #ccf2f6 !important;
}
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
}
ViktuK359
November 28, 2023, 10:41am
8945
Hello, you can share code?
just try and use layout: vertical
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
layout: vertical
card_mod:
style:
mushroom-fan-percentage-control$: |
@media (prefers-color-scheme: light) {
mushroom-slider {
--main-color: #7fdee9 !important;
--bg-color: #ccf2f6 !important;
}
}
@media (prefers-color-scheme: dark) {
mushroom-slider {
--main-color: #2e5054 !important;
--bg-color: #40494a !important;
}
}
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
}
1 Like
You can easily add a secondary text without any error - you just need to make sure you add it to the first template card in the stack.
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.smart_switch_2101058756376290838848e1e94400bc_outlet
icon: mdi:pine-tree
icon_color: green
primary: Luci Albero di Natale
secondary: TEST
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 20px;
top: 16px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
ha-state-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
card_mod:
style: |
ha-card {
height: 66px;
}
and you then want a second christmas tree but within the same space in the card? like this?
Code
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.smart_switch_2101058756376290838848e1e94400bc_outlet
icon: mdi:pine-tree
icon_color: green
primary: Luci Albero di Natale
secondary: TEST
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 20px;
top: 16px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
ha-state-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
card_mod:
style: |
ha-card {
height: 66px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.smart_switch_2101058756376290838848e1e94400bc_outlet
icon: mdi:pine-tree
icon_color: green
primary: Luci Albero di Natale
secondary: TEST
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 20px;
top: 16px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
ha-state-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
card_mod:
style: |
ha-card {
height: 66px;
}
1 Like
FedeL16
November 28, 2023, 1:52pm
8949
Great, now I can write secondary, but if I want understand if my lights are on (for example I’m not home) I cannot understand, because if I write ‘secondary: secondary: XXX’, my card disappear.
It would be Wonderfull if can change the icon for second xmass tree. Have you an idea?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.smart_switch_2101058756376290838848e1e94400bc_outlet
icon: mdi:pine-tree
icon_color: green
primary: Luci Albero di Natale
secondary: {{ states.xxx }}
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 20px;
top: 16px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
ha-state-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
card_mod:
style: |
ha-card {
height: 66px;
}
try and do it like this:
secondary: |-
{{ states.xxx }}
or this:
secondary: '{{ states.xxx }}'
FedeL16
November 28, 2023, 2:14pm
8951
fantastic.
Anyway, If I would vertical layout? I add layout: vertical but doesn’t work.
this card for my others lights:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.koogeek_o1eu_b56a4b_outlet3
icon: mdi:pine-tree
icon_color: green
primary: Addobbo Portale
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -198px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
its not good and in your updated post there’s not a solution. can you give me the right way?
please do ask for everything that you want to do and then what you have tried in the first post. i love helping people, but it isnt particularly fun to work on the same card multiple times.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.smart_switch_2101058756376290838848e1e94400bc_outlet
icon: mdi:pine-tree
icon_color: green
primary: Luci Albero di Natale
secondary: |-
{{states('light.office_main_light') | capitalize}}
layout: vertical
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
top: -118px;
background: none !important;
}
ha-state-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 20px;
top: 16px;
left: 18px;
}
.: |
ha-card {
top: -183px;
right: 10px;
background: none !important;
}
ha-state-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
card_mod:
style: |
ha-card {
height: 116px;
}
FedeL16
November 28, 2023, 3:28pm
8953
thanks… I thought to layout after your last post. Sorry!
never any need to apologise. just want to keep it in mind.
Tarcisio
November 28, 2023, 4:51pm
8955
I’d like to keep the layout the way it is. Just wanted to move it to the top of the card to align with the one on its side and keep them the same look.
Oh, i see. If you provide the full grid of cards i can probably help with that with some card mod.
Tarcisio
November 28, 2023, 7:08pm
8957
it’s just a regular mushroom-template-card but I also need for the light and entity cards.
type: custom:mushroom-template-card
primary: '{{entity}}'
secondary: How are you?
icon: mdi:thermometer-lines
icon_color: blue
entity: sensor.clock_sensor_temperature
fill_container: true
view_layout:
grid-area: m6
Could make it with card mod. Here’s the code:
type: custom:mushroom-template-card
primary: '{{entity}}'
secondary: How are you?
icon: mdi:thermometer-lines
icon_color: blue
entity: sensor.clock_sensor_temperature
fill_container: true
view_layout:
grid-area: m6
card_mod:
style:
.: |
ha-card {
justify-content: start !important;
}
I’m having this issue too — does anyone have a fix?
FedeL16
November 29, 2023, 6:16am
8959
This time I have only one idea…
I need to change icon color in these chips, if doors/windows are open (green) or closed (red)
this is my created code:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.portiere_t_crock
icon: mdi:car-door
icon_color: |-
{% if is_state('binary_sensor.portiere_t_crock', 'on') %}
green
{% else %}
red
{% endif %}
tap_action:
action: toggle
card_mod:
style: >
ha-card {
--chip-background: rgba(var(--rgb-card-background-color),
0.);background: rgba(var(--rgb-card-background-color), 0.);
- type: entity
entity: binary_sensor.t_crock_windows_closed
icon_color: |-
{% if is_state('binary_sensor.t_crock_windows_closed', 'on') %}
green
{% else %}
red
{% endif %}
card_mod:
style: >
ha-card {
--chip-background: rgba(var(--rgb-card-background-color),
0.);background: rgba(var(--rgb-card-background-color), 0.);
alignment: end
anyway my icons remain white or grey… could you help me please?
Use a template chip. You cant use templates outside of template chips/cards unless you use card mod.
NovaG
November 29, 2023, 9:07am
8961
Thanks to everyone’s inspiration and support I’ve made my new dashboard and I’m really liking how it looks.
8 Likes
FedeL16
November 29, 2023, 9:08am
8962
im tryng this:
type: mushroom-template-card
card:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.portiere_t_crock
icon: mdi:car-door
icon_color: |-
{% if is_state('binary_sensor.portiere_t_crock', 'on') %}
green
{% else %}
red
{% endif %}
tap_action:
action: toggle
card_mod:
style: >
ha-card {
--chip-background: rgba(var(--rgb-card-background-color),
0.);background: rgba(var(--rgb-card-background-color), 0.);
- type: template
entity: binary_sensor.t_crock_windows_closed
icon_color: |-
{% if is_state('binary_sensor.t_crock_windows_closed', 'on') %}
green
{% else %}
red
{% endif %}
card_mod:
style: >
ha-card {
--chip-background: rgba(var(--rgb-card-background-color),
0.);background: rgba(var(--rgb-card-background-color), 0.);
alignment: end
But doesnt work… where can I modify?
You dont have an icon defined you need to choose an icon when using the template chip. Almost all you are doing here could he done via the UI which would probably make it easier for you.
