Nice. I need to finish first mobile dashboard and tablet is next. Good job.
Waiting for next season I created formula 1 page using formula 1 api and of course mushroom cards and your help.
6 Likes
Looks soo good thanks! I’m having the same issue as @Boostin4HP with mobile, on page load the background will appear for a brief second before disappearing
1 Like
Hi there @Boostin4HP . Just came across your post. Could you please share your code for your garage door card? Would really appreciate it!
Is there a way to use either a jpg from your www folder or the person entity picture as the picture in the Person Card? I have added both and it comes up with a blank picture on the card…
1 Like
Thank you rhysb! forwards was the magic word missing. The result is nearly perfect - is it possible to get the last frame directly? The full icon is visible for just a moment when refreshing the page.
--icon-animation: no-fountain 1ms linear forwards;
1 Like
Hello everyone, maybe some one can help?
I have a slider entity for a heat pump.
type: entities
entities:
- entity: number.operating_mode_42744
The slider moves through different modes 0, 1, 2
I have tried to create a mushroom card to display the state or value of the slider but its not working.
type: custom:mushroom-template-card
icon_color: |-
{% set state=states(entity) %}
{% if state=='0' %}
green
{% elif state=='1' %}
orange
{% elif state=='2' %}
red
{% else %}
grey
{% endif %}
icon: |-
{% set state=states(entity) %}
{% if state=='0' %}
mdi:heat-pump
{% elif state=='1' %}
mdi:heat-pump-outline
{% else %}
mdi:radiator
{% endif %}
secondary: |2-
{% set d ={
'0': 'Auto',
'1': 'Manual',
'2': 'Add. Heat Only'
} %}
{{ d.get(states(entity)) }}
primary: Operating Mode
hold_action:
action: none
double_tap_action:
action: none
entity: number.operating_mode_42744
tap_action:
action: none
Any ideas where I am going wrong?
Is there a way to build a slider for this entity in mushroom card?
For Chips it should just be animation, not --icon-animation. There shouldn’t be any space after rotate…
What Theme and Font do you use? I like it a lot
Works like a charm, but how to skip the badge if the value of the content is 0? So the devices that are off are not shown?
1 Like
Sure, it is only an picture elements with elements above it.
type: picture-elements
elements:
- type: custom:simple-weather-card
style:
top: 15%
left: 50%
entity: weather.home
name: Clima
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: none;
}
.weather__icon {
padding-right: 50px;
{% set condition = states(config.entity) %}
{% if condition == 'partlycloudy' and is_state('sun.sun', 'below_horizon') %}
{% set condition = condition + '-night' %}
{% endif %}
background-image: url("/local/weather/{{ condition }}.svg") !important;
}
.weather__icon--small {
background-image: url("/local/weather/rainy.svg") !important;
}
.weather__info {
color: white;
font-size: 19px;
}
- type: state-label
tap_action:
action: toggle
entity: sensor.u_s_air_quality_index
style:
top: 30%
left: 17%
width: 15%
color: white
- type: custom:mushroom-chips-card
alignment: start
style:
top: 55%
left: 35%
chips:
- type: conditional
conditions:
- entity: group.portas_casa
state: 'on'
chip:
type: template
content: >-
{{ expand('group.portas_casa') | selectattr('state', 'eq', 'on') |
list | count }}
icon: mdi:door-open
icon_color: red
entity: group.porta_casa
tap_action:
action: more-info
- type: template
content: >-
{{ expand('group.persianas_casa') | selectattr('state', 'eq', 'open')
| list | count }}
icon: mdi:window-open
icon_color: light-blue
entity: group.persianas_casa
tap_action:
action: more-info
- type: template
content: >-
{{ expand('group.media_players') | selectattr('state', 'eq',
'playing') | list | count }}
icon: mdi:music
icon_color: light-blue
entity: group.media_players
tap_action:
action: more-info
- type: conditional
conditions:
- entity: group.casa_geral
state: 'on'
chip:
type: template
content: >-
{{ expand('group.casa_geral') | selectattr('state', 'eq', 'on') |
list | count }}
icon: mdi:lightbulb
icon_color: yellow
entity: group.casa_geral
tap_action:
action: more-info
hold_action:
action: toggle
- type: template
double_tap_action:
action: more-info
entity: lock.porta_frente
icon: mdi:lock
icon_color: |-
{% set state = states(entity) %}
{% if state == 'locked' %}
green
{% elif state == 'unlocked' %}
red
{% elif state == 'unlocking' %}
yellow
{% else %}
yellow
{% endif %}
content: |-
{% set state = states(entity) %}
{% if state == 'locked' %}
Fechado
{% elif state == 'unlocked' %}
Aberto
{% elif state == 'unlocking' %}
Abrindo
{% else %}
Fechando
{% endif %}
tap_action:
action: toggle
image: local/imgs/backgrounds/background-imgkit.jpeg
card_mod:
style: |
ha-card {
width: 107%;
margin: -9px 0px 0px -13px;
border-radius: 5px 5px 0px 0px;
box-shadow: none;
--ha-card-border-width: 0;
margin-bottom: calc(-1 * var(--ha-card-border-radius, 12px));
--paper-item-icon-active-color: rgb(var(--rgb-brown-color));
--mdc-icon-size: 120%;
}
ha-card:after {
content: "";
position: absolute;
background-color: var(--primary-background-color);
height: calc(2.3 * var(--ha-card-border-radius, 12px));
width: 100%;
bottom: calc(-1 * var(--ha-card-border-radius, 12px));
left: 0px;
border-top-left-radius: var(--ha-card-border-radius, 12px);
border-top-right-radius: var(--ha-card-border-radius, 12px);
box-shadow: var(--ha-card-box-shadow) inset;
}
Just seen your christmas tree and its fantastic.
How can I get rid of the grey lines around it please ?
I saw this on the weather card I downloaded other day too
Im going to try and get this into an entity card 
Thanks in advance
Martyn
I had the border issue also, what I done was add the border option to ha-card ie;
ha-card {
width: 66px;
top: -66px;
border: 0px;
}
Set your theme as “Mushroom Shadow” that should remove them
2 Likes
Hey,
what is your result for {{ number.operating_mode_42744 }} under template in developer options?
Maybe you get 0.0 instead of 0 and there is the problem. Then you have to add .0 behind every number in your conditions.
Here is your full code:
type: custom:mushroom-template-card
icon_color: |-
{% set state=states(entity) %}
{% if state=='0.0' %}
green
{% elif state=='1.0' %}
orange
{% elif state=='2.0' %}
red
{% else %}
grey
{% endif %}
icon: |-
{% set state=states(entity) %}
{% if state=='0.0' %}
mdi:heat-pump
{% elif state=='1.0' %}
mdi:heat-pump-outline
{% else %}
mdi:radiator
{% endif %}
secondary: |2-
{% set d ={
'0.0': 'Auto',
'1.0': 'Manual',
'2.0': 'Add. Heat Only'
} %}
{{ d.get(states(entity)) }}
primary: Operating Mode
hold_action:
action: none
double_tap_action:
action: none
entity: number.operating_mode_42744
tap_action:
action: none
1 Like
Thanks Steffen, that worked!
But why? Aren’t those values on the slider absolute?
Also any suggestions on the slider? (alternatives)
It’s called Noctis.
Theme below. I've made some changes but not sure what does where, you can also search for it on the forum
noctis:
mode: dark
# Fonts
primary-font-family: 'Raleway,sans-serif'
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
ha-card-header-font-family: "var(--primary-font-family)"
ha-card-border-width: "0px" ## to avoid borders
# Text
text-color: '#ffffff'
primary-text-color: 'var(--text-color)'
text-primary-color: 'var(--text-color)'
secondary-text-color: "#BAC0C6"
text-medium-light-color: '#A0A2A8'
text-medium-color: '#80828A'
disabled-text-color: '#626569'
primary-color: 'var(--accent-color)'
# Text Fields an Dropdown
mdc-text-field-fill-color: 'var(--background-color)'
mdc-text-field-ink-color: 'var(--text-color)'
mdc-select-fill-color: 'var(--background-color)'
mdc-text-field-label-ink-color: 'var(--secondary-text-color)'
input-fill-color: 'var(--background-color)'
input-ink-color: 'var(--text-color)'
input-label-ink-color: 'var(--text-color)'
input-disabled-fill-color: 'var(--background-color)'
input-disabled-ink-color: 'var(--disabled-text-color)'
input-disabled-label-ink-color: 'var(--disabled-text-color)'
input-idle-line-color: 'var(--background-color)'
input-dropdown-icon-color: 'var(--secondary-text-color)'
input-hover-line-color: 'var(--primary-color)'
code-editor-background-color: '#222c40'
codemirror-property: 'var(--accent-color)'
# Main Colors
app-header-background-color: '#242e42'
header-height: 48px
accent-color: '#1A89F5'
accent-medium-color: 'var(--accent-color)'
# Background
background-color: '#242e42'
primary-background-color: 'var(--background-color)'
background-color-2: '#20293c'
secondary-background-color: 'none'
markdown-code-background-color: 'var(--background-color)'
# Card
card-background-color: 'var(--ha-card-background)'
ha-card-background: 'rgba(43,55,78,0.7)' #'linear-gradient(145deg, #273246, #2e3b53)' #ha-card-background: 'rgba(43,55,78,1)' is original
ha-card-box-shadow: "3px 3px 13px -6px rgba(17,35,52,1)"
ha-card-border-radius: "5px"
border-color: 'none'
# Dialog
ha-dialog-border-radius: "5px"
# Icons
paper-item-icon-color: '#EBEBEB'
paper-item-icon-active-color: 'var(--accent-color)'
# Sidebar
sidebar-background-color: 'var(--background-color)'
sidebar-icon-color: '#98a7b9'
sidebar-selected-icon-color: 'var(--accent-color)'
sidebar-selected-text-color: 'var(--text-color)'
paper-listbox-background-color: 'var(--sidebar-background-color)'
divider-color: 'var(--background-color)'
light-primary-color: 'var(--ha-card-background)'
# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--background-color-2)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'var(--background-color-2)'
# Toggle:
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
mdc-theme-primary: 'var(--accent-color)'
# Switch
switch-unchecked-color: '#70889e'
switch-checked-button-color: 'var(--accent-color)'
switch-unchecked-track-color: 'var(--background-color-2)'
switch-checked-track-color: 'var(--background-color-2)'
# Radio Button
paper-radio-button-checked-color: 'var(--accent-color)'
# Popups
more-info-header-background: 'var(--secondary-background-color)'
paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'
# Tables
table-row-background-color: 'var(--background-color)'
table-row-alternative-background-color: 'var(--ha-card-background)'
# Badges
label-badge-background-color: 'var(--background-color)'
label-badge-text-color: 'var(--text-primary-color)'
label-badge-red: 'rgba(73,85,108,1)'
label-badge-blue: 'rgba(26,137,245,1)'
label-badge-green: 'rgba(0,202,139,1)'
label-badge-yellow: 'rgba(222,176,107,1)'
paper-input-container-focus-color: 'var(--accent-color)'
# Custom Header
ch-background: 'var(--background-color)'
ch-active-tab-color: 'var(--accent-color)'
ch-notification-dot-color: 'var(--accent-color)'
ch-all-tabs-color: 'var(--sidebar-icon-color)'
ch-tab-indicator-color: 'var(--accent-color)'
# Mini Mediaplayer
mini-media-player-base-color: 'var(--text-color)'
mini-media-player-accent-color: 'var(--accent-color)'
# Alarm
alarm-color-armed: 'rgba(247,53,67,1)'
#browser_mod.popup
dialog-backdrop-filter: blur(2em) brightness(0.75)
popup-background-color: rgba(34,38,39,0.9)
popup-border-width: 1px
popup-border-radius: 1em
tablet-popup-header-color: rgba(200, 218, 222, 0.05)
tablet-popup-content-padding: 1.4em 2.2em 1.6em 1.5em
tablet-popup-button-padding: 0.1em 2em 1.8em 2em
tablet-popup-border-style: 1.5px solid rgba(0,0,0,0.2)
#Card-Mod #####################################################################
#Uncomment the Code below if you have card-mod installed and want blur effect #
###############################################################################
card-mod-theme: noctis
card-mod-more-info-yaml: |
$: |
.mdc-dialog .mdc-dialog__scrim {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
background: rgba(0,0,0,.6);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
box-shadow: none !important;
border-radius: var(--ha-card-border-radius);
}
.: |
:host {
--ha-card-box-shadow: none;
}
#######################
1 Like
@rhysb - If you ever do a Part 6 of your amazing animated icons, can I kindly request some that could be used for these scenes?
Having some animated feedback when clicked would be great for these, since obviously they don’t change colour when turning on/off like an entity does.
Thanks, how many pictures for the weather do you have? (conditions)
