Next time do please state what you are trying to achieve. But in essence your problem is that you cant have 2 | in a row which you had here (if you removed the extra things you had listed)
card_mod:
style: |
mushroom-shape-avatar$: |
This is not allowed. You need to only have 1 | so like this:
card_mod:
style:
mushroom-shape-avatar$: |
Then to get back to using style: | which you need for your ha-card you can use .: | this is used to take you back like this:
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
something: test;
}
.: |
ha-card {
something-else: test;
}
So to fix your code it would be like this:
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
background: #afc9d1;
box-shadow: none;
border: none !important;
}
1 Like
bjesus75
December 9, 2023, 7:22pm
9092
this now works, but when person is away, how to change the color of the ping?
type: custom:mushroom-person-card@keyframes ping {#afc9d1 ;
Im not trying to be annoying, but please just ask all your questions in the first post please
But you can use templates in card mod. So like this:
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
{% if states(config.entity) == 'home' %}
animation: pinghome 2s infinite;
{% elif states(config.entity) == 'away' %}
animation: pingaway 2s infinite;
{% endif %}
}
@keyframes pinghome {
0% {box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingaway {
0% {box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 0.7);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
background: #afc9d1;
box-shadow: none;
border: none !important;
}
Tadies
December 9, 2023, 8:26pm
9094
Dimitri?
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;}
}
.: |
ha-card {
border: 0.5px outset grey !important;
height: 69px !important;
font-variant: small-caps;
}
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
Tadies
December 10, 2023, 9:11am
9096
Im sorry for not beeing clearā¦did try thoā¦hehperson card show off
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
Tadies
December 10, 2023, 5:14pm
9098
Somehow i could not get this workingā¦
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!..
ignacio82
December 10, 2023, 6:04pm
9099
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.
Adjusted now - should work better and no need to change anything other than the entities being referred to
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
Tadies
December 10, 2023, 6:40pm
9102
That worked great!!!
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.
brewston
December 11, 2023, 2:03pm
9104
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
1umnyy
December 11, 2023, 6:39pm
9105
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!
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.
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
