Hello,
Tank you all for your commitment and kindness, here is what I ended with all your help 
Home :
There is also a lot of conditional card and dynamic layout.
I can share code if you want to, you just have to ask for it and I will be glad.
Have you all a good day.
julien
Mushroom Chip Dual Progress Bar:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:battery-high
icon_color: purple
content: >
{{ states('sensor.rhys_phone_battery_level') | round(0) }}% Phone | {{
states('sensor.rhys_tablet_battery_level') | round(0) }}% Tablet
card_mod:
style: |
ha-card:before {
content: "";
position: absolute;
height: var(--chip-height);
width: var(--chip-height);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 63%, transparent 0%), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ states('sensor.rhys_phone_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
}
ha-card:after {
content: "";
position: absolute;
left: 3px;
top: 3px;
height: calc(var(--chip-height) * 0.83);
width: calc(var(--chip-height) * 0.83);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 63%, transparent 0%), conic-gradient(rgb(var(--rgb-pink)) {{ states('sensor.rhys_tablet_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
}
::slotted(ha-icon) {
margin-right: 0.45em !important;
z-index: 1;
}
Mushroom Chip Dual Progress Bar with Picture Icon:
type: custom:mushroom-chips-card
chips:
- type: template
icon: none
content: >
{{ states('sensor.rhys_phone_battery_level') | round(0) }}% Phone | {{
states('sensor.rhys_tablet_battery_level') | round(0) }}% Tablet
card_mod:
style: |
ha-card:before {
content: "";
position: absolute;
height: var(--chip-height);
width: var(--chip-height);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 63%, transparent 0%), conic-gradient(rgb(var(--rgb-teal)) {{ states('sensor.rhys_phone_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
}
ha-card:after {
content: "";
position: absolute;
left: 3px;
height: calc(var(--chip-height) * 0.83);
width: calc(var(--chip-height) * 0.83);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 63%, transparent 0%), conic-gradient(rgb(var(--rgb-light-green)) {{ states('sensor.rhys_tablet_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
}
::slotted(ha-icon) {
background: url( '/local/battery2.svg' ) no-repeat center center;
background-size: 0.7em;
height: var(--chip-height);
width: var(--chip-height);
border-radius: 50%;
z-index: 1;
}
.content {
--chip-padding: 0 0.25em 0 0;
}
The conic-gradient works in a clock-wise direction, but we can rotate of reverse it with a transform.
Mushroom Chip Progress Bar Reversed:
type: custom:mushroom-chips-card
chips:
- type: template
entity: input_number.lounge_pc_volume
icon: mdi:volume-high
icon_color: blue
content: '{{ (states(entity) | float * 100) | round(0) }}% Volume'
card_mod:
style: |
ha-card:before {
content: "";
position: absolute;
height: var(--chip-height);
width: var(--chip-height);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-cyan)) {{ (states(config.entity) |float * 100) | round(0) }}% 0%, var(--card-background-color) 0% 100%);
transform: rotateY(180deg);
}
::slotted(ha-icon) {
margin-right: 0.4em !important;
}
Is this what you are wanting to do?
Mushroom Media Player Tile Wrap:
type: custom:mushroom-media-player-card
entity: media_player.currently_playing
show_volume_level: false
use_media_info: true
volume_controls:
- volume_set
- volume_buttons
media_controls:
- previous
- play_pause_stop
- next
- shuffle
card_mod:
style:
mushroom-state-info$: |
.primary {
white-space: normal !important;
}
Hi all!
I started with HA last month and I am slowly getting the hang of it, also thanks to sites like these 
I have a small issue with one of the mushroom animations. The single card animations work as they should, but when you combine them they don’t align properly. Could someone point me in the right direction?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: >-
{% if states('sensor.wasmachine_power') | float > 1 %}
mdi:washing-machine
{% else %}
mdi:washing-machine-off
{% endif %}
icon_color: >-
{% if states('sensor.wasmachine_power') | float > 1 %}
blue
{% else %}
{% endif %}
layout: vertical
primary: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: shake 400ms ease-in-out infinite;' if states('sensor.wasmachine_power') | float > 10 }}
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: >-
{% if states('sensor.wasmachine_power') | float > 1 %}
blue
{% else %}
{% endif %}
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: spin 1s linear infinite;' if states('sensor.wasmachine_power') | float > 10 }}
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
height: 66px;
}
That’s exactly what I was looking at doing however I’m not sure how to use that format of card_mod style: when already using style | if that makes sense?
Simply adding mushroom-state-info$ to my existing styling doesn’t work.
This is my current styling format based on your previous media_card design:
card_mod:
style: |
mushroom-shape-icon {
display: none;
}
ha-card {
--ha-card-border-width: 0;
--rgb-state-media-player: var(--album-art-color);
--control-icon-size: 32px;
}
......etc
I have tried the below and a few other variations but can’t seem to do it .
e.g.
mushroom-state-info .primary {
white-space: normal !important;
}
Hi your setup looks great, I’m learning from all the amazing people in this site. would share the code for the salon cards? Thank you in advance.
Any advice here on how I can fix this issue?
Using a stack in card and chip cards but the colors are off…
I’d love to see the code for those collapsed items like ‘Horizon’, ‘Zion’ etc.
As others have mentioned that looks great and would appear that you’ve done some interesting things. Do you have a github project for that, or would you be willing to share your code?
Any idea how I can display a number instead of an icon?
I thought about having a few icons for each number but since I need a decimal point it makes the range too wide.
It should look something like this:
but it can also be 20.1 or 19.8 so predefined icons isn’t the best solution here
Can you share the Epson printer code please?
It’s been shared before, but can’t find it. On a template card:
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
font-size: 20px;
content: '20º';
}
ha-icon {
width: 0px !important;
}
Here is code for printer.
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: grid
layout:
margin: '-4px -4px -8px -4px'
padding: 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px'
cards:
- type: custom:mushroom-template-card
primary: Epson Printer
entity: sensor.epson_xp_760_series
secondary: |
{% if is_state(entity, 'unavailable') %}
Unavailable
{% else %}
{% set printer_ip_list = state_attr('sensor.epson_xp_760_series','uri_supported') %}
{% set printer_ip_2 = printer_ip_list[0] %}
{% set printer_ip_1 = printer_ip_2.split('//')[1] %}
{% set printer_ip = printer_ip_1.split(':')[0] %}
{{printer_ip}}
{% endif %}
icon: mdi:printer
icon_color: >-
{{ 'orange' if not is_state(entity, 'unavailable') else
'disabled' }}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |-
@keyframes blink {
50% {opacity: 0;}
}
mushroom-shape-icon {
{% if is_state("sensor.epson_xp_760_series", "printing") %}
animation: blink 1.2s linear infinite;
{% endif %}
}
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: conditional
conditions:
- entity: sensor.epson_xp_760_series
state_not: unavailable
card:
type: custom:mushroom-template-card
entity: input_boolean.epson_printer_dropdown
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-down' if is_state(entity, 'off') else
'mdi:chevron-up' }}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.epson_printer_dropdown
state: 'on'
card:
type: custom:bar-card
direction: up
entities:
- color: MediumTurquoise
entity: sensor.epson_xp_760_series_cyan_ink
name: C
- color: Gold
entity: sensor.epson_xp_760_series_yellow_ink
name: 'Y'
- color: Orchid
entity: sensor.epson_xp_760_series_light_magenta_ink
name: LM
- color: '#282828'
entity: sensor.epson_xp_760_series_black_ink
name: B
- color: PaleTurquoise
entity: sensor.epson_xp_760_series_light_cyan_ink
name: LC
- color: MediumOrchid
entity: sensor.epson_xp_760_series_magenta_ink
name: M
height: 140px
positions:
icon: 'off'
value: outside
name: outside
target: 20
stack: horizontal
style: |-
ha-card {
--bar-card-border-radius: 12px;
}
bar-card-name {
font-size: 11px;
}
bar-card-value {
font-size: 11px
}
Hello I0ghan,
I’m also interested to the code 
Code for my PC is too long. I have split it in 2 parts.
Part 1
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
margin: '-4px -4px -8px -4px'
padding: 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px'
padding: 0px
cards:
- type: custom:mushroom-template-card
entity: switch.desktop
primary: Horizon
secondary: IP
icon: mdi:desktop-classic
icon_color: >-
{{ 'orange' if is_state('switch.desktop', 'on') else
'disabled' }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |
--popup-max-width: 600px;
--popup-min-width: 400px;
--popup-border-width: 1px;
--popup-border-radius: 12px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em) brightness(1.2);
content:
type: custom:layout-card
layout_type: grid
layout:
width: 100%
cards:
- type: custom:mushroom-template-card
entity: switch.desktop
primary: >-
{{ 'Shutdown' if is_state(entity, 'on') else
'Power ON' }}
icon: mdi:power
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''green'' }}'
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: >
--popup-max-width: 600px;
--popup-min-width: 400px;
--popup-border-width: 1px;
--popup-border-radius: 12px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em)
brightness(1.2);
content:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
entity: switch.desktop
primary: >-
{{ 'Are you wish to shutdown Horizon?'
if is_state(entity, 'on') else 'Are you
wish to turn on Horizon?' }}
icon: mdi:comment-question
icon_color: yellow
hold_action:
action: none
tap_action:
action: none
double_tap_action:
action: none
right_button: 'Yes'
left_button: Cancel
right_button_action:
service: browser_mod.popup
data:
style: >
--popup-max-width: 600px;
--popup-min-width: 400px;
--popup-border-width: 1px;
--popup-border-radius: 12px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em)
brightness(1.2);
content:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
entity: switch.desktop
primary: >-
{{ 'Fine, Horizon will shutdown in 4s.'
if is_state(entity, 'on') else 'Fine,
Horizon will turn on in 4s.' }}
icon: mdi:information-outline
icon_color: yellow
hold_action:
action: none
tap_action:
action: none
double_tap_action:
action: none
dismissable: false
title: ''
timeout: 4000
timeout_action:
service: switch.toggle
data:
entity_id: switch.desktop
right_button: Cancel
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: power 1.5s infinite;
}
@keyframes power {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
}
.: |
:host {
--mush-icon-border-radius: 12px;
}
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: conditional
conditions:
- entity: switch.desktop
state: 'on'
card:
type: custom:mushroom-template-card
entity: input_boolean.desktop_dropdown
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-down' if is_state(entity, 'off') else
'mdi:chevron-up' }}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.desktop_dropdown
state: 'on'
- entity: switch.desktop
state: 'on'
card:
type: custom:layout-card
layout_type: grid
layout:
margin: 0px -4px -16px -4px
padding: 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Power Consumption
secondary: |-
{% if is_state(entity, 'unavailable') %}
Unavailable
{% else %}
{{ states(entity) }}W
{% endif %}
badge_icon: |-
{% if is_state(entity, 'unavailable') %}
mdi:help
{% endif %}
badge_color: |-
{% if is_state(entity, 'unavailable') %}
orange
{% endif %}
icon: mdi:lightning-bolt
icon_color: >-
{{ 'blue' if not is_state(entity, 'unavailable') else 'disabled'
}}
entity: sensor.horizon_socket_active_power
tap_action:
action: more-info
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.horizon_socket_active_power
points_per_hour: 30
line_width: 2
show:
icon: false
labels: false
name: false
points: false
state: false
color_thresholds:
- color: '#0da035'
value: 100
- color: '#e0b400'
value: 200
- color: '#e45e65'
value: 400
card_mod:
style: |
ha-card {
margin-top: -20px;
}
card_mod:
style: |
ha-card {
margin-bottom: -4px;
}
- type: custom:stack-in-card
cards:
- type: custom:uptime-card
entity: switch.desktop
icon: mdi:desktop-classic
name: Horizon
hours_to_show: 24
status_adaptive_color: true
average_text: '% uptime'
alias:
ok: ' '
ko: ' '
effect: fade
target: card
speed: 1
color:
icon: gray
ok: '#EF810E'
ko: gray
half: orange
none: black
title: gray
show:
header: false
title: false
icon: false
status: true
timeline: true
footer: false
average: false
tooltip:
animation: true
hour24: true
clip: {}
blink: {}
tap_action: {}
init: {}
bar:
amount: 48
height: 16
round: 2
card_mod:
style: |
ha-card {
margin-top: -14px;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 2fr
grid-template-rows: auto
margin: '-4px -4px 0px -4px'
padding: 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.desktop_cputemp
icon: mdi:thermometer
icon_color: >-
{{ 'blue' if not is_state(entity, 'unavailable') else
'disabled' }}
hold_action:
action: none
primary: CPU
secondary: |-
{% if is_state(entity, 'unavailable') %}
Unavailable
{% else %}
{{ states(entity) }} °C
{% endif %}
badge_icon: |-
{% if is_state(entity, 'unavailable') %}
mdi:help
{% endif %}
badge_color: |-
{% if is_state(entity, 'unavailable') %}
orange
{% endif %}
card_mod:
style: |
ha-card {
margin-top: 0px;
margin-right: -10px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.desktop_gputemperature
hold_action:
action: none
primary_info: name
secondary_info: state
name: GPU
card_mod:
style: |
ha-card {
margin-top: -6px;
margin-right: -10px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.desktop_memoryusage
hold_action:
action: none
primary_info: name
secondary_info: state
name: RAM
card_mod:
style: |
ha-card {
margin-top: -6px;
margin-right: -10px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.desktop_cpuload
icon: mdi:cpu-64-bit
hold_action:
action: none
primary_info: name
secondary_info: state
name: CPU
card_mod:
style: |
ha-card {
margin-top: -6px;
margin-right: -10px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.desktop_gpuload
icon: mdi:expansion-card-variant
hold_action:
action: none
primary_info: name
secondary_info: state
name: GPU
card_mod:
style: |
ha-card {
margin-top: -6px;
margin-right: -10px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.desktop_space_used_percent
icon: mdi:harddisk
hold_action:
action: none
primary_info: name
secondary_info: state
name: HDD
card_mod:
style: |
ha-card {
margin-top: -6px;
margin-right: -10px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px;
}
- type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
experimental:
color_threshold: true
chart_type: radialBar
show:
loading: false
apex_config:
chart:
height: 258px
plotOptions:
radialBar:
offsetY: -19
startAngle: -116
endAngle: 116
hollow:
size: 46%
dataLabels:
name:
show: false
value:
show: false
legend:
show: false
stroke:
dashArray: 2
lineCap: flat
series:
- entity: sensor.desktop_cputemp
type: column
name: CPU Temp
color_threshold:
- value: 0
color: '#0084ff'
- value: 45
color: orange
- value: 60
color: red
- entity: sensor.desktop_gputemperature
type: column
name: GPU Temp
color_threshold:
- value: 0
color: '#0084ff'
- value: 45
color: orange
- value: 60
color: red
- entity: sensor.desktop_memoryusage
type: column
name: RAM
color_threshold:
- value: 0
color: green
- value: 60
color: orange
- value: 85
color: red
- entity: sensor.desktop_cpuload
type: column
name: CPU
color_threshold:
- value: 0
color: green
- value: 60
color: orange
- value: 85
color: red
- entity: sensor.desktop_gpuload
type: column
name: GPU
color_threshold:
- value: 0
color: green
- value: 60
color: orange
- value: 85
color: red
- entity: sensor.desktop_space_used_percent
type: column
name: HDD
color_threshold:
- value: 0
color: green
- value: 40
color: orange
- value: 72
color: red
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
margin-bottom: 20px;
margin-top: 12px;
}
- type: custom:mushroom-template-card
primary: HORIZON
icon_color: >-
{{ 'orange' if not is_state('switch.desktop', 'off') else
'disabled' }}
icon: mdi:desktop-classic
layout: vertical
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
:host {
--mush-card-primary-font-size: 13px;
--mush-icon-border-radius: 50%;
--mush-icon-size: 60px;
}
ha-card {
background: transparent;
--ha-card-box-shadow: 0px;
margin-top: -120px;
width: 120px;
margin-left: auto;
margin-right: auto;
}
Part 2
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 42px auto
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.desktop_space_used_percent
icon: mdi:harddisk
badge_icon: |-
{% if states(entity) in ['unavailable','unknown'] %}
mdi:help
{% endif %}
badge_color: |-
{% if states(entity) in ['unavailable','unknown'] %}
orange
{% endif %}
icon_color: |-
{% if states(entity) in ['unavailable','unknown'] %}
disabled
{% elif states(entity) | int < 40 %}
green
{% elif states(entity) | int < 72 %}
orange
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
entity: sensor.desktop_space_used_percent
height: 42px
entity_row: true
name: '1TB '
severity:
- from: '0'
to: '40'
color: rgb(var(--mush-rgb-green))
- from: '40'
to: '72'
color: rgb(var(--mush-rgb-orange))
- from: '72'
to: '100'
color: rgb(var(--mush-rgb-red))
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
{% if states('sensor.desktop_space_used_percent') in ['unavailable','unknown'] %}
display: none;
{% endif %}
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-name {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
card_mod:
style: |
ha-card {
margin-top: -8px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: CPU Temperature
secondary: |-
{% if is_state(entity, 'unavailable') %}
Unavailable
{% else %}
{{ states(entity) }}°C
{% endif %}
badge_icon: |-
{% if is_state(entity, 'unavailable') %}
mdi:help
{% endif %}
badge_color: |-
{% if is_state(entity, 'unavailable') %}
orange
{% endif %}
icon_color: >-
{{ 'blue' if not is_state(entity, 'unavailable') else
'disabled' }}
icon: mdi:thermometer
entity: sensor.desktop_cputemp
tap_action:
action: more-info
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.desktop_cputemp
points_per_hour: 30
line_width: 2
show:
icon: false
labels: false
name: false
points: false
state: false
color_thresholds:
- color: '#0da035'
value: 40
- color: '#e0b400'
value: 60
- color: '#e45e65'
value: 80
card_mod:
style: |
ha-card {
margin-top: -22px;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 2fr 2fr
grid-template-rows: auto
margin: '-4px -4px -4px -4px'
padding: 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: RAM Usage
secondary: |-
{% if is_state(entity, 'unavailable') %}
Unavailable
{% else %}
{{ states(entity) }}%
{% endif %}
badge_icon: |-
{% if is_state(entity, 'unavailable') %}
mdi:help
{% endif %}
badge_color: |-
{% if is_state(entity, 'unavailable') %}
orange
{% endif %}
icon_color: >-
{{ 'blue' if not is_state(entity, 'unavailable') else
'disabled' }}
icon: mdi:memory
entity: sensor.desktop_memoryusage
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--card-primary-font-size: 12px;
--card-secondary-font-size: 11px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.desktop_memoryusage
points_per_hour: 30
line_width: 2
show:
icon: false
labels: false
name: false
points: false
state: false
color_thresholds:
- color: '#0da035'
value: -1
- color: '#e0b400'
value: 60
- color: '#e45e65'
value: 80
card_mod:
style: |
ha-card {
margin-top: -20px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: CPU Usage
secondary: |-
{% if is_state(entity, 'unavailable') %}
Unavailable
{% else %}
{{ states(entity) }}%
{% endif %}
badge_icon: |-
{% if is_state(entity, 'unavailable') %}
mdi:help
{% endif %}
badge_color: |-
{% if is_state(entity, 'unavailable') %}
orange
{% endif %}
icon_color: >-
{{ 'blue' if not is_state(entity, 'unavailable') else
'disabled' }}
icon: mdi:cpu-64-bit
entity: sensor.desktop_cpuload
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--card-primary-font-size: 12px;
--card-secondary-font-size: 11px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.desktop_cpuload
points_per_hour: 30
line_width: 2
show:
icon: false
labels: false
name: false
points: false
state: false
color_thresholds:
- color: '#0da035'
value: -1
- color: '#e0b400'
value: 45
- color: '#e45e65'
value: 65
card_mod:
style: |
ha-card {
margin-top: -20px;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 2fr 2fr
grid-template-rows: auto
margin: 0px -4px 0px -4px
padding: 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: GPU Usage
secondary: |-
{% if is_state(entity, 'unavailable') %}
Unavailable
{% else %}
{{ states(entity) }}%
{% endif %}
badge_icon: |-
{% if is_state(entity, 'unavailable') %}
mdi:help
{% endif %}
badge_color: |-
{% if is_state(entity, 'unavailable') %}
orange
{% endif %}
icon_color: >-
{{ 'blue' if not is_state(entity, 'unavailable') else
'disabled' }}
icon: mdi:expansion-card-variant
entity: sensor.desktop_gpuload
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--card-primary-font-size: 12px;
--card-secondary-font-size: 11px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.desktop_gpuload
points_per_hour: 30
line_width: 2
show:
icon: false
labels: false
name: false
points: false
state: false
color_thresholds:
- color: '#0da035'
value: -1
- color: '#e0b400'
value: 60
- color: '#e45e65'
value: 80
card_mod:
style: |
ha-card {
margin-top: -20px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: GPU Temp
secondary: |-
{% if is_state(entity, 'unavailable') %}
Unavailable
{% else %}
{{ states(entity) }}%
{% endif %}
badge_icon: |-
{% if is_state(entity, 'unavailable') %}
mdi:help
{% endif %}
badge_color: |-
{% if is_state(entity, 'unavailable') %}
orange
{% endif %}
icon_color: >-
{{ 'blue' if not is_state(entity, 'unavailable') else
'disabled' }}
icon: mdi:thermometer
entity: sensor.desktop_gputemperature
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--card-primary-font-size: 12px;
--card-secondary-font-size: 11px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.desktop_cpuload
points_per_hour: 30
line_width: 2
show:
icon: false
labels: false
name: false
points: false
state: false
color_thresholds:
- color: '#0da035'
value: -1
- color: '#e0b400'
value: 45
- color: '#e45e65'
value: 65
card_mod:
style: |
ha-card {
margin-top: -20px;
}
Hi. I am new here. I do not have any github project. I even do not know how to create it
I shared already code for Horizon and Printer.
Hi this was related to a mushroom climate card …