Yes ofcourse. I had some problems with copy/paste but here it is
type: vertical-stack
cards:
- type: custom:mushroom-template-card
title: null
subtitle: null
alignment: justify
picture: /local/Jayden.jpg
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.weerstation_kamer_jayden_temperature
icon_color: red
- type: entity
entity: sensor.weerstation_kamer_jayden_humidity
icon_color: indigo
- type: entity
entity: sensor.weerstation_kamer_jayden_carbon_dioxide
icon_color: green
- type: template
icon: |-
{% if is_state('binary_sensor.openclose_14', 'closed') %}
mdi:window-closed
{% else %}
mdi:window-open
{% endif %}
content: |-
{% if is_state('binary_sensor.openclose_14', 'off') %}
Closed
{% else %}
Open
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.openclose_14', 'off') %}
green
{% else %}
red
{% endif %}
tap_action:
action: more-info
entity: binary.sensor.openclose_14
alignment: start
- type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.zonwering_links
name: Links
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.zonwering_rechts
name: Rechts
show_buttons_control: true
For some reason my layout broke and the black text is now light grey and I can’t seem to change it. Any ideas? Since it is showing latest lightnings I haven’t used the card for several months so no clue what version broke this.
type: conditional
conditions:
- entity: sensor.blitzortung_lightning_counter
state_not: '0'
- condition: state
entity: sensor.blitzortung_lightning_counter
state_not: unavailable
card:
type: custom:mushroom-template-card
primary: '{{ states("sensor.blitzortung_lightning_counter") }} blixtnedslag'
secondary: >-
Senast {{states("sensor.blitzortung_lightning_distance").replace('unknown',
'0') }} km bort kl.
{{states("input_datetime.senaste_blixtnedslag").replace(":00", "") }},
närmaste {{states("input_number.narmaste_blixtnedslag_km") }} km.
icon: mdi:weather-lightning
icon_color: red
entity: sensor.blitzortung_lightning_counter
hold_action:
action: more-info
tap_action:
action: url
url_path: https://map.blitzortung.org/#10/xxx
card_mod:
style:
ha-markdown $: ''
.: |
ha-card {
margin: 0px 15px 17px 15px;
--ha-card-background: rgba(250, 250, 250, 1.0);
color: #404040;
font-weight: 300;
text-align: left;
border-radius: 15px;
--primary-text-color: #404040;
--secondary-text-color: #404040;
--mdc-icon-size: 35px;
}
mushroom-shape-icon {
--icon-color: red !important;
}
}
Frosty
May 27, 2024, 5:41pm
692
if you start with this let me know how it looks will need some modifications regarding margins.
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
alignment: justify
picture: /local/Jayden.jpg
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.weerstation_kamer_jayden_temperature
icon_color: red
- type: entity
entity: sensor.weerstation_kamer_jayden_humidity
icon_color: indigo
- type: entity
entity: sensor.weerstation_kamer_jayden_carbon_dioxide
icon_color: green
- type: template
icon: |-
{% if is_state('binary_sensor.openclose_14', 'closed') %}
mdi:window-closed
{% else %}
mdi:window-open
{% endif %}
content: |-
{% if is_state('binary_sensor.openclose_14', 'off') %}
Closed
{% else %}
Open
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.openclose_14', 'off') %}
green
{% else %}
red
{% endif %}
tap_action:
action: more-info
entity: binary.sensor.openclose_14
alignment: start
- type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
card_mod:
style: |
ha-card {
border: none;
}
entity: cover.zonwering_links
name: Links
show_buttons_control: true
- type: custom:mushroom-cover-card
card_mod:
style: |
ha-card {
border: none;
}
entity: cover.zonwering_rechts
name: Rechts
show_buttons_control: true
1 Like
Frosty
May 27, 2024, 5:51pm
693
you will have to use this for font colour on a template card.
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
--card-secondary-color: orange;
}
1 Like
The hero of the day - thanks a million!
1 Like
Frosty
May 27, 2024, 5:58pm
695
future reference:here
1 Like
Hi all,
custom:mushroom-template-card
icon: none
primary: Gradient
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(farthest-side, rgb(var(--rgb-blue)) 94%, transparent) top/4px 4px no-repeat, conic-gradient(transparent 30%, rgb(var(--rgb-blue)));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
--shape-animation: spin 1s infinite linear;
}
it works, however I would like to have the icon inside the icon-element remain static. Now it’s rotating everything… how would that work?
icon: mdi:shield-account-variant-outline
icon_color: grey
Thanks for the recommendations
Seems to working well!
My boy loves trains https://ibb.co/WfHCG5f
1 Like
Frosty
May 27, 2024, 7:19pm
698
brilliant, sorry didn’t know it was an animated gif, that’s why I moved the chips next to the picture.
Thnx once again, you helped me a lot!
Frosty
May 27, 2024, 9:21pm
700
this works. I combined it with another animation.
type: custom:mushroom-template-card
icon: mdi:home
primary: Gradient
icon_color: blue
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.shape:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
background: radial-gradient(farthest-side, rgb(var(--rgb-blue)) 94%, transparent) top/4px 4px no-repeat, conic-gradient(transparent 30%, rgb(var(--rgb-blue)));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
--shape-animation: spin 1s infinite linear;
border-radius:50%;
animation: spin 2s ease infinite;
}
@keyframes circle {
0% {transform: rotate(0deg);}
100% {transform:rotate(360deg);}
}
1 Like
Does not getting an answer from anyone mean that it is not possible to get visual feedback when pressing the button on my cover card? Or is there something wrong with my question?
Cool, it works thanks a lot. Step closer in building some nice Hue App Security look a like lovelaces
Frosty
May 28, 2024, 1:14pm
703
@KeningGruttePier
actually you can remove that bit, you don’t need it
xzelz
May 28, 2024, 5:31pm
704
Hi all, sorry if my question is redundant (I tried to search in this topic and pt1 and didn’t see any similar question comes up). Is there any way to replicate this UI Lovelace Minimalist card for rooms that include the light toggle like this? Tya!
Edited: Nvm I found a similar post in the pt1 and made some modifications for sizes and added animation, here is the code if anyone needs it:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:pot-steam
icon_color: |
{% if is_state('light.kitchen_dimmer', 'on') %}
amber
{% else %}
#03A9F4
{% endif %}
primary: Kitchen
secondary: '{{ states(''sensor.living_room_temperature'')|round(2) }}°f'
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/kitchen
double_tap_action:
action: toggle
hold_action:
action: none
badge_icon: |
#{% if is_state('light.kitchen_dimmer', 'on') %}
# mdi:motion-outline
#{% else %}
# mdi:lightbulb
#{% endif %}
badge_color: |
#{% if is_state('light.kitchen_dimmer', 'on') %}
# blue
#{% else %}
# grey
#{% endif %}
fill_container: false
multiline_secondary: false
entity: light.kitchen_dimmer
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -45px; /* Adjusted for new height */
left: -140px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -45px; /* Adjusted for new height */
left: -140px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -40px;
top: 40px; /* Adjusted for new height */
}
.: |
:host {
--mush-icon-size: 130px; /* Adjusted for new height */
}
ha-card {
background: none;
}
ha-state-icon {
animation: steam 2s ease-in-out infinite;
}
@keyframes steam {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: inset(39% 0 0 0); }
}
ha-card:active {
transform: scale(0.975);
transition: 0s;
style: |
mushroom-badge-icon {
left: 135px;
top: 8px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
card_mod:
style: |
ha-card {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-height: 5px;
--chip-padding: 5em
}
- type: light
entity: light.kitchen_dimmer
card_mod:
style: |
ha-card {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-icon-size: 20px;
--chip-font-size: 0;
}
- type: template
card_mod:
style: |
ha-card {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-height: 54px;
}
- type: entity
entity: sensor.mudroom_5_1min
icon: mdi:lightning-bolt
alignment: end
card_mod:
style:
.: |
ha-card {
width: 40%;
margin-left: 59%;
top: -160px;
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-icon-size: 18px;
}
card_mod:
style: |
ha-card {
height: 150px;
margin-left: auto;
margin-right: auto;
border-style: none;
box-shadow: none;
margin-top: auto;
}
4 Likes
ilgiurgi
May 28, 2024, 6:50pm
705
Can someone help me fix the border of this card please?
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.dreamscreen
show_brightness_control: true
collapsible_controls: true
show_color_control: true
icon: mdi:television-ambient-light
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.dreamscreen_mode_video
icon_color: red
icon: mdi:movie
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(var(--rgb-red), 0.2)' if is_state('light.dreamscreen', 'on') else 'rgba(var(--rgb-disabled), 0.1)' }};
}
- type: entity
entity: switch.dreamscreen_mode_music
icon_color: green
icon: mdi:waveform
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(var(--rgb-green), 0.2)' if is_state('light.dreamscreen', 'on') else 'rgba(var(--rgb-disabled), 0.1)' }};
}
- type: entity
entity: switch.dreamscreen_mode_ambient
icon_color: blue
icon: mdi:lightbulb
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(var(--rgb-blue), 0.2)' if is_state('light.dreamscreen', 'on') else 'rgba(var(--rgb-disabled), 0.1)' }};
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
1umnyy
May 29, 2024, 11:20am
706
Can you tell me how to change the size of the chips? And can you tell me if I did something wrong with the grid style?
type: custom:button-card
name: Гостиная
icon: mdi:sofa
custom_fields:
temp: >
[[[ return states['sensor.klimat_vannaia_temperature'].state + '°C' ]]]
hum: >
[[[ return states['sensor.klimat_vannaia_humidity'].state + '%' ]]]
btn1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap-action:
action: toggle
icon: mdi:lamp
entity: light.svet_zal_l2
card mod:
style: >
ha-card {
--chip-background: {{ "rgba(138, 205, 215, 1)' if
is_state('light.svet_zal_l2', 'on')
padding: 5px!important:
border-radius: 100px|!important;
}
- type: template
tap-action:
action: toggle
icon: mdi:lamp
entity: light.svet_zal_l1
card mod:
style: >
ha-card {
--chip-background: {{ "rgba(138, 205, 215, 1)' if
is_state('light.svet_zal_l1', 'on')
padding: 5px!important:
border-radius: 100px|!important;
- width: 170px
- height: 170px
}
styles:
grid:
- grid-template-areas: '"n btn1" "temp btn1" "hum btn1"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content min-content
card:
- padding: 22px 8px 22px 22px
- height: 200px
custom_fields:
temp:
- position: absolute
- font-size: 20px
- opacity: '0.7'
- left: 24px
hum:
- position: absolute
- font-size: 24px
- opacity: '0.7'
- left: 140px
btn1:
- position: absolute
- justify-content: end
- padding-left: 6px
- top: 140px
- width: 200px
- height: 10px
name:
- justify-self: start
- align-self: start
- font-size: 45px
- font-weight: 450
- color: black
img_cell:
- justify-content: start
- position: absolute
- width: 170px
- height: 170px
- right: -18px
- top: -18px
- margin: 0 0 -20px -20px
- background: '#FFC47E'
- border-radius: 500px
icon:
- position: relative
- width: 90px
- color: black
- opacity: '0.5'
Frosty
May 29, 2024, 12:58pm
707
you can use these to change chip size, font , etc
type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-icon-size: 30px;
--chip-height: 50px;
--chip-font-size: 50px;
}
chips:
- type: entity
entity: person.xxxx
1umnyy
May 29, 2024, 3:42pm
708
Nothing much has changed.
Frosty
May 29, 2024, 5:44pm
709
from the picture it looks like the chips are bigger
it works fine my end.
type: custom:button-card
name: Гостиная
icon: mdi:sofa
custom_fields:
temp: |
[[[ return states['sensor.landing_temperature'].state + '°C' ]]]
hum: |
[[[ return states['sensor.landing_humidity'].state + '%' ]]]
btn1:
card:
type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-icon-size: 50px;
}
chips:
- type: template
tap-action:
action: toggle
icon: mdi:lamp
entity: light.svet_zal_l2
card mod:
style: >
ha-card { --chip-background: {{ "rgba(138, 205, 215, 1)' if
is_state('light.svet_zal_l2', 'on') padding: 5px!important:
border-radius: 100px|!important; }
- type: template
tap-action:
action: toggle
icon: mdi:lamp
entity: light.svet_zal_l1
card mod:
style: >
ha-card { --chip-background: {{ "rgba(138, 205, 215, 1)' if
is_state('light.svet_zal_l1', 'on') padding: 5px!important:
border-radius: 100px|!important; - width: 170px - height: 170px }
styles:
grid:
- grid-template-areas: '"n btn1" "temp btn1" "hum btn1"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content min-content
card:
- padding: 22px 8px 22px 22px
- height: 200px
custom_fields:
temp:
- position: absolute
- font-size: 20px
- opacity: '0.7'
- left: 24px
hum:
- position: absolute
- font-size: 24px
- opacity: '0.7'
- left: 140px
btn1:
- position: absolute
- justify-content: end
- padding-left: 6px
- top: 140px
- width: 200px
- height: 10px
name:
- justify-self: start
- align-self: start
- font-size: 45px
- font-weight: 450
- color: black
img_cell:
- justify-content: start
- position: absolute
- width: 170px
- height: 170px
- right: '-18px'
- top: '-18px'
- margin: 0 0 -20px -20px
- background: '#FFC47E'
- border-radius: 500px
icon:
- position: relative
- width: 90px
- color: black
- opacity: '0.5'
