Can you share your code ?
Sure.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
icon: mdi:water
icon_color: blue
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: '{{states((entity))}} %'
multiline_secondary: false
entity: sensor.mfc_9340cdw_cyan_toner_remaining
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (states(config.entity)) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
- type: custom:mushroom-template-card
icon: mdi:water
icon_color: red
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: '{{states((entity))}} %'
multiline_secondary: false
entity: sensor.mfc_9340cdw_magenta_toner_remaining
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (states(config.entity)) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
- type: custom:mushroom-template-card
icon: mdi:water
icon_color: yellow
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: '{{states((entity))}} %'
multiline_secondary: false
entity: sensor.mfc_9340cdw_yellow_toner_remaining
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (states(config.entity)) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
- type: custom:mushroom-template-card
icon: mdi:water
icon_color: disabled
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: '{{states((entity))}} %'
multiline_secondary: false
entity: sensor.mfc_9340cdw_black_toner_remaining
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (states(config.entity)) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
- type: custom:mushroom-template-card
icon: mdi:printer-3d-nozzle
icon_color: green
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: '{{states((entity))}} %'
multiline_secondary: false
entity: sensor.mfc_9340cdw_fuser_remaining_life
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (states(config.entity)) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
4 Likes
Try something like this:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Master Bedroom
secondary: |-
Current {{states ('sensor.master_bedroom_current_temp')}} Ā°C
Target {{states ('sensor.master_bedroom_target_temp')}} Ā°C
icon: mdi:bed-king
layout: vertical
icon_color: yellow
multiline_secondary: true
fill_container: false
card_mod:
style: |
ha-card {
width: 200%;
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: sensor.master_bedroom_faults
icon: |-
{% set state=states('sensor.master_bedroom_faults') %}
{% if state=='Nil' %}
mdi:check
{% else %}
mdi:exclamation-thick
{% endif %}
icon_color: |-
{% set state=states('sensor.master_bedroom_faults') %}
{% if state=='Nil' %}
green
{% else %}
red
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: template
entity: sensor.master_bedroom_mode
icon: |-
{% set state=states('sensor.master_bedroom_mode') %}
{% if state=='FollowSchedule' %}
mdi:calendar-check
{% else %}
mdi:calendar-alert
{% endif %}
icon_color: |-
{% set state=states('sensor.master_bedroom_mode') %}
{% if state=='FollowSchedule' %}
green
{% else %}
red
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
position: absolute;
right: 4px;
top: calc(25% - 6px);
}
.chip-container {
flex-flow: column !important;
}
2 Likes
Could you kindly tell me how to set the measurements of a person card?
you probably have to look at ease-in and ease-out
or check what the great Another take author did:
icon_fan2:
styles:
custom_fields:
icon:
- width: 75%
- margin-left: -3%
custom_fields:
icon: >
[[[
const path = `
<circle cx="25" cy="25" r="6.6"/>
<path d="M31.9 30.4c-.5.6-1.1 1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3 0-4.5-.9-6-2.4-.9 1.1-1.6 2.3-2.3 3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7 3.9 2.4 9.8 3.1 14.1 1.9 4.6-1.3 7.9-4.7 7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17 28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0 0 1 6.4-8.4l-1.6-3.5L19 6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7 11.3-1.2 4.6.2 9.2 4.7 11.3 3.1 1.3 6.1 1.2 9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5 4.2.6 7.4 4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7 1.3 7.1 1.7 3.2.3 4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/>
`;
const style = `
<svg viewBox="0 0 50 50">
<style>
@keyframes rotate {
0% {
visibility: visible;
transform: rotate(0deg) translateZ(0);
}
100% {
transform: rotate(1080deg) translateZ(0);
}
}
.start {
animation: rotate 2.8s ease-in;
transform-origin: center;
fill: #5daeea;
visibility: hidden;
will-change: transform;
}
.on {
animation: rotate 1.8s linear infinite;
transform-origin: center;
fill: #5daeea;
animation-delay: 2.8s;
visibility: hidden;
will-change: transform;
}
.end {
animation: rotate 2.8s;
transform-origin: center;
fill: #9ca2a5;
animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
will-change: transform;
}
.start_timeout {
animation: rotate 1.8s linear infinite;
transform-origin: center;
fill: #5daeea;
visibility: hidden;
will-change: transform;
}
.end_timeout {
fill: #9ca2a5;
}
</style>
`;
if (variables.state === 'on' && variables.timeout < 2000) {
return `${style}<g class="start">${path}</g><g class="on">${path}</g></svg>`;
}
if (variables.state === 'off' && variables.timeout < 2000) {
return `${style}<g class="end">${path}</g></svg>`;
}
if (variables.state === 'on' && variables.timeout > 2000) {
return `${style}<g class="start_timeout">${path}</g></svg>`;
} else {
return `${style}<g class="end_timeout">${path}</g></svg>`;
}
]]]
1 Like
oh that is nice! thanks for sharing.
I anchored it a bit (and took out some superflous () ):
type: custom:hui-element
card_type: horizontal-stack
cards:
- entity: sensor.epson_ink_level_black
icon_color: black
<<: &card
type: custom:mushroom-template-card
icon: mdi:water
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: >
{{states(entity)}} %
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(rgb(var(--rgb-{{config.icon_color}})) {{states(config.entity)}}% 0%,
var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{config.icon_color}}), 0.2);
}
- entity: sensor.epson_ink_level_cyan
icon_color: cyan
<<: *card
- entity: sensor.epson_ink_level_magenta
icon_color: pink
<<: *card
- entity: sensor.epson_ink_level_yellow
icon_color: yellow
<<: *card
- entity: sensor.epson_ink_level_waste
icon_color: disabled
<<: *card
Didnt yet set the box shadow to none because for testing purposes I want it to stick out still (I dont want to use stack-in-card)
Note I had to use āpinkā for my magenta cartridge. Which was a bit of a surprise since magenta is an official htmlcolor name.
btw, look whatās happening, its flashing constantly
now trying to do the same for regular tile card, but that hasnāt been my luck yet. not sure how to find the correct dom on that.
type: tile
icon: mdi:water
name: ' '
vertical: true
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
ha-tile-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(rgb(var(--rgb-{{config.icon_color}})) {{states(config.entity)}}% 0%,
var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{config.icon_color}}), 0.2);
}
This is the neatest room card Iāve personally seen so far with the left icon linking to the room page and the light button turning on the room lights, perhaps with the light % changed to the room temp would be good too. Iāve seen this image posted a few times in this thread but for the life of me I canāt find if anyone has posted any yaml for it! If anyone has then Iād appreciate a link! Thanks.
Hi, first of all thanx to all of you. So many ideas and help in this forum. I have two questions
- Is it possible to reduce the space between the primary text (āServerā) and the secondary text (āUptimeā¦ā).
- Is it possible to only use the slider in a mushroom light-card. Take away everything else like icon, name etc
3 Likes
How did you create the yellow on/off tick boxes?
Thanks, iāll take a look.
Funny thing is, I also have a Roborock S7 and mine only show those options:
fan_speed_list:
- Silent
- Standard
- Medium
- Turbo
I wonder if its because my mop is detached lol, will test later.
Which integration are you using ? Xiaomi or Roborock. There are two different ones and there are differences. YOu can post questions on the Github pages and I can respond as this is a bit beyond Mushroom.
80% of all my pages have been re-styled to mushroom over the last few month. One part Iām struggling with is the custom:fold-entity-row . With āstrugglingā I mean how to āmushroomifizeā .
The custom fold entity allows you to hide many (sensor) entities under the arrow. They then can get expanded to show the underlying layer + some sorting possibilities. In some very specific use cases (in my case power draw) this can be handy.
Does anyone have any suggestion on how I can make this look better eg closer to mushroom style?
Current code:
type: vertical-stack
cards:
- type: custom:fold-entity-row
head: sensor.other_measured_devices_power
entities:
- type: custom:auto-entities
card:
type: entities
filter:
template: |
{{state_attr("sensor.other_measured_devices_power", "entities") }}
sort:
method: state
reverse: true
numeric: true
- type: custom:fold-entity-row
head: sensor.ground_floor_lights_power
entities:
- type: custom:auto-entities
card:
type: entities
filter:
template: |
{{state_attr("sensor.ground_floor_lights_power", "entities") }}
sort:
method: state
reverse: true
numeric: true
- type: custom:fold-entity-row
head: sensor.first_floor_lights_power
entities:
- type: custom:auto-entities
card:
type: entities
filter:
template: |
{{state_attr("sensor.first_floor_lights_power", "entities") }}
sort:
method: state
reverse: true
numeric: true
- type: custom:fold-entity-row
head: sensor.second_floor_lights_power
entities:
- type: custom:auto-entities
card:
type: entities
filter:
template: |
{{state_attr("sensor.second_floor_lights_power", "entities") }}
sort:
method: state
reverse: true
numeric: true
- type: custom:fold-entity-row
head: sensor.all_sonos_and_home_power
entities:
- type: custom:auto-entities
card:
type: entities
filter:
template: |
{{state_attr("sensor.all_sonos_and_home_power", "entities") }}
sort:
method: state
reverse: true
numeric: true
- type: custom:fold-entity-row
head: sensor.garden_lights_power
entities:
- type: custom:auto-entities
card:
type: entities
filter:
template: |
{{state_attr("sensor.garden_lights_power", "entities") }}
sort:
method: state
reverse: true
numeric: true
I have played around with changing card type: entities to something else (example belllow) but that does not work.
- type: custom:fold-entity-row
head: sensor.other_measured_devices_power
entities:
- type: custom:auto-entities
card:
type: custom:mushroom-entity-card ### EXAMPLE WHICH DOES NOT WORK
filter:
template: >
{{state_attr("sensor.other_measured_devices_power", "entities")
}}
sort:
method: state
reverse: true
numeric: true
Hey Marius, you can do it with a Tile card like this:
type: tile
entity: input_number.lounge_pc_volume
icon: mdi:volume-high
color: blue
card_mod:
style:
ha-tile-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--tile-color) {{ (states(config.entity) |float * 100) | round(0) }}% 0%, var(--card-background-color) 0% 100%);
}
ha-tile-info$: |
.secondary {
visibility: hidden;
}
.secondary:before {
visibility: visible;
content: "{{ (states(config.entity) |float * 100) | round(0) }}%";
}
1 Like
Youāre an absolute hero sir. This is exactly what I was looking for. A personal thank you for solving that for me and a general thank you for what you do for this community!
1 Like
thanks Rhysb,
its not what I expected thoughā¦ top is the tile card with your mod, bottom is the mushroom
1 Like
This should give you something to play with:
type: custom:fold-entity-row
head: group.all_lights
entities:
- type: custom:auto-entities
filter:
include:
- group: group.all_lights
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
}
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
Or for a pure Mushroom Folded Entity Row, have a look here:
2 Likes
The value you use needs to be a percentage. My example includes logic to convert the volume to a %, so you will need to remove that.
Weird with the flashing 
. I havenāt seen thatā¦
1 Like
thanks a bunch, I copied blindly and didnt checkā¦ sorry for that.
will report tomorrow, when then printer is back on 
1 Like
@rhysb stupid question, how do I hide the gap between the two (2) cards?
Got:
Want:
Code:
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 155px auto
margin: '-4px -4px -8px -4px'
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.processor_use
icon_color: blue
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
name: Core
card_mod:
style: |
ha-card {
margin-right: -8px;
}
- type: custom:mushroom-entity-card
entity: sensor.memory_use_percent
icon_color: pink
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
name: Memory
card_mod:
style: |
ha-card {
margin-top: -8px;
margin-right: -8px;
}
- type: custom:mushroom-entity-card
entity: sensor.disk_use_percent
icon_color: green
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
name: Disk
card_mod:
style: |
ha-card {
margin-top: -8px;
margin-right: -15px;
}
- type: custom:mushroom-entity-card
entity: sensor.core_cpu_temperature
icon_color: orange
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
name: Temp
card_mod:
style: |
ha-card {
margin-top: -8px;
margin-right: -8px;
}
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px;
}
- type: custom:apexcharts-card
header:
show: false
series:
- entity: sensor.processor_use
name: Core
color: rgb(33, 150, 243)
show:
legend_value: false
- entity: sensor.memory_use_percent
name: Memory
color: rgb(233, 30, 99)
show:
legend_value: false
- entity: sensor.disk_use_percent
name: Disk
color: rgb(76, 175, 80)
- entity: sensor.core_cpu_temperature
name: Temp
color: rgb(255, 152, 0)
chart_type: radialBar
apex_config:
legend:
show: false
chart:
fontFamily: var(--primary-font-family)
height: 264x
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px;
}
card_mod:
style: |
ha-card {
height: 306px;
}
3 Likes