OK we’re abit limited on experts in this topic at the moment lol.
but correct me if I am wrong but isn’t the new sections just built up with grids like I posted above, I didn’t add a grid it added it by default the moment it spanned 2 columns. I don’t use the new sections myself so I am just guessing here
Yes the new sections are using a grid system internally. But as you see in my code (1. and 3. pic) the mushroom cards are already in sections and have layout_options grid_columns: 2 but without a wrapper like “type:grid”
grid_columns property is defined on the same level as the mushroom card itself.
Hi. Can anyone tell me why it is not working the change of color for the slider?
type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.cortina_dormitorio
show_position_control: true
card_mod:
style: |
mushroom-cover-position-control$: |
mushroom-slider {
--main-color: red !important;
--bg-color: pink !important;
}
ha-state-icon {
--card-mod-icon:
{% if is_state('cover.cortina_dormitorio', 'open') %}
mdi:wind-power
{% else %}
mdi:curtains-closed
{% endif %}
}
ha-state-icon {
color:
{% if is_state('cover.cortina_dormitorio', 'open') %}
red
{% else %}
grey
{% endif %}
}
I can only make work one of the two “mods”. either the icon and sahpe color or the slider color, but not both at the same time. The code above makes work the icon/shape icon color. If I change the order of the code and put the slider color code above, then the icon/shape color stops working.
Thank you.
first post, below section 
Yes, thank you. I read it and used it: The ha-state icon doesn’t work. The mushrooms cover position and mushroom shape icon works. What am I missing?
type: custom:mushroom-cover-card
entity: cover.persiana_dormitorio
show_position_control: true
name: Persiana iconos completos
card_mod:
style:
mushroom-cover-position-control$: |
mushroom-slider {
--main-color: red !important;
--bg-color: yellow !important;
}
.: null
mushroom-shape-icon$: |
.shape {
--shape-color:
yellow !important;
--icon-color:
orange !important;
}
.: |
ha-state-icon {
--card-mod-icon: mdi:wind-power;
color: orange;
--icon-symbol-size: 30px;
}
card_mod:
style:
mushroom-cover-position-control$: |
mushroom-slider {
--main-color: red !important;
--bg-color: yellow !important;
}
mushroom-shape-icon$: |
.shape {
--shape-color:
yellow !important;
--icon-color:
orange !important;
}
.: |
ha-state-icon {
--card-mod-icon: mdi:wind-power;
color: orange;
--icon-symbol-size: 30px;
}
So all the mods that require style: | go together and all the mods that does require style: go together? IS that the idea? I tried that but clearly with some mistakes. Thank you!
everything that requires accessing a shadow-root (via using $) needs its own |
so yes, things that dont need a shadow-root at all need to go together under either style: | or in the case when you do need shadow-root but also some that dont under .: |
I don’t understand your first sentence. I’m having problems because I want to change many thing int he cover card: color, icon, slider color, slider size…
What is the rule to add diffetent things and make it work?
Now I have tried to add the slider size, but it doesn’t work:
card_mod:
style:
mushroom-cover-position-control$: |
mushroom-slider {
--main-color: red !important;
--bg-color: yellow !important;
}
mushroom-cover-position-control$:
mushroom-slider$: |
.slider {
width: 200px !important;
height: 200px !important;
}
mushroom-cover-tilt-position-control$:
mushroom-slider$: |
.slider {
width: 200px !important;
height: 200px !important;
}
mushroom-shape-icon$: |
.shape {
--shape-color:
yellow !important;
--icon-color:
orange !important;
}
.: |
ha-state-icon {
--card-mod-icon: mdi:wind-power;
color: orange;
--icon-symbol-size:15px;
}
A more specific: how to “fussionate” these 2 mods:
mushroom-cover-position-control$: |
mushroom-slider {
--main-color: red !important;
--bg-color: blue !important;
}
mushroom-cover-position-control$:
mushroom-slider$: |
.slider {
width: 30px !important;
height: 30px !important;
}
Hi, I am trying to change the following
type: custom:mushroom-climate-card
entity: climate.living
show_temperature_control: true
fill_container: true
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.container {
flex-direction: row !important;
align-items: baseline;
gap: 10px;
}
but I have this error. Can you help me what is wrong?
Configuration errors detected:
• can not read a block mapping entry; a multiline key may not be an implicit key (12:23)
•
• 9 | style:
• 10 | mushroom-state-info$: |
• 11 | .container {
• 12 | flex-direction: row !important;
• ----------------------------^
• 13 | align-items: baseline;
• 14 | gap: 10px;
I have been having a problem with my cards for some time now. They don’t load correctly. disposable after refreshing several times it will load correctly. Is anyone able to help?
Card code:
type: custom:vertical-stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
entity_id: light.natalia
primary: Natalia
secondary: '{{ state_attr(''climate.natalia'', ''current_temperature'') }} °C'
picture: /local/img/natalia-avatar2.png
layout: horizontal
multiline_secondary: false
badge_icon: >-
{{ 'mdi:motion-sensor' if is_state('binary_sensor.natalka', 'on') else
'mdi:motion-sensor-on' }}
tap_action:
action: call-service
service: light.toggle
service_data: {}
target:
entity_id: light.natalia
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
top: -12px;
right: 15px;}
mushroom-badge-icon {
left: 135px;
top: 10px;
--icon-color: red;
--main-color: none;
}
:host {
--mush-badge-font-size: 25px;
--mush-badge-icon-size: 18px;
}
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
--chip-height: 38px;
--chip-spacing: 0;
top: -28px;
}
alignment: end
chips:
- type: template
entity: light.natalia
icon: mdi:lightbulb
tap_action:
action: call-service
service: light.toggle
service_data: {}
target:
entity_id: light.natalia
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
amber
{% elif state=='off' %}
#6f6f6f
{% else %}
#6f6f6f
{% endif %}
- type: template
entity: light.lozko_natali
icon: mdi:track-light
tap_action:
action: call-service
service: light.toggle
service_data: {}
target:
entity_id: light.lozko_natali
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
amber
{% elif state=='off' %}
#6f6f6f
{% else %}
#6f6f6f
{% endif %}
- type: template
entity: cover.natalia_2
icon: >-
{% if states('binary_sensor.natalia2_contact')=='on' %}
mdi:door-open
{% elif states('binary_sensor.natalia2_contact')=='off' and
states('cover.natalia_2')=='closed' %}
mdi:window-shutter
{% else %}
mdi:door
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% if states('binary_sensor.natalia2_contact')=='on' %}
red
{% elif states('binary_sensor.natalia2_contact')=='off' %}
#6f6f6f
{% else %}
#6f6f6f
{% endif %}
- type: template
entity: cover.natalia
icon: >-
{% if states('binary_sensor.natalia1_contact')=='on' %}
mdi:door-open
{% elif states('binary_sensor.natalia1_contact')=='off' and
states('cover.natalia')=='closed' %}
mdi:window-shutter
{% else %}
mdi:door
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% if states('binary_sensor.natalia1_contact')=='on' %}
red
{% elif states('binary_sensor.natalia1_contact')=='off' %}
#6f6f6f
{% else %}
#6f6f6f
{% endif %}
card_mod:
style: |
:host {
--mush-icon-size: 55px;
top: -20px ;
}
ha-card {
height: 85px;
box-shadow:
{% if is_state('light.lampy_natalia', 'on') %} 0 0 0.3em #FFD700 {%
else %} {% endif %}
}
}
(post deleted by author)
No it hasnt. heading card is default and title card is mushroom.
heading card does not support templates. mushroom title card does.
this thread is only related to mushroom with card mod, not all cards with card mod.
Hi,
I spent ours on trying various settings shown in this really well written guide but I was not successful
When I use this code the result is the one shown in the picture. any clue how can change font size like shown in the example for entity cards so the font scales?
type: custom:mushroom-entity-card
entity: sensor.wetterstation_temperatur
name: Outdoor
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 40px;
--card-primary-font-size: 40px;
height: 200px;
width: 200px;
}
type: custom:mushroom-entity-card
entity: sensor.wetterstation_temperatur
name: Outdoor
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-line-height: 36px !important;
--card-secondary-line-height: 36px !important;
--card-secondary-font-size: 40px;
--card-primary-font-size: 40px;
height: 200px;
width: 200px;
}
use
--card-primary-line-height: 35px !important;
Is this still working (because i can’t get it to work :-)) ?
thank you so much Frosty - that worked for me!!
1 Like
Hi, i read all the topic and still don’t get. I’m trying to style the background of the buttons of the cover cards, but nothing works. My code is
card_mod: style: | ha-card { background-color: var(--deep-purple-color); } mushroom-state-info { --card-primary-color: black; } ha-state-icon { color: black; } mushroom-shape-icon { --shape-color: rgba(0,0,0,0.2) !important; } mushroom-cover-buttons-control { --card-mod-icon-color: black; }.
If i Try to do somthing with nested code, nothing works. do you have an idea why?
I’m trying to merge this two codes together using the template-card, but I’m still confused even after reading the docs:
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 28px !important;
--card-font-weight: 700 !important;
--card-secondary-font-size: 14px !important;
--card-secondary-font-weight: 400 !important;
}
with:
|
.title:before {
content: '';
font-size: 10px;
}
.title:after {
content: '{{ user | lower }}';
font-size: 28px;
font-weight: 300;
}
Any help would be appreciated, thank you.