Now the status (switch color) and the WATT history seem to work, although not the KWH history and the separator stripe in the center continues to appear.
Thank you very much, I have no idea about these cards hahaha I’m a complete noob here.
you can only have one click action on a card so you won’t be able to
you could set a double click for this?
what theme are you using ?
Hey there,
can someone help me here?
I did a template card with ha-card mod and so on.
in a normal dashboard, i get it, no problem.
Once i try to add it into the wallpanel, where some allready exists, I do only see the icon, but not the primary and secondary…
I tried everything, hopefully someone can help me…
- type: custom:mushroom-template-card
primary: Pooltemperatur
secondary: '{{ states("sensor.pooltemperatur") }} °C'
icon: mdi:hot-tub
icon_color: blue
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 30px !important;
--card-primary-color: red;
--card-secondary-font-size: 30px !important;
--card-secondary-color: blue;
--card-primary-line-height: 40px;
--card-secondary-line-height: 40px;
flex-direction: row !important;
align-items: baseline !important;
gap: 10px;
}
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
}
.: |
ha-card {
zoom: '';
width: 85%
height: fit-content !important;
background: darkgrey;
border: black;
color: black;
text-shadow: 2px 1px 3px black;
margin-left: 110%;
margin-top: -150%;
}
ha-state-icon {
--icon-symbol-size: 30px;
}
So I use midnight theme
I don’t know about double clicking, I see that the letters on the right are now a little smaller or less bold than in the previous one.
I moved it from primary to secondary to make it more like the standard card.
will have a look at the theme to see about the lines down the middle
1 Like
If you are still looking for a fix. You need to change
this
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 50px;
margin-left: -18px !important;
}
to this
card_mod:
style: |
ha-card([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
--icon-size: 76px;
height: 50px;
margin-left: -18px !important;
}
I don´t know why, but it is solved.
I set the code manually again and it worked…
But now I need your help in this case.
I want,that the secondary card color will change if ranges will exist.
Like, <=30: red, <=26: yellow, <=24: blue.
With this card_mode, i do not get a result, can someone help urgently?
@LiQuid_cOOled you helped me a lot in the past 
ha-card {
zoom: 100%;
font-size: 15px%;
margin-left: 110%;
margin-top: -150%;
width: 85%;
height: fit-content !important;
background-color: transparent !important;
opacity: '';
border: transparent;
{% set state = states('sensor.pooltemperatur') | int %}
{% if state <= 30 %}
--card-secondary-color: red;
{% elif state <= 27 %}
--card-secondary-color: yellow;
{% elif state <= 24 %}
--card-secondary-color: blue;
{% endif %}
I am hoping someone can point me in the correct direction as I have already spent an embarrassingly large chunk of time trying to achieve something I do not know if it is even possible.
I wish to have a chip at the top of the page, for simplicities sake:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:duck
What I want to achieve is when I tap the icon that the content shows:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:duck
content: Your bathtub is ready...
I’ve tried a bunch of things but really cannot get this working, any pointers would be great.
hey guys, is there a way to get rid of the stop button on the first card without modifying the entites?
EDIT, in case anyone has the same problem:
card_mod:
style:
mushroom-cover-buttons-control$:
mushroom-button:nth-child(2)$: |
:host {
display: none;
}
Create an input boolean (toggle) helper. Set the input boolean as the entity in your chip.
Then put something like this in the content section of your template chip:
- type: template
entity: input_boolean.yourhelper
icon: mdi:duck
content: |-
{% if is_state('input_boolean.yourhelper','on') %}
Your bathtub is ready...
{% else %}
{% endif %}
Now the text will show when the boolean is on, but it wont when its off. And you can toggle the state of the boolen by pressing the chip.
1 Like
Amazing!
Thanks so much
1 Like
Can Nobody help here?!?!?
is it mushroom template card your changing secondary color ?
for template card secondary color would be
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-color: red;
}
and not
ha-card
Yes it is.
Sorry I did Not Posted the whole Code. Here it is.
- type: custom:mushroom-template-card
primary: Pooltemperatur
secondary: '{{states("sensor.pooltemperatur")}} °C'
entity: sensor.pooltemperatur
icon: mdi:fan
icon_color: |
{% if is_state('climate.inverter_pool_warmepumpe','heat') %}
orange
{% else %}
grey
{% endif %}
card_mod:
style:
mushroom-state-info $: |
.container {
--card-primary-font-size: 18px !important;
--card-primary-color: black;
--card-secondary-font-size: 20px;
--card-secondary-color: black;
flex-direction: row !important;
align-items: baseline !important;
gap: 80px;
}
mushroom-shape-icon$: |
.shape {
--shape-color: transparent;
}
.: |
ha-card {
zoom: 100%;
font-size: 15px%;
margin-left: 150%;
margin-top: -150%;
width: 85%;
height: fit-content !important;
background-color: transparent !important;
opacity: '';
border: transparent;
{% set state = states('sensor.pooltemperatur') | int %}
{% if state <= 36 %}
--card-secondary-color: red;
{% elif state <= 27 %}
--card-secondary-color: yellow;
{% elif state <= 24 %}
--card-secondary-color: blue;
{% endif %}
}
remove it from ha-card and move to here
card_mod:
style:
mushroom-state-info $: |
.container {
--card-primary-font-size: 18px !important;
--card-secondary-font-size: 20px;
{% set state = states('sensor.lounge_temperature') | int %}
{% if state <= 36 %}
--card-secondary-color: red;
{% elif state <= 27 %}
--card-secondary-color: yellow;
{% elif state <= 24 %}
--card-secondary-color: blue;
{% endif %}
flex-direction: row !important;
align-items: baseline !important;
gap: 80px;
}
Hi all, im using stackin with mushroom cards but finding im getting a large white space at the bottom of my cards. Sew below code im using. Ive tried searching this forum but couldnt find anything easily. Im sure some wizard on here will know how to fix
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
name: Lounge
icon: mdi:sofa
entity: light.lounge
icon_animation: true
- type: custom:mushroom-entity-card
entity: light.lounge_lamp
tap_action:
action: toggle
primary_info: none
secondary_info: none
icon: mdi:floor-lamp
icon_color: orange
card_mod:
style: |
ha-card {
position: absolute;
top: 0px;
right: 0px;
--ha-card-border-width: 0px;
}
- type: custom:mushroom-entity-card
entity: light.table_lamp3
tap_action:
action: toggle
primary_info: none
secondary_info: none
icon: mdi:lamp
icon_color: orange
card_mod:
style: |
ha-card {
position: absolute;
top: 0px;
right: 50px;
--ha-card-border-width: 0px;
}
Oh man, ok, it works Yes… Thank you.
May you can help with following,
I try to aß add in the secondary info, 2 Sensors,
I know I can add „|“ to Show, But it Looks Not good.
Is it possible to add blank Lines within the seconday Info?
And is it possible to add 2 icons in the Same line ?
Do you know what I mean?
Like this:
secondary: Icon1 '{{states("sensor.pooltemperatur")}} °C'|Icon2 ‘(sensor.xyz)}}
you could do it in a markdown card and remove the secondary from the template card and use stack-in-card
like this.
type: markdown
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
margin-left: 30px;
margin-top: -50px;
}
content: >
<ha-icon icon="mdi:thermometer"></ha-icon>{{
states('sensor.living_room_temperature') }}° | <ha-icon
icon="mdi:water-percent"></ha-icon> {{
states('sensor.living_room_humidity')}}%
I find this happens occasionally with the stack-in-card, but haven’t really dove in to find a proper solution. I usually add some card_mod to the stack-in-card to reduce the height of the overall card like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
name: Lounge
icon: mdi:sofa
entity: light.lounge
icon_animation: true
- type: custom:mushroom-entity-card
entity: light.lounge_lamp
tap_action:
action: toggle
primary_info: none
secondary_info: none
icon: mdi:floor-lamp
icon_color: orange
card_mod:
style: |
ha-card {
position: absolute;
top: 0px;
right: 0px;
--ha-card-border-width: 0px;
}
- type: custom:mushroom-entity-card
entity: light.table_lamp3
tap_action:
action: toggle
primary_info: none
secondary_info: none
icon: mdi:lamp
icon_color: orange
card_mod:
style: |
ha-card {
position: absolute;
top: 0px;
right: 50px;
--ha-card-border-width: 0px;
}
card_mod:
style: |
ha-card {
height: 66px !important
}