Thank you very much, this is what I was looking for
I accidentally put the template card as a chip card in CSS and it came out pretty cool, what do you guys think ?
6 Likes
{{ states.sensor.xxxx.,state }} i know its old but show the right state
1 Like
I partially fix my problem.
change
name: My Address
to name: my_address
and now I can see a house # , but not a full address.
Any segestions? TY
Hi, these cards are wonderful and I really like the light card, but I was wondering how can I have just the icon toggle the light with the tap_action and when I tap anywhere else on the card to show more-info. Just like the custom button card does… Thank you for your support!
Does it do the same thing when using a template card?
type: custom:mushroom-template-card
entity: binary_sensor.garagedoor_sensor_iaszone
primary: Garage
secondary: |
{{ 'Closed' if is_state(config.entity, 'off') else 'Open' }}
icon: >
{{ 'mdi:garage-lock' if is_state(config.entity, 'off') else 'mdi:garage-open'
}}
icon_color: |
{{ 'green' if is_state(config.entity, 'off') else 'red' }}
tap_action:
action: more-info
name: Garage
card_mod:
style: |
ha-card {
padding: 0px !important;
padding-bottom: 3px !important;
text-align: left !important;
border: 0px outset #02CCFF;
font-style: italic;
font-variant: small-caps;
box-shadow: none !important;
--secondary-text-color: orange;
}
Another option is to test adding !important to your icon and color settings like this
type: custom:mushroom-entity-card
entity: binary_sensor.garagedoor_sensor_iaszone
tap_action:
action: more-info
name: Garage
card_mod:
style: |
ha-card {
padding: 0px !important;
padding-bottom: 3px !important;
text-align: left !important;
ha-state-icon {
{% if is_state(config.entity, 'off') %}
--card-mod-icon: mdi:garage-lock !important;
--card-mod-icon-color: green !important;
{% else %}
--card-mod-icon: mdi:garage-open !important;;
--card-mod-icon-color: red !important;
{% endif %};
}
border: 0px outset #02CCFF;
font-style: italic;
font-variant: small-caps;
box-shadow: none !important;
--secondary-text-color: orange !important;;
}
1 Like
To start we will need a third value assigned to the third color. Values <=17 and >= 20 currently covers 0-100.
If you use <= with another <= you can have two values, like this:
icon_color: >-
{% if states('sensore_ingresso_device_temperature') | int <= 17 %}
red
{%elif states ('sensore_ingresso_device_temperature') | int <= 50 %}
blue
{% else %}
green
{% endif %}
1 Like
Hi! I copied this code but can’t make the shape animation to work. I did change the ha-icon to ha-state-icon. Can you please help me out? Thank you!
Try like this. More than just ha-icon - ha-state-icon has changed. The pathing to elements is also different.
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: red
primary: Radiator
secondary: It's HOT!
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
.: |
ha-state-icon {
animation: clip 1s linear infinite;
}
@keyframes clip {
0% {clip-path: inset(50% 0 0 0);}
100% {clip-path: inset(0 0 0 0);}
}
Hi,
Can anyone tell me if there’s another way to template the icon in this select-card, other than this. This works fine on my desktop but in my iOS App which I use most frequent it’s very inconsistent. Sometimes it doesn’t work and sometimes it seems to be delayed, and I end-up in the “Wired” state with mdi:network, in “WiFi” state with mdi:ethernet, in “Mesh Devices” with mdi:wifi and so on, there’s always a discrepancy. I also tried clearing the frontend cache, it didn’t change a thing.
Thank you.
type: custom:mushroom-select-card
card_mod:
style:
mushroom-shape-icon$:
.shape:
--icon-symbol-size: 15px;
--icon-size: 30px;
top: 0.5px;
mushroom-select-option-control$:
mushroom-select$:
.mdc-select__selected-text:
font-size: 14px !important;
.mdc-select__anchor:
--select-height: 30px !important;
style: |
ha-card {
height: 45px !important;
width: calc(100% - 10px);
left: 5px;
border-radius: 0px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
ha-state-icon {
{% set state = states('input_select.filter_lan_devices') %}
{% set icon_mapping = {
'All': 'mdi:network',
'Wired': 'mdi:ethernet',
'WiFi': 'mdi:wifi',
'Mesh Devices': 'mdi:server-network',
} %}
--card-mod-icon: {{ icon_mapping.get(state, icon_mapping) }};
}
entity: input_select.filter_lan_devices
icon: ''
primary_info: none
fill_container: true
secondary_info: none
layout: horizontal
tap_action:
action: none
go to developer tools and check the attributes of sensor.sm_s918u_geocoded_location… if you don’t have this sensor, you must activate it in mobile settings app
1 Like
hey @dimitri.landerloos , do you know how to create two notification badges, one based on available updates and one based on lights on?
Hi together,
I remove the icon background which is in principle working fine but I have two questions…
- Is it possible somehow to remove the background of the icons with a central defined code without the need to add to every card?
- I have the problem that when the page is loaded fresh I see for about a second the background before it goes away. When I navigate again to the page this is not there, so it is a first load problem. Any idea how to improve this?
Many many thanks!
My code…
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
Hi! I have trouble in getting the motion animation work under multiple chips. Here is my code, with it i cannot have the background motion work. Can you please help me with it? Thank you!
mushroom-template-chip:nth-child(7)$: |
ha-state-icon {
animation: clip 2s linear infinite;
}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
.: |
ha-card {
animation: motion 2s linear infinite;
}
@keyframes motion {
0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
}
Thank you!!
Do you already have sensor created for number of lights on?
lights_on:
friendly_name: 'Lights ON'
value_template: >
{% set lights = [
states.light.pc_lights,
states.light.bed_lights,
states.light.tv_lights,
states.light.night_stands,
states.light.bathroom_lights,
states.light.server_light,
] %}
{{ lights | selectattr('state','eq','on') | list | count }}
One method for multiple badges is to take advantage of ha-state-icon::before { and ha-state-icon::after {
type: custom:mushroom-template-card
primary: Two Badges
secondary: more info
entity: light.pc_lights
icon: mdi:lightbulb
icon_color: white
tap_action:
action: toggle
card_mod:
style: |
ha-state-icon::after {
content: "{{ states('sensor.lights_on') }}";
position: absolute;
top: 0%;
right: 70%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height:14px;
border-radius: 50%;
background-repeat: no-repeat;
background: red;
font-size: 10px;
}
ha-state-icon::before {
content: "{{ states('sensor.lights_on') }}";
position: absolute;
top: 0%;
right: -6%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height:14px;
border-radius: 50%;
background-repeat: no-repeat;
background: red;
font-size: 10px;
}
1 Like
For 2. Try clearing your browser history data and see if it goes away. It may be too large of a file.
wondering if this great community of Mushroomers can help a mere Tile card user with what seems to be a very specific issue.
Bottom line:
I can filter an entity_picture in Chrome, but that same mod wont work in Safari (on a Mac, and the iOS App)
Was hoping the rendering of those pictures would be related on Mushroom and Tile and if you have seen discrepancies like this before.
If no, sorry for wasting your reading time…
for brevity’s sake, I wont post the full mod I am using now (can read that in the link) but only the failing filter:
card_mod:
style: |
ha-tile-image {
{{'filter: grayscale(1)' if not is_state(config.entity,'home') and
states(config.entity) not in zones else 'filter: none'}};
}
It seems to boil down to the filter itself, any other type of filter, like a blur, shows the same: works in Chrome, not in Safari.
And yes, Ive also tried to play with -webkit- but that wasnt successful either. see: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #2025 by rhysb
ha-tile-image {
{{'-webkit-filter: grayscale(100%)' if not is_state(config.entity,'home') and
states(config.entity) not in zones else 'filter: none'}};
}
Works in Chrome… not in Safari
Anyways, if you have a suggestion, please don’t hold back
checked: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #1079 by rhysb
Mushroom Cards - Build a beautiful dashboard easily 🍄 - #1111 by rhysb
Mushroom Cards - Build a beautiful dashboard easily 🍄 - #1793 by rhysb
which do essentially the same (albeit on the card, and not targeting the image element alone)?
further down the topic:
Mushroom Cards - Build a beautiful dashboard easily 🍄 - #2219 by rhysb …
ending here: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #2369 by pLeX ? hope not. seems a unique issue
- type: custom:mushroom-template-card
entity: input_number.keuken_vaatwas_ingevenaantalblokjes
mode: box
but I still get a slider. I want the possibilty to put a value in, and no slider …