what is the different to this card_mod? sometimes i dont know what is the right way
mushroom-shape-icon {
--shape-color: none !important;
--icon-color: #008080 !important;
}
No right way. Both work.
But with your solution you are targetting a variable. Called --shape-color & --icon-color
The only reason why sometimes that isnt the recommened way, is because you dont know how those variables are used elsewhere. For example, maybe the the --icon-color variable is tied to the entity being on only? Or the --shape-color is also used to determine the background color of the card itself? These are just examples to get my point across.
This is why i normally recommend targetting the element directly and changing it there. You avoid it affecting anything else by accident.
2 Likes
Ah alright, thank you 
2024.6.4-----2024.7.1
Please help me with this SHIFT.
Any “one button” solution?
Thanks
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Спальня
secondary: >-
{{ states('sensor.0x00158d000709bf12_temperature') | round(1) }}°C {{
states('sensor.0x00158d000709bf12_humidity') | round(1) }}%
icon: ytz:bed-double-heart
entity: light.bedside_lamp_rgbww_light
tap_action:
action: toggle
double_tap_action:
action: navigate
navigation_path: bedroom
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''#b7c3c7'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
--mush-icon-size: 83px;
height: 68px;
margin-left: -21px !important;
margin-top: -2px !important;
}
ha-card {
--card-primary-font-size:16px;
--card-secondary-font-size:13px;
--icon-symbol-size: 53px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: humidifier.zhimi_ca4_d6bc_humidifier
icon: mdi:air-humidifier
tap_action:
action: toggle
hold_action:
action: none
icon_color: |-
{% if is_state ('humidifier.zhimi_ca4_d6bc_humidifier', 'on')%}
blue
{% else %}
grey
{% endif %}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 20px;
margin-top: -3px;
}
card_mod:
style: |
ha-card {
background-color: rgba(224,234,237,1) !important;
height:107px !important;
margin-top: -9px;
}
Might be a niche use case:
I wanted a way to see the fluid level in my watering tank, so I used the background to represent the fluid level:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: linear-gradient(0deg, rgba(96, 125, 139, 0.3) calc( {{ states('sensor.wassertank') }}% / 0.62 ), rgba(96, 125, 139, 0.12) 0.1%) !important;
}
This effectively sets the background to a gradient with minimal transition. !important is used as usual to overwrite the background color.
4 Likes
Very nice! Could also be a nice way to show light brightness level
2 Likes
Try and swap most of your :host {
To ha-card {
And then add !important to all of them.
2 Likes
So I’ve been messing around with the template card for quite some time. Unless someone has something I could use as an alternative that will allow me to have it say something like “Hello {{user}}”, or better yet template it for times (morning/afternoon/evening) I was curious how to make the text larger without blocking out the top or bottom. Seems like any size larger than 20px cuts off the top and bottom…. Any way around that? The button-card works but I can’t seem to template it…
I just ran into this myself. You need to add something like this to the card with card_mod:
card_mod:
style: |
ha-card {
--card-primary-line-height: 60px !important ;
--card-secondary-line-height: 60px !important ;
--card-primary-font-size: 50px
}
The line-height lines make sure the card will expand to fit the font.
Make sure you have card_mod installed, of course.
funny the little things that make the difference. that worked brilliantly. i appreciate the info!
type: custom:mushroom-template-card
primary: |2-
{%- if now().hour < 12 -%}Morning
{%- elif now().hour < 18 -%}Afternoon
{%- else -%}Evening{%- endif -%}, {{user}}
icon: mdi:home
good idea, done.
5 Likes
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 21px;
--icon-size: 100px;
--shape-color: {{ states("input_text.kleur_iconen")}} !important;
mushroom-state-info$: |
.container {
--card-primary-font-size: 45px;
}
.: |
ha-card {
justify-content: center;
}
What am I doing wrong ? none of these modifcations are working for me…
I am able to modify the icon, but I am having trouble modifying the slider. It’s not working. Is this still the correct code for the sliders?
My code is below.
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.living_room
icon_color: amber
show_brightness_control: true
show_color_temp_control: true
fill_container: true
icon: mdi:lightbulb-group
card_mod:
style: |
ha-state-icon {
--card-mod-icon: {% if is_state('light.master_bedroom', 'on') %} mdi:lightbulb-group {% else %} mdi:lightbulb-group-off {% endif %};
}
mushroom-light-brightness-control$: |
mushroom-slider {
--gradient: -webkit-linear-gradient(right, amber 0%, white 100%) !important;
}
remove the |
put ha-state-icon { at the bottom
and you need .: |
like this
.: |
ha-state-icon
and like the above post remove | after style:
Thank you for the help. I also realized I accidentally was using the wrong slider as I wanted to change the temp control rather than brightness slider to match the color. Once it worked, I found out that “amber” doesn’t work here as I ended up with a black bar. After using an eyedropper extension, I replaced it with the Hex code for the color, and it works. I also ended up creating what I think is a cool gradient for color temp using the blue from what appears to be the old style that’s on the github image showing the feature.
card_mod:
style:
mushroom-light-color-temp-control$: |
mushroom-slider {
--gradient: -webkit-linear-gradient(right, #FFC107 0%, white 75%, #ABD3FB 100%) !important;
}
.: |
ha-state-icon {
--card-mod-icon: {% if is_state('light.living_room', 'on') %} mdi:lightbulb-group {% else %} mdi:lightbulb-group-off {% endif %};
}
2 Likes
Thanks!
i tried to add color to the text, but that does not work…
ha-card {
justify-content: center;
--primary-text-color: {{ states("input_text.kleur_iconen")}};
}
edit:
this is the right syntax
rgb({{ states(“input_text.kleur_iconen”)}});
1 Like
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 40px;
--icon-size: 50px;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
mushroom-state-info$: |
.container {
--card-primary-font-size: 25px;
--card-primary-color: rgb({{ states("input_text.kleur_iconen")}});
align-items: center;
}
.: |
ha-state-icon {
color: rgb({{ states("input_text.kleur_iconen")}});
ha-card {
font-family: "brandon-grotesque";
}
How can I get the icon also centered ?
edit:
mushroom-shape-icon$: |
.shape {
left: 105px;
}
it’s not really centered, but at least you can change the position…
How do I know that the font-family exist ? where can I find this ?
edit: