Did you clear your browser history and log out/ log back in?
If you did, please post a card code thatās not operable.
Yes did reset the frontend cash in the iOS app.
I have it with the mushroom climate card with the hvac modes.
This:
- type: template
entity: light.sonoff_a480080947
name: Garage switch
layout: vertical
primary_info: name
tap_action:
action: toggle
secondary_info: none
fill_container: false
icon: mdi:doorbell
displays fine ( though without ānameā displayed) but if I choose to use the alternative ācustom:mushroom-lock-cardā to match other cards on the dashboard it will not display.
Is it possible to use ācustom:mushroom-lock-cardā in this context?
Anyone who can point me in the right direction?
Is possible change color by the different number of the entity? For example
.
{% set temp = states(entity) | float%} {% if temp < 17 %} blue {% elif temp <18 %} light-green {% elif temp <19 %} lime {% elif temp < 26 %} green {% elif temp < 27 %} yellow {% elif temp < 28 %} amber {% elif temp < 29 %} orange {% elif temp < 30 %} deep-orange {% else %} red {% endif %}
.
is possible ?
Guys, I decided to use the previously proposed method to display a badge with a number, but I donāt quite understand whether a template card is needed or not?
I have a counter for closing blinds, based on it I would like to display a badge, is this possible in my code?
- type: custom:mushroom-cover-card
name: Balcony rolls
entity: cover.balcony_right
show_buttons_control: true
show_position_control: true
badge_icon: >
{% if states('counter.balcony_right_cover')|int > 0 %}
{{ 'mdi:numeric-' + states('counter.balcony_right_cover') + '-circle' }}
{% endif %}
badge_color: orange
Morning All,
Here after the Mushroom update causing quite a few issues on my dash, one issue is it has changed all the text spacing and all the text to black for anything using card mod. Can anybody help me whats wrong in my current code and Iāll update everything.
Thanks
Before: Version 3.3.0
After: Version 3.4.1
Code:
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: ''
icon: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 1px 1px 5px black;
--card-primary-font-weight: 325;
--primary-text-color: white;
--card-primary-font-size: 20px;
margin-top: -15px;
margin-bottom: -30px;
text-align: center;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.living_room_temperature
primary: '{{ states(''sensor.living_room_temperature'')| round(1) }}Ā°C'
secondary: Temperature
tap_action:
action: more-info
icon: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 325;
--primary-text-color: white;
--card-primary-font-size: 25px;
text-align: center;
margin-top: -15px;
margin-right: -100px;
}
.secondary {
text-shadow: 0px 0px 5px black;
--card-secondary-font-weight: 300;
--secondary-text-color: white;
--card-secondary-font-size: 12px;
text-align: center;
margin-top: -5px;
margin-right: -100px;
}
- type: custom:mushroom-template-card
primary: '|'
secondary: ''
icon: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 250;
--primary-text-color: white;
--card-primary-font-size: 50px;
text-align: center;
margin-top: -28px;
#margin-right: 55px;
}
- type: custom:mushroom-template-card
entity: sensor.living_room_humidity
primary: '{{ states(''sensor.living_room_humidity'')| round(1) }}%'
secondary: Humidity
tap_action:
action: more-info
icon: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 325;
--primary-text-color: white;
--card-primary-font-size: 25px;
text-align: center;
margin-top: -15px;
margin-left: -100px;
}
.secondary {
text-shadow: 0px 0px 5px black;
--card-secondary-font-weight: 300;
--secondary-text-color: white;
--card-secondary-font-size: 12px;
text-align: center;
margin-top: -5px;
margin-left: -100px;
}
card_mod:
style: |
ha-card {
padding: 0px;
box-shadow: 10px;
border-radius: 15px;
height: 80px;
background: url('/local/images/areas/livingroom.jpg') center;
background-size: cover;
background-blend-mode: overlay;
#background-color: lightgrey;
#filter: grayscale(70%);
background-color: rgba(0, 0, 0, 0.4);
}
There were changes in Mushroom 3.4.1
--card-primary-color: white;
--card-secondary-color: white;
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: ''
icon: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 1px 1px 5px black;
--card-primary-font-weight: 325;
--card-primary-color: white;
--card-primary-font-size: 20px;
margin-top: -15px;
margin-bottom: -30px;
text-align: center;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.living_room_temperature
primary: '{{ states(''sensor.living_room_temperature'')| round(1) }}Ā°C'
secondary: Temperature
tap_action:
action: more-info
icon: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 325;
--card-primary-color: white;
--card-primary-font-size: 25px;
text-align: center;
margin-top: -15px;
margin-right: -100px;
}
.secondary {
text-shadow: 0px 0px 5px black;
--card-secondary-font-weight: 300;
--card-secondary-color: white;
--card-secondary-font-size: 12px;
text-align: center;
margin-top: -5px;
margin-right: -100px;
}
- type: custom:mushroom-template-card
primary: '|'
secondary: ''
icon: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 250;
--card-primary-color: white;
--card-primary-font-size: 50px;
text-align: center;
margin-top: -28px;
#margin-right: 55px;
}
- type: custom:mushroom-template-card
entity: sensor.living_room_humidity
primary: '{{ states(''sensor.living_room_humidity'')| round(1) }}%'
secondary: Humidity
tap_action:
action: more-info
icon: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 325;
--card-primary-color: white;
--card-primary-font-size: 25px;
text-align: center;
margin-top: -15px;
margin-left: -100px;
}
.secondary {
text-shadow: 0px 0px 5px black;
--card-secondary-font-weight: 300;
--card-secondary-color: white;
--card-secondary-font-size: 12px;
text-align: center;
margin-top: -5px;
margin-left: -100px;
}
card_mod:
style: |
ha-card {
padding: 0px;
box-shadow: 10px;
border-radius: 15px;
height: 80px;
background: url('/local/images/areas/livingroom.jpg') center;
background-size: cover;
background-blend-mode: overlay;
#background-color: lightgrey;
#filter: grayscale(70%);
background-color: rgba(0, 0, 0, 0.4);
}
1 Like
Thanks for the speedy reply, that has sorted out all the colors.
Spacing is still all over the place, doesnāt look like itās taking into account the margins Iāve added.
Any suggestions?
Those are going to have to be moved to ha-card. Let me send you an example.
card_mod:
style: |
ha-card {
text-shadow: 1px 1px 5px black;
--card-primary-font-weight: 325;
--card-primary-color: white;
--card-primary-font-size: 20px;
margin-top: -15px;
margin-bottom: -30px;
text-align: center;
}
Dayum, thats me going to be busy for a while 
Thanks very much.
1 Like
If you have to split card mod functions, youād do it this way.
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 1px 1px 5px black;
--card-primary-font-weight: 325;
--card-primary-color: white;
--card-primary-font-size: 20px;
.: |
ha-card {
margin-top: -15px;
margin-bottom: -30px;
text-align: center;
}
thanks but iād like to reproduce this:
my difficulty is having that transparent space between the icon and the orange border
Please post your current code. The last code did not match the picture you posted.
type: custom:mushroom-template-card
primary: ''
secondary: '{{states(''sensor.media_valvole'')}} %'
entity: sensor.soggiorno_humidity
icon: mdi:thermometer
icon_color: yellow
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 3rem;
outline: solid 0.5rem ;
outline-offset: -0.99rem;
outline-color: rgba(255,255,255,0.1);
background:
radial-gradient(var(--card-background-color)63%, transparent 65%),
conic-gradient(rgb(var(--rgb-orange)) {{ states('sensor.media_valvole') }}% 0%, transparent 10%, rgba(var(--rgb-white),0.01) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
.: |
ha-card {
width: auto;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
background-color: transparent;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
this is my codeā¦
Hi all 
I have a silly questionā¦ Iām trying to change the icon to an actual imageā¦
Hereās the cardā¦ question is, is this possible? Currently the image is not showing upā¦
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0 !important;
margin: auto;
--card-primary-font-size: 15px !important;
--card-secondary-font-size: 15px;
}
mushroom-card {
margin: 10px;
}
primary: "Moon Phase"
secondary: " {{ states('sensor.moon_phases') }}"
icon: "{{ state_attr('sensor.moon_phases','entity_picture') }}"
tap_action:
action: none
Any input would be very helpfulā¦ not sure why Iām making this hard LOL
Hello Everyone,
Kindly guide how do I decrease the space between row-1 and row-2.
Thank you.
type: custom:stack-in-card
mode: vertical
cards:
- square: false
columns: 1
type: grid
cards:
- square: false
columns: 3
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: ''
icon: mdi:face-agent
icon_color: cyan
content: Content-1
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:9px;
--chip-icon-size:18px;
--chip-box-shadow: none;
--chip-background: none;
}
alignment: left
- type: conditional
conditions:
- condition: user
users:
- 43a1
card:
type: custom:mushroom-entity-card
entity: person
primary_info: none
secondary_info: none
layout: vertical
use_entity_picture: true
alignment: justify
- type: custom:mushroom-chips-card
chips:
- type: template
entity: ''
icon: mdi:face-agent
content: Content-2
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:9px;
--chip-icon-size:18px;
--chip-box-shadow: none;
--chip-background: none;
}
alignment: end
- type: custom:mushroom-chips-card
chips:
- type: template
entity: ''
icon: mdi:face-agent
content: Content-3
tap_action:
haptic: success
card_mod:
style: |
ha-card {
padding: 0px 5px 0px 0px !important;
--chip-font-size:7px;
--chip-icon-size:18px;
}
- type: weather
entity: weather.forecast_home
show_conditions: true
show_temperature: true
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:7px;
--chip-icon-size:17px;
}
- type: template
entity: ' '
icon: mdi:face-agent
content: Content-4
tap_action:
haptic: none
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:7px;
--chip-icon-size:18px;
}
alignment: justify
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
card_mod:
style: |
ha-card {
background-color: rgba(100,34,222, 0.1);
width: px;
height: px;
}
Need the output to be like the below image. (Below image is edited)
use picture instead of icon
2 Likes
Thank you!!! As usual I tend to make things harder than they have to be
Working perfectly!!
Thank you again!
