awesome thanks mate. I modified this a bit to fit my needs with picture
here the code if s.o is interested
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
picture: ‘image_path‘
icon: none
entity: entity.entity
icon_color: none
primary: Harmony
secondary: '{{ states(''entity.entity'') }}'
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 18px !important;
position: relative;
top: -80px;
left: -105px;
overflow: visible !important;
color: var(primary-text-color);
font-weight: bold;
text-overflow: ellipsis;
}
.secondary {
font-size: 14px !important;
position: relative;
overflow: visible !important;
top: -85px;
left: -105px;
}
mushroom-shape-avatar$: |
.picture {
height: 100px !important;
width: 100px !important;
border-radius: 0px !important;
margin-top: 50px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
border-radius: 0px !important;
}
.: |
ha-card {
margin-top: 55px;
--secondary-text-color: grey;
background: none;
}
:host {
--mush-icon-size: 100px;
}
- type: custom:mushroom-template-card
primary: none
icon_color: |-
{% if is_state(entity, 'on') %}
var(--color-blue)
{%else%}
disabled
{% endif %}
icon: |-
{% if is_state(entity, 'on') %}
mdi:television
{%else%}
mdi:television-off
{% endif %}
secondary: none
entity: entity.entity
tap_action:
action: call-service
service: switch.toggle
data: {}
target:
entity_id: entity.entity
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 35px;
height: 35px;
}
.: |
ha-card {
width: 55px;
margin-left: 70%;
top: -180px;
background: none;
}
- type: custom:mushroom-template-card
primary: none
entity: entity.entity
icon: |-
{% if is_state(entity, 'on') %}
si:nvidia
{%elif is_state(entity, 'off') %}
si:nvidia
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
var(--color-green)
{%elif is_state(entity, 'off') %}
disabled
{% endif %}
secondary: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 35px;
height: 35px;
}
.: |
ha-card {
width: 55px;
margin-left: 70%;
top: -200px;
background: none;
}
- type: custom:mushroom-template-card
primary: none
entity: entity.entity
tap_action:
action: toggle
icon: |-
{% if is_state(entity, 'on') %}
mdi:netflix
{%elif is_state(entity, 'off') %}
mdi:netflix
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
var(--color-red)
{%elif is_state(entity, 'off') %}
disabled
{% endif %}
secondary: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 35px;
height: 35px;
}
.: |
ha-card {
width: 55px;
margin-left: 70%;
top: -220px;
background: none;
}
- type: custom:mushroom-template-card
primary: none
entity: entity.entity
tap_action:
action: toggle
icon: |-
{% if is_state(entity, 'on') %}
mdi:sony-playstation
{%elif is_state(entity, 'off') %}
mdi:sony-playstation
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
var(--color-purple)
{%elif is_state(entity, 'off') %}
disabled
{% endif %}
secondary: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 35px;
height: 35px;
}
.: |
ha-card {
width: 55px;
margin-left: 70%;
top: -240px;
background: none;
}
card_mod:
style: |
ha-card {
height: 192px !important;
width: 192px !important;
}
11 Likes
Djowie
December 5, 2022, 2:51pm
4263
Would it be possible to get this into a chip?
andiukas
December 5, 2022, 3:41pm
4264
Hi, how tivimate work in HA? Share please code
Hi
Been playing with with animated chips, but having problemas to make them work.
Any sugestions on this code?
Thanks in advance.
type: custom:mushroom-chips-card
chips:
- type: template
entity: fan.luz_e_exaustor_wc_suite_channel_1
icon: mdi:fan
icon_color: green
tap_action:
action: toggle
double_tap_action:
action: none
- type: template
entity: binary_sensor.lumi_lumi_sensor_motion_aq2_occupancy
icon: mdi:motion-sensor
icon_color: orange
tap_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{{ 'animation: rotation 1s linear infinite;' if is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_occupancy', 'on') }}
}
@keyframes rotation {
0% {
transform: rotate (0deg);
}
100% {
transform: rotate (360deg);
}
}
mushroom-template-chip:nth-child(2)$: |
ha-icon {
--icon-animation: clip 2s linear infinite;
}
@keyframes clip {
50% { clip-path: polygon(0 0, 58% 1%, 100% 100%, 0% 100%); }
}
Roy75
December 5, 2022, 6:14pm
4266
Nice! Will you share the first part of your code. Weather and chips?
Tyfoon
December 5, 2022, 8:29pm
4267
Experimenting with the title card.
Is there are way I can get the temp/humidity in the same small font next to the main title (bathroom) , preferably with temp/humidity outlined to the right?
Sylwester
December 5, 2022, 11:48pm
4268
Nice. I need to finish first mobile dashboard and tablet is next. Good job.
Sylwester
December 6, 2022, 12:04am
4269
Waiting for next season I created formula 1 page using formula 1 api and of course mushroom cards and your help.
6 Likes
theandouz
December 6, 2022, 2:04am
4270
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
davidcom2
December 6, 2022, 2:07am
4271
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
wgumaa
December 6, 2022, 8:28am
4274
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?
rhysb
December 6, 2022, 9:20am
4275
For Chips it should just be animation, not --icon-animation. There shouldn’t be any space after rotate…
Mosher
December 6, 2022, 10:26am
4276
What Theme and Font do you use? I like it a lot
jvalst
December 6, 2022, 12:07pm
4277
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;
}
dicko
December 6, 2022, 1:01pm
4279
@rhysb
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
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;
}
Stuartie
December 6, 2022, 2:03pm
4281
Set your theme as “Mushroom Shadow” that should remove them
2 Likes
