how to make the icon itself not rotate , for example mdi:music
I get "custom element doesnāt exist : stack in card
I added the stack in in hacs. And refreshed and reloaded sources ā¦ What can it be ?
Hello,
is there a way to change the background of the template card based on the a light color?
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
--primary-text-color: rgba( {{r}}, {{g}}, {{b}}, 0.99 );
--secondary-text-color: rgba( {{r}}, {{g}}, {{b}}, 0.50 );
{%- else -%}
{%- endif %}
}
2 Likes
I used your code.
My graphic chart is cropped at the bottom.
Although when setting up the card, the preview shows correctly:
You can have a play with the height: 60 and also the positioning. Use bottom: 0px; instead of top: 0px;.
type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.family_room_sensor_humidity
primary_info: state
secondary_info: name
name: Humidity
icon_color: blue
card_mod:
style: |
ha-card {
z-index: 1;
--ha-card-border-width: 0;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.family_room_sensor_humidity
name: Temperature
color: var(--blue-color)
height: 50
hours_to_show: 24
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 80%;
right: 0px;
bottom: 0px;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color), transparent);
}
4 Likes
ha-mod was enabled in hacs 
it works fine now 
1 Like
Hey @rhysb, even if itās a bit off-topic, do you have any ideas on how to create cute popups like this? I tried with card_mod but it doesnāt take any commands 
4 Likes
have you tried adding this card code inside a browser-mod card? that should be enough ā¦
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
what is wrong here ? I get ācustom element doesnt exist: stack-in-cardā
This is beautiful! Can you share the code?
I am using the Mushroom Cover Cards for my blinds and curtains.
Right now the icon gets a blue color when the curtain is open and it turns grey when the curtain is closed.
I would like to turn this around, so turn blue when the curtain is closed and turn grey when the curtain is opened. Does someone know how to do this?
1 Like
I think you can simply change these theme variables
mush-rgb-state-cover-open: var(--mush-rgb-indigo)
mush-rgb-state-cover-closed: var(--mush-rgb-disabled)
So with 2023.4 coming out regarding the fan speeds Iām looking to update my current design:
Iād like to add in these two parameters as subtext below the āAir Purifierā Title
So it would look like
Air Purifier
Air Quality:
Filter Life
and then the current options.
Currently iām using the swipe card to combine the two and it makes more sense just to combine the two. I like the new title card but I donāt think itās possible yet to change the features to extensively yet. iād like to blend the two of the tile card and this custom card ultimately if anyoneās up for helping of course.
Current Code
type: conditional
conditions:
- entity: fan.cr_air_purifier
state_not: unavailable
card:
type: custom:swipe-card
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: fan.cr_air_purifier
icon: mdi:fan
primary: Air Purifier
secondary: |-
{% set fanspeed = state_attr(config.entity, 'percentage') %}
{% if is_state_attr(config.entity, "mode", "auto") %}
Auto
{% elif is_state_attr(config.entity, "mode", "sleep") %}
Sleep
{% elif fanspeed == 100 %}
High
{% elif fanspeed == 66 %}
Medium
{% elif fanspeed == 33 %}
Low
{% endif %}
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-icon {
box-shadow: 0px 0px;
animation: rotation linear infinite !important;
{% set fanspeed = state_attr(config.entity, 'percentage') |float %}
{% if is_state_attr(config.entity, "mode", "auto") %}
animation-duration: 2s !important;
{% elif is_state_attr(config.entity, "mode", "sleep") %}
animation-duration: 6s !important;
{% elif fanspeed == 100 %}
animation-duration: 0.5s !important;
{% elif fanspeed == 66 %}
animation-duration: 1.5s !important;
{% elif fanspeed == 33 %}
animation-duration: 3s !important;
{%- else -%}
animation-duration: ;
{%- endif %}
}
.: |
ha-card {
margin-bottom: px
}
- type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: grid
cards:
- type: custom:mushroom-template-card
layout: vertical
primary: Low
tap_action:
action: call-service
service: fan.set_percentage
data:
percentage: 33
target:
entity_id: fan.cr_air_purifier
view_layout:
grid-area: button1
card_mod:
style: |
ha-card {
height: 44px !important;
box-shadow: none;
--card-primary-font-weight: normal;
}
- type: custom:mushroom-template-card
layout: vertical
primary: Medium
tap_action:
action: call-service
service: fan.set_percentage
data:
percentage: 66
target:
entity_id: fan.cr_air_purifier
view_layout:
grid-area: button2
card_mod:
style: |
ha-card {
height: 44px !important;
box-shadow: none;
--card-primary-font-weight: normal;
}
- type: custom:mushroom-template-card
layout: vertical
primary: High
tap_action:
action: call-service
service: fan.set_percentage
data:
percentage: 100
target:
entity_id: fan.cr_air_purifier
view_layout:
grid-area: button3
card_mod:
style: |
ha-card {
height: 44px !important;
box-shadow: none;
--card-primary-font-weight: normal;
}
- type: custom:mushroom-template-card
layout: vertical
icon: mdi:fan-auto
icon_color: white
tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: auto
target:
entity_id: fan.cr_air_purifier
double_tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: sleep
target:
entity_id: fan.cr_air_purifier
view_layout:
grid-area: button4
card_mod:
style: |
ha-card {
height: 44px !important;
box-shadow: none;
}
mushroom-shape-icon {
--shape-color: none !important;
--icon-symbol-size: 20px;
}
layout:
grid-template-columns: 29% 29% 29% 13%
grid-template-rows: auto
grid-template-areas: |
"button1 button2 button3 button4"
- type: glance
entities:
- entity: sensor.air_purifier_air_quality
- entity: sensor.air_purifier_filter_life
Any help?
No, you see the title and the āXā button are modified via CSS. But I really have no idea how to do it
Ah its only for honeywell thermostats damn nevermind, I got a nest, but thanks!
Can anybody tell me how to use ha-card together with ha-icon with card_mod?
Does anyone have any ideas on this one?
After 2023.04 update sticky header dropped down
card_mod:
style: |
:host {
position: sticky;
top: var(--header-height);
z-index: 1;
}
changing to
top: 0px;
helps.
Something happend with HA header and sidebar. Kiosk Mode doesnāt work anymore. It is impossible to hide HA header. Also I noticed on phone when I swipe finger from the phone edge sidebar doesnāt appear anymore.
1 Like