Thanks for listing all that you want in 1 question - could you however try and give a bit more detail on what you want? Perhaps some screenshots of what you saw and want to mimic or draw some explanation of what you want where?
2 Likes
Im sorry for not beeing clear…did try tho…heh
This is what im trying to adcieve…
Took it from this thread >person card show off
Thank You Dimitri!!!
1 Like
Something like this?
I dont use a picture so just swap mushroom-shape-icon$: | for mushroom-shape-avatar$: |, .shape { for .picture { and --shape-animation: for animation:
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.dimitri_landerloos
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
display: flex;
border-radius: 50%;
--icon-symbol-size: 58px;
--icon-size: 80px;
{% if states(config.entity) == 'home' %}
--shape-animation: pinggreen 6s infinite;
{% else %}
--shape-animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 5px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 5px transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 20px;
--card-secondary-font-size: 20px;
}
.: |
ha-card {
background: none !important;
font-variant: small-caps;
height: 116px !important;
}
mushroom-badge-icon {
--badge-size: 24px;
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:map-marker-distance
content: 4 km
- type: template
icon: mdi:battery-charging
content: 89%
- type: template
icon: mdi:wifi
content: Signal
alignment: justify
card_mod:
style: |
ha-card {
position: absolute;
top: 2px;
right: 30px;
width: 80px;
--chip-spacing: 0px;
}
card_mod:
style: |
ha-card {
border: 0.5px outset grey !important;
}
I also dont have the sensors that you mentioned so i just put fixed values instead. But just fill in the content section of each template chip with the state of your sensor.
The chips will be a bit sensitive to width because they arent forced to stay in a column. So just keep that in mind 
5 Likes
Somehow i could not get this working…
But it was pretty helpfull!
So i did made this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.tork
icon_type: entity-picture
fill_container: true
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 5px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 5px transparent;}
}
- type: entities
entities:
- entity: proximity.afstand
icon: mdi:map-marker-distance
- entity: sensor.sm_a546b_battery_level
name: Batterij
show_header_toggle: false
state_color: true
card_mod:
style: |
ha-card {
# background: none !important;
position: absolute;
top: -18px;
right: 50px;
width: 170px;
}
card_mod:
style: |
ha-card {
# background: none !important;
border: 0.5px outset grey !important;
height: 84px !important;
font-variant: small-caps;
}
Im still learning!..
There is only 1 prob with it…
The spacing between the both lines ( distance & battry)…wanted it closer to eachother in line
Thanky!!!
I’m trying to follow your example but I cannot get it to work. This is my current code:
type: custom:mushroom-person-card
entity: person.ignacio_martinez
icon_type: entity-picture
name: Ignacio
primary_info: none
secondary_info: none
fill_container: true
tap_action:
action: navigate
navigation_path: '#ignacio'
hold_action:
action: call-service
service: script.unmute_ignacios_pixel_5
data: {}
target: {}
card_mod:
style:
mushroom-shape-avatar$: |
.shape {
display: flex;
border-radius: 50%;
--icon-symbol-size: 58px;
--icon-size: 80px;
{% if states('switch.ignacio') == 'on' %}
--shape-animation: pinggreen 6s infinite;
{% else %}
--shape-animation: pingred 6s infinite;
{% endif %}
animation: var(--shape-animation);
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 5px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 5px transparent;}
}
and this is what the card looks like
I checked in the developer tools console that the if statemet works:
Adjusted now - should work better and no need to change anything other than the entities being referred to
type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.dimitri_landerloos
icon_type: entity-picture
fill_container: true
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 5px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 5px transparent;}
}
.container {
--icon-size: 80px !important;
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 20px;
--card-secondary-font-size: 20px;
}
.: |
ha-card {
background: none !important;
font-variant: small-caps;
height: 96px !important;
}
mushroom-badge-icon {
--badge-size: 24px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:map-marker-distance
content: 4 km
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: template
icon: mdi:battery-charging
content: 89%
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: template
icon: mdi:wifi
content: Signal
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
alignment: justify
card_mod:
style: |
ha-card {
position: absolute;
top: 2px;
right: 30px;
width: 80px;
--chip-spacing: -10px;
--chip-background: none;
}
card_mod:
style: |
ha-card {
border: 0.5px outset grey !important;
}
4 Likes
take a look at the one i just posted instead.
but also in the code you posted you didnt adjust the things that i mentioned for when using a picture.
you shouldnt need to adust anything with the new code provided. but you do need to have stack-in-card from HACS downloaded.
1 Like
That worked great!!!
And yes the one i posted last i made myself
After fiddling around with yours…
Keep on rocking Dimitri!!! Yay
You can swap the primary and secondary just by adding
primary_info: state
secondary_info: name
to your initial mushroom-media-player-card.
im not getting the card itself to look like yours for some reason. so i am struggling to be able to help you with the album bit.
Thanks for the primary/secondary bit. You’ve made me realise that the album art is being rendered by custom mini player and nothing mushrooms related. I also suspect there’s something in my theme which makes mine appear different to yours… I’ll keep tinkering… thanks
please tell me how to connect in one line without borders?
Cant be done by default, but easy enough with card mod:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.dimitri_landerloos
card_mod:
style: |
ha-card {
--chip-background: none;
--chip-border: none !important;
--chip-box-shadow: none !important;
}
That is super, thanks!
Is this also possible with the mushroom template card?
I have now my chips without background, would love to have this card also without background.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:pine-tree
icon_color: green
primary: Aantal dagen tot Kerst
secondary: >-
{{ (states('input_datetime.christmas') | as_datetime | as_local -
now()).days + 1 }}
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;
}
Found it, this will do 
card_mod:
style: |
ha-card {
background-color: #0000;
}
Only looking for a way to make it more (or less) transparent.
Any thoughts?
If you only want to affect the background just use rgba instead for your color. then you can set an alpha channel which affects opacity of the color.
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-card-background-color), 0.5);
}
you can technically also do this with hex color like you have, but you then need to include an alpha channel in your color.
so (#00ff44):
with an alpha channel for hex color, is this (#00ff4450) for 50% opacity.
there is 1 problem with using hex with alpha channel, and it is that not all browsers support it. namely Internet Explorer. not too big of an issue - but for consistencies sake i recommend just using rgba instead
you can look at the colors section of the guide in my profile, its in the original post
1 Like
Thank you for the explanation, going to play around with this
Hi Dimitri, do you know how to change the secondary information of an input_number card?
Change what exactly?
@dimitri.landerloos I have to change the orange temperature to this “{{state_attr(‘climate.stufa’, current_temperature)}}”
