Happy to assist! Mushroom uses height:auto but we tucked cards inside another main card, thus the need to increase the height. Happy coding!!
1 Like
I have another and hopefully last dumb question. -.-
- type: custom:mushroom-template-card
icon: mdi:door
entity: switch.steckdose_wanddisplay_switch_0
icon_color: |-
{% if is_state(config.entity,'on') %}
green
{% else %}
red
{% endif %}
primary: ''
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
ha-state-icon {
animation: {{ 'open 8s ease-in-out infinite;' if is_state(config.entity, 'on') else 'none' }}
transform-origin: 30%;
font-size: 100px;
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
.shape {
perspective: 45px;
background: transparent !important;
}
Whats wrong here? If i use “mushroom-shape-icon” the animation works, but when I add the “$” the shape-background is transparent, but no animation and the small icon. Syntax or is it the “.: |” ?
This should work…
card_mod:
style:
mushroom-shape-icon$: |
.shape {
perspective: 45px;
background: transparent !important;
}
.: |
ha-state-icon {
animation: {{ 'open 8s ease-in-out infinite;' if is_state(config.entity, 'on') else 'none' }}
transform-origin: 30%;
font-size: 100px;
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
1 Like
I just noticed that card_mod code was off here
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 0.2fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
color_type: icon
color: var(--button-card-light-color)
entity: light.kueche_lightstripe
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(config.entity,'on') %}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
ha-card {
border: none;
background: transparent !important;
}
- type: custom:mushroom-template-card
primary: LED-Stripe
tap_action:
action: more-info
entity: light.kueche_lightstripe
card_mod:
style: |
ha-card {
border: none;
left: 0px;
top: 10px;
background: transparent !important;
}
card_mod:
style: |
ha-card {
height: 80px;
}
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 0.2fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
color_type: icon
color: var(--button-card-light-color)
entity: light.pc_lights
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(config.entity,'on') %}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
ha-card {
border: none;
background: transparent !important;
}
- type: custom:mushroom-template-card
primary: LED-Stripe
tap_action:
action: more-info
entity: light.kueche_lightstripe
card_mod:
style: |
ha-card {
border: none;
left: 0px;
top: 10px;
background: transparent !important;
}
card_mod:
style: |
ha-card {
height: 80px;
}
I am very new to all this aswell. helping someone else is a good way for me to learn aswell. there’s been
alot of changes and I should have explained why the code I posted worked over the older code.
1 Like
can you please share your code?! love the card.
card_mod:
ha-card {
{% if is_state(config.entity, 'on') %}
box-shadow: 0px 0px 10px green;
{% else %}
box-shadow: 0px 0px 10px red;
{% endif %}
--card-primary-font-size: 16px;
--card-primary-font-weight: bold;
--card-primary-margin-bottom: 50px;
Could anyone explain, why the font size&weight is working and the position doesn’t move?
Just use margin-bottom: not
card-primary-margin-bottom:
thanks again, but with margin-bottom: the complete card moves. I only want to move the position of primary information
type: custom:mushroom-template-card
primary: Test
secondary: How are you?
icon: mdi:home
card_mod:
style:
mushroom-state-info$: |
.primary {
margin-bottom: 10px;
font-size:16px !important;
font-weight: bold;
}
.: |
ha-card {
{% if is_state(config.entity, 'on') %}
box-shadow: 0px 0px 10px green;
{% else %}
box-shadow: 0px 0px 10px red;
{% endif %}
}
Like this…
1 Like
Damn, you you are a f***ing god.
Thanks a lot. 
I add padding: 0px 0px 2px 0px !important; in ha-card section and play a little with this and the margin to adjust everything to its final position.
Here you!, I have shared my code and setup instruction in this post
can I get some help/point in the right direction regarding a card I have.
the problem I have is I have alot of information I am trying to squeeze in and without just adding more entity’s which just over complicates it all.
I’ve tried changing margins and padding but never looked right.
maybe time to look into button-card.
this is what I have so far
type: custom:stack-in-card
title: Kettle
keep:
background: true
box_shadow: true
mode: horizontal
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -30px;
width: 200px;
}
primary: Cost / W
secondary: >-
£{{ '%.2f' | format(states('sensor.kettle_daily_energy_cost')| float) }} /
{{ '%.2f' | format((states('sensor.kettle_power')|float / 0.05) | round()
* 0.05) }}W
icon: mdi:kettle
multiline_secondary: true
icon_color: |-
{% set state = states('sensor.kettle_power')|float(-1) %}
{% if state >= 50 %} green
{% else %} grey
{% endif %}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -30px;
margin-left: 10px;
}
secondary: >-
{{ states('sensor.kettle_count_day') }}/{{
state_attr('sensor.kettle_count_day', 'prev_period')}}
primary: Count/yesterday
icon: mdi:counter
icon_color: blue
entity: sensor.kettle_count_day
tap_action:
action: more-info
- type: custom:mushroom-entity-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -30px;
}
layout: horizontal
secondary_info: state
tap_action:
action: toggle
entity: switch.localbytes_plug_pm_8c9d3a_kettle
name: Plug
icon: mdi:power-socket-uk
icon_color: green
card_mod:
style:
$: |
h1.card-header {
font-size: 16px;
padding-top: 1px;
padding-bottom: 18px;
color:var(--secondary-text-color);
}
step 1. identify what info is actually important to display.
Do you need to display that the plug is on with words? is the color not sufficient?
Do you need labels to tell you what each number is?
Something like this might work for you.
Code
type: custom:mushroom-chips-card
chips:
- type: template
content: £0.12
icon: mdi:kettle
icon_color: |-
{% set state = states('sensor.kettle_power')|float(-1) %}
{% if state >= 50 %}
green
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
- type: template
primary: Count/yesterday
icon: mdi:counter
icon_color: blue
entity: counter.washing_machine_state_count
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
ha-card:after {
content: "3";
position: absolute;
top: -10%;
right: -10%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height: 14px;
font-size: 9px;
font-weight: 700;
border-radius: 50%;
{% if states(config.entity) | int == 1 %}
background: rgba(var(--rgb-green), 0.2) !important;
{% elif states(config.entity) | int == 2 %}
background: rgba(var(--rgb-amber), 0.2) !important;
{% elif states(config.entity) | int > 3 %}
background: rgba(var(--rgb-red), 0.2) !important;
{% else %}
background: rgba(var(--rgb-deep-purple), 0.2) !important;
{% endif %}
}
- type: template
tap_action:
action: toggle
entity: switch.localbytes_plug_pm_8c9d3a_kettle
icon_color: |-
{% set state = states(entity) %}
{% if state == 'on' %}
green
{% else %}
red
{% endif %}
name: Plug
icon: mdi:power-socket-uk
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
ha-card:after {
content: "";
position: absolute;
top: -10%;
right: -10%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height: 14px;
font-size: 9px;
font-weight: 700;
border-radius: 50%;
{% if states(config.entity) == 'on' %}
background: rgba(var(--rgb-green), 0.2) !important;
{% else %}
background: rgba(var(--rgb-red), 0.2) !important;
{% endif %}
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
span:after {
content: "0.00W";
display: flex;
padding-top: 0.3em;
color:var(--secondary-text-color);
}
Of course you will need to add things back, like your templates to get the actual states.
Thankyou Dimitri! that’s brilliant. you make some very valid points I do have a habit of over complicating things.
definitely gonna have a play with the code you provided.
welcome back BTW.
OK so I’ve played around abit with your code and mine and combined the two with some tweaks.
to end up with this
just need to change the watts usage for the badge because I don’t think it’s going to work. definitely happier with the outcome.
Thanks again.
“I’ve finally completed my last page. I designed the TV and Shield control page , complete with a live view for Shield. Designing for tablets has been quite challenging, as it’s quite different from designing mobile pages. However, I have very little time left to finish, and I hope to release all the codes I’ve written as soon as this project is complete. 
”
5 Likes
How can I get the input_number section to be under the sprinkler card, so I can access the sprinkler switch and the running time from the same card?
1 Like
this should work for you.
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-entity-card
card_mod:
style: |
ha-card {
border: 0px;
box-shadow: none;
}
entity: light.diner
name: Sprinkler
icon: mdi:sprinkler
- type: custom:mushroom-number-card
card_mod:
style: |
ha-card {
border: 0px;
box-shadow: none;
}
entity: input_number.daily_energy_cost
display_mode: buttons
primary_info: none
secondary_info: none
icon_type: none
2 Likes
How do I go abouts removing the icon background for all mushroom cards (system-wide)? Thanks
