take a look in the first post at the section called what the .: | and $ symbols do.
but essentially the issue is you have 2 | in a row. that is not allowed.
card_mod:
style: |
mushroom-fan-percentage-control$: |
mushroom-slider {
--main-color: rgb(var(--rgb-light-blue)) !important;
--bg-color: #d1eced !important;
}
You see?
should be like this:
card_mod:
style:
mushroom-fan-percentage-control$: |
mushroom-slider {
--main-color: rgb(var(--rgb-light-blue)) !important;
--bg-color: #d1eced !important;
}
.: |
mushroom-shape-icon{
--icon-color: rgb(var(--rgb-light-blue)) !important;
--shape-color: rgba(var(--rgb-light-blue), 0.2) !important;
}
1 Like
use card mod to make the icon transparent when the condition is met. something like this:
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: binary_sensor.fenster_wz
tap_action:
action: more-info
icon: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
mdi:window-closed-variant
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
mdi:alarm-light
{% else %}
mdi:window-open-variant
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
white
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
blue
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background-color: none !important;
box-shadow: none !important;
border: none !important;
}
card_mod:
style: |
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if states('cover.yourcover') == 'off' %}
color: transparent !important;
{% endif %}
}
sigkohlis
January 29, 2024, 1:19pm
338
Ah yes thank you for clarifying, it is working now.
sorry if this comes across as overasking…
- type: tile
entity: fan.luchtreiniger_woonkamer
state_content:
- state
- percentage
- last-changed
features:
- type: fan-speed
card_mod:
style: |
ha-tile-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
or even .icon which does allow to colorize the icon are showing any animation.
I did set it to ha-card to see if the animation itself is working, and that was a bit too much haha.
hope you would be able to nudge me in the right direction
not a big ask, but technically out of scope. but i am working on a tile guide, so i have the answer immediately anyway
type: tile
entity: fan.ensuite_relay_l1
state_content:
- state
- percentage
- last-changed
features:
- type: fan-speed
card_mod:
style:
ha-tile-icon$: |
ha-svg-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
FYI, sometimes you will need just ha-icon sometimes ha-svg-icon think anywhere that the icon might change based on state you need ha-svg-icon whereas if its static you just need ha-icon.
oh and if you have manually assigned an icon in the card using the visual editor then it will also be ha-icon
2 Likes
nice Dimitri,
Ive used this now, and it works perfectly
card_mod:
style:
ha-tile-icon$: |
ha-svg-icon {
animation:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set base =
'rotation infinite linear, colorize 5s linear forwards 1' %}
{% if perc <= 15 %} 4s {{base}};
{%- elif perc <= 33 %} 3s {{base}};
{%- elif perc <= 67 %} 1.5s {{ base}};
{%- else %} 0.75s {{base}};
{% endif %}
{% else %} none;
{% endif %}
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.: |
.icon {
--tile-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% if perc <= 15 %} lightblue;
{%- elif perc <= 33 %} lightskyblue;
{%- elif perc <= 67 %} dodgerblue;
{%- else %} darkblue;
{% endif %};
{% else %} var(--state-inactive-color);
{% endif %}
}
edit
added some corresponding blue colors.
too bad this doesnt also change the slider color. might need an extra yaml anchor on those…
2 Likes
dont have a fan with a speed control, but i think it might be this? havent gotten to fans yet
type: tile
entity: fan.downstairs_bathroom_relay_l1
features:
- type: fan-speed
card_mod:
style:
hui-tile-features$:
hui-fan-speed-tile-feature$:
ha-control-slider {
--control-slider-color: blue !important;
--control-slider-background: darkblue !important;
--control-slider-background-opacity: 1 !important;
}
right, Ive been playing with those, but the tile card is a horrible card to mod…
one would wish for a single color element to suffice for the other elements to default along. But as far as I got now, we need to mod all independently.
let me have a go, and if you want it in a separate thread, Id be happy to post there, not polluting the Mushroom guide…
btw still fighting with my entity-pictures in the map card, which seems to be the most difficult card for styling its entities
its alright. you migth be able to use mostly these 2 for colors, but its a bit annoying yes.
card_mod:
style:
hui-card-features$:
hui-cover-position-card-feature$: |
.container {
--color: red !important;
}
.: |
ha-card {
--tile-color: red !important
}
Dom seems different and like this:
hui-card-features$:
hui-fan-speed-card-feature$: |
ha-control-slider {
--control-slider-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% if perc <= 15 %} lightblue !important;
{%- elif perc <= 33 %} lightskyblue !important;
{%- elif perc <= 67 %} dodgerblue !important;
{%- else %} darkblue !important;
{% endif %};
{% else %} var(--state-inactive-color);
{% endif %};
--control-slider-background-opacity: 1 !important;
}
but as you can see we still need some auto adaptation for the background
that container --color does nothing…
I cant test with a fan sorry. but for the cover card the --color works as long as the path is the same taken.
but for the background you can just use this and not use the opacity at all. set it to the same color as the slider.
--control-slider-background: darkblue !important;
yes that works (might need to have another look at those colors)
style:
ha-tile-icon$: |
ha-svg-icon {
animation:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set base =
'rotation infinite linear, colorize 5s linear forwards 1' %}
{% if perc <= 15 %} 4s {{base}};
{%- elif perc <= 33 %} 3s {{base}};
{%- elif perc <= 67 %} 1.5s {{ base}};
{%- else %} 0.75s {{base}};
{% endif %}
{% else %} none;
{% endif %}
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
hui-card-features$:
hui-fan-speed-card-feature$: |
ha-control-slider {
--control-slider-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% if perc <= 15 %} lightblue !important;
{%- elif perc <= 33 %} lightskyblue !important;
{%- elif perc <= 67 %} dodgerblue !important;
{%- else %} darkblue !important;
{% endif %};
{% else %} var(--state-inactive-color);
{% endif %};
--control-slider-background:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% if perc <= 15 %} lightblue !important;
{%- elif perc <= 33 %} lightskyblue !important;
{%- elif perc <= 67 %} dodgerblue !important;
{%- else %} darkblue !important;
{% endif %};
{% else %} var(--state-inactive-color);
{% endif %};
}
.: |
.icon {
--tile-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% if perc <= 15 %} lightblue;
{%- elif perc <= 33 %} lightskyblue;
{%- elif perc <= 67 %} dodgerblue;
{%- else %} darkblue;
{% endif %};
{% else %} var(--state-inactive-color);
{% endif %}
}
no more opacity.
2 Likes
tomg1970
January 29, 2024, 5:40pm
348
Thanks for reply
is not transparent in off
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: binary_sensor.fenster_wz
tap_action:
action: more-info
icon: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
mdi:window-closed-variant
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
mdi:alarm-light
{% else %}
mdi:window-open-variant
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
white
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
blue
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background-color: none !important;
box-shadow: none !important;
border: none !important;
}
card_mod:
style: |
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if states('binary_sensor.fenster_wz') == 'off' %}
color: transparent !important;
{% endif %}
}
Oopps, i made a mistake. Remove the | after style: |
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if states('binary_sensor.fenster_wz') == 'off' %}
color: transparent !important;
{% endif %}
}
There are several ways, I’ll put together 2 options.
1 Like
tomg1970
January 29, 2024, 7:26pm
351
Now background is not transparent or none
Instead of background-color: none !important; use background: none !important;
@tomg1970 This was one of the methods I was going to suggest. It will require some adjusting to fit your needs, but if the status isn’t met the icon doesn’t appear.
I used my entity to test so you’ll need to adjust.
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: binary_sensor.fenster_wz
icon: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
mdi:window-closed-variant
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
mdi:alarm-light
{% else %}
mdi:window-open-variant
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
white
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
blue
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
{% if not is_state('binary_sensor.fenster_wz', 'on') %}
display: none !important;
{% endif %}
}
