if I am understanding you correctly. you can just add padding to the template card.
type: custom:mushroom-entity-card
entity: sun.sun
card_mod:
style: |
ha-card {
padding-bottom: 50px !important ;
}
It was not what I wanted (because the chips card gives me a little difference in color by a card mod style). But what you gave me is better 
thanks
the only problem I’ve got now, is that the padding bottom is not clickabele. The tap action on the custom:mushroom-template-card stops at the padding bottom…
if you want the whole card clickable you could do this with custom layout card
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:stack-in-card
view_layout:
grid-column-start: 1
grid-row-start: 1
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
padding-bottom: 50px !important ;
primary: home
icon: mdi:home
- type: custom:layout-card
layout_type: custom:grid-layout
- type: button
view_layout:
grid-column-start: 1
grid-row-start: 1
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: none ;
border-style: none;
}
1 Like
- type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:stack-in-card
view_layout:
grid-column-start: 1
grid-row-start: 1
cards:
- type: custom:mushroom-template-card
primary: '{{ states(''input_text.ruimte_1'')}}'
icon: mdi:lightbulb
entity: switch_keuken_verlichting #switch_ruimte1_verlichting
tap_action:
action: toggle
icon_color: >
{% if is_state("switch_ruimte1_verlichting", 'on') %}
orange
{% else %}
138,153,119
{% endif %}
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);
}
ha-card {
padding-bottom: 55px !important ;
}
- type: button
entity: switch_keuken_verlichting #switch_ruimte1_verlichting
view_layout:
grid-column-start: 1
grid-row-start: 1
tap_action:
action: toggle
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);
}
ha-card {
padding-bottom: 55px !important ;
}
like this ?
your missing
- type: custom:layout-card
layout_type: custom:grid-layout
under
- type: custom:mushroom-template-card
plus ha-card needs background none
ha-card {
padding-bottom: 55px !important ;
background: none;
}
one more thing I noticed which I didn’t include is add this to the button so it hides icon and name
show_name: false
show_icon: false
Is there anyway to rotate the mdi:icon 90 degrees in general and then still make the animation work? Basically I’m trying to rotate the sprinkler animation in order for it to point the sprayer up at all times and then when I turn the entity on it’s associated with for the animation to work. I’m trying to use it for a sundeck bubbler in my pool and this was the closest looking icon I could find that would look good if it was pointing the sprayer up instead of to the right.
Thanks
This will rotate the icon.
type: custom:mushroom-template-card
icon: mdi:sprinkler
icon_color: cyan
primary: Sprinkler
card_mod:
style: |
ha-state-icon {
rotate: -90deg;
margin: 10px 0px 22px 22px;
animation: sprinkle 2s linear infinite;
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
2 Likes
Awesome! thank you!!
Looking for some assistance if possible, i would like to remove the white background when the card is un-collapsed
type: custom:collapsable-cards
title: Group control
cards:
- type: custom:auto-entities
filter:
include:
- domain: automation
area: beau_s_room
options:
type: tile
icon_tap_action:
action: toggle
tap_action:
action: more-info
color: primary
- domain: script
area: beau_s_room
options:
type: tile
icon_tap_action:
action: toggle
tap_action:
action: more-info
color: primary
show_empty: false
card_param: cards
card:
square: false
type: grid
columns: 2
sort:
method: state
reverse: false
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
}
Your post is not Mushroom related. I would suggest posting in the appropriate thread.
I don’t get it right 
##########
# Ruimte 1#
##########
- type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:stack-in-card
view_layout:
grid-column-start: 1
grid-row-start: 1
cards:
- type: custom:mushroom-template-card
primary: '{{ states(''input_text.ruimte_1'')}}'
icon: mdi:lightbulb
entity: switch_keuken_verlichting #switch_ruimte1_verlichting
tap_action:
action: toggle
icon_color: >
{% if is_state("switch_ruimte2_verlichting", 'on') %}
orange
{% else %}
138,153,119
{% endif %}
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);
}
ha-card {
padding-bottom: 55px !important ;
}
- type: button
view_layout:
grid-column-start: 1
grid-row-start: 1
tap_action:
action: toggle
show_name: false
show_icon: false
card_mod:
style: |
ha-card {
background: none ;
border-style: none;
padding-bottom: 55px !important ;
}
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
}
######
# Ruimte2
#######
- type: "custom:stack-in-card"
cards:
- type: custom:mushroom-template-card
primary: '{{ states(''input_text.ruimte_2'')}}'
icon: mdi:lightbulb
entity: switch_keuken_verlichting #switch_ruimte2_verlichting
tap_action:
action: toggle
icon_color: >
{% if is_state("switch_ruimte2_verlichting", 'on') %}
orange
{% else %}
138,153,119
{% endif %}
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);
}
ha-card {
padding-bottom: 55px !important ;
}
it is smaller, and looks like a square
Can I ask where did you get this code? There is a lot here that is either unnecessary or not even working.
For example:
entity: switch_keuken_verlichting
{% else %}
138,153,119
- type: "custom:stack-in-card"
You can extend the clickable area multiple ways. Here is an alternative…
- type: custom:mushroom-template-card
primary: test
icon: mdi:lightbulb
entity: switch.kitchen_lights
tap_action:
action: toggle
icon_color: |
{% if is_state('switch.kitchen_lights', 'on') %}
orange
{% else %}
red
{% endif %}
fill_container: true
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 40px;
}
Used my entities to test so you’ll need to adjust
I just copied everything from my other HA config. Starting new for a new home. I know a lot is not working and is not ok.
In my other config my lights don’t work, so the code for it is not used…
Ok just making sure you knew…
1 Like
this is working here
you are correct!
I don’t want to be bossy, I am just a noob. But tested it and was thinking "hey, that is working " 
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: switch_ruimte1_verlichting
primary: '{{ states(''input_text.ruimte_1'')}}'
icon: mdi:lightbulb
icon_color: >
{% if is_state("switch_ruimte1_verlichting", 'on') %}
138,153,119
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
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);
}
ha-card {
padding-bottom: 55px !important ;
}
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 55px;
}
like this ?
Do you need
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
padding-bottom: 55px !important ;
}
Try…
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: switch_ruimte1_verlichting
primary: '{{ states(''input_text.ruimte_1'')}}'
icon: mdi:lightbulb
icon_color: >
{% if is_state('switch_ruimte1_verlichting', 'on') %}
138,153,119
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 55px;
}